MovieClipLoaderクラスを使った
プログレッシブバー付き外部画像読み込みフォトアルバム（１）

写真を読み込むと、読み込みが始まり読み込み中を表すバーが伸びます。伸びきるとバーが消え、写真が表示されます。写真は外部から読み込みます。
外部画像はjpegだけでなく、swf、gif、pngでも可能でオールフラッシュサイトにも転用できます。MovieClipLoaderクラスを使うことで実現しています。細かく手順をわけて解説してゆきます。全４回予定。

レベル：基礎〜中級

キーワード：MovieClipLoaderクラス、外部写真の読み込み、オールフラッシュサイト

対応バーション：MX2004、8、8basic

外部画像（jpeg、swf等）を動的にFlash内に読み込むときに使われてきたのが、MovieClipクラスのloadMovieメソッドです。いまでも有効につかえますが、より高機能を実装するとなると難解なコーディングになってしまいます。
そこで導入されたのがMovieClipLoaderクラスです。これは「外部画像の読み込み専門」のクラスであり、読み込んでいる最中の処理や読み込み後の処理などの細かいイベント処理がシンプルなコードで実装できます。

  1. まずは全４回後の完成サンプルをご覧下さい。
    ボタンをクリックすると、読み込みバーが現れ、バー徐々に伸びて、写真が読み込まれます。今回はファイル容量の軽い画像を読み込んでいるため、通信環境によって一瞬でバーが伸びきっててしまう場合もあります。
  2. 写真素材をダウンロード展開するとphotoフォルダのなかに、３枚の写真が格納されています。
  3. 任意の場所にsampleフォルダを作り、photoフォルダをいれておく。
  4. ［ファイル］メニューから［新規］→［Flashドキュメント］を選択。［OK］ボタンをクリック。
    FlashCS3をお使いの方は、［ファイル］メニューから［新規］をクリック。
    ［一般］タブを選択して［Flashファイル（AS2.0）］を選択します。
  5. ［ファイル］メニューから［保存］をクリック。任意のファイル名でsampleフォルダに保存。
  6. ［プロパティインスペクタ］で「幅：500px　高さ：300px　背景：黒　フレームレート：24fps」と設定する。
    ［OK］ボタンをクリック。
  7. ［レイヤー1］をダブルクリックして、「content」と名前をつける。
  8. ［挿入］メニューから［新規シンボル］をクリック。
    「シンボル名：mcTarget　タイプ：ムービークリップ」と設定し、［OK］ボタンをクリック。
  9. 何もしないで［シーン1］をクリックして、シーン1に戻ります。
  10. ［ライブラリ］パネルを表示する。先ほど作ったシンボル［mcTarget］があるはず。
    ［mcTarget］をドラッグアンドドロップして、ステージに配置。

  11. ［プロパティインスペクタ］で、インスタンス名を「target_mc」とする。「Enterキー」を押して確定。
    この空のムービークリップインスタンスに外部からJPEGやSWFファイルが読み込まれる。
  12. ［整列］パネルで［ステージを基準］をオンにして、［左揃え］、［上揃え］をクリック。

  13. 図のように、「十字丸」のオブジェクトが左上に配置されればOK。
  14. 新規レイヤーを作成する。「nav」と名前をつける。
  15. ［矩形ツール］をクリック。「線：なし」「塗り：任意」と設定。適当な大きさの正方形を描く。ステージの左下に配置。
  16. 正方形を選択して、「F8」を押す。
    「シンボル名：btNav　タイプ：ボタン　基準点：左上」と設定し、［OK］ボタンをクリック。
  17. このボタンを３つ複製して水平に並べよう。それぞれ、インスタンス名をつける。
    インスタンス名は、左から「nav1_btn」「nav2_btn」「nav3_btn」と名前をつけておく。

  18. ［ウインドウ］メニューから［ムービーエクスプローラー］をクリック。インスタンス名がしっかりついているかを確認しよう。
  19. インスタンス名の確認は大事です。ムービーエクスプローラーが便利です。
  20. 新規レイヤーを作成する。「as」と名前をつける。以下のアクションを記述する。
    var mcl = new MovieClipLoader();
    nav1_btn.onRelease = function() {
    mcl.loadClip("photo/content1.jpg", target_mc);
    };
    nav2_btn.onRelease = function() {
    mcl.loadClip("photo/content2.jpg", target_mc);
    };
    nav3_btn.onRelease = function() {
    mcl.loadClip("photo/content3.jpg", target_mc);
    };
  21. ［ファイル］メニューから［保存］をクリック。
  22. ［制御］メニューから［ムービープレビュー］をクリックして動作を確認しよう。 ボタンを押すと写真が読み込まれればOK。
  23. 今回は、photo フォルダの中のJPEGファイルを読み込んでいるが、swfファイル、pngファイル、gifファイルの読み込みも可能である。これは、FlashPlayerのバージョンによって、読み込める画像フォーマットが違うので注意したい。
    対応は以下の通り。これは、loadMovieメソッドも同様である。FlashPlayer5：SWF
    FlashPlayer6〜7：SWF、非プログレッシブJPEG
    FlashPlayer8以降：SWF、非プログレッシブJPEG、プログレッシブJPEG、PNG、非アニメーションGIF
  24. 今回はここでブレイクです。
  25. 次回はMovieClipLoaderならではのイベントハンドラの設定をしてイベント処理を実装します。次回の更新にご期待ください。

→次回に続きます。