Flashムービーを表示させるとき，ムービーの容量が大きくなってくると，コンテンツをすべてダウンロードするまでにそれなりに待ち時間がかかるようになります。そうした場合に，現在どのくらい読み込んだのか，あとどのくらい待てばコンテンツを見ることができるのかを表示しておけば，ユーザーはさほどイライラしなくて済むかもしれません。今回は，こうした「読み込み待ち用の処理」を作成してみましょう。

　前回，前々回と画像を読み込む処理に利用したMovieClipLoaderクラスには，読み込み状況を取得するためのプロパティやイベントも用意されています。ここでは，この仕組みを利用します。

いわゆる「Now Loading」

　図1はボタンを押すと，外部のFlashムービーを読み込むムービーです。Flashムービーを読み込む際には，回線の速度に応じて，読み込み待ち状況がプログレスバーで表示されます＊1。Flashムービーを使ったWebサイトでよく見かける，いわゆる「Now Loading」という読み込み待ち用の処理です。

図1：読み込み待ち表示を行うムービー（クリックするとムービーを表示します）

　このムービーのファイル構成は図2のようになっています。ムービーを読み込むDVDデッキのような“読み込み用ムービー”と，個々のDVDソフトのような“コンテンツ用ムービー”に分かれているわけですね。

図2：図1のムービーのファイル構成

onLoadProgressイベントハンドラで読み込みごとに処理を行わせる

　外部のFlashムービーや画像ファイルを読み込むには，MovieClipLoaderクラスを利用することは，この連載ですでに何回か説明しました。このMovieClipLoaderクラスには，読み込みを指定したファイルの“読み込み状況”をチェックできる「onLoadProgressイベントハンドラ」が用意されています。

　onLoadProgressイベントハンドラは，パケットとして送られてくる読み込み用コンテンツのファイルが，ローカルのハードディスクへと書き込まれるたびに，任意の処理を実行させることができます。このonLoadProgressイベントハンドラでは，前回ご紹介したonLoadCompleteイベントハンドラと同様，「イベントリスナー」の仕組みを使って処理を記述します。

　外部ムービーの読み込みを「リスナーさん」という人物の引っ越し作業にたとえてみると，運送業者であるところのMovieClipLoaderは，全体の荷物を小分けにして運びます。そして，その小分けにした荷物が到着する度に「リスナーさん，机が到着しましたー」「リスナーさん，冷蔵庫お持ちしましたー」「リスナーさん，謎の段ボールお持ちしましたー」と知らせてくれるようなイメージとなります。

画像を読み込む

　実際にイベントハンドラを使ってみましょう。手はじめに画像を読み込んでみます。新規Flashドキュメントを作成し，任意のフォルダ内に適当な名前を付けて保存します。さらに，そのフォルダの中に図3のように「image001.jpg」という画像ファイルを配置します。

図3：Flashドキュメントと画像ファイル

　1フレーム目に，次のようにonLoadProgressイベントハンドラを利用するコードを記述します。 

//MovieClipLoaderを生成
var mcLoader:MovieClipLoader = new MovieClipLoader();
//読み込み用のインスタンスを生成
var imageBox:MovieClip 
        = _root.createEmptyMovieClip("imageBox",0)
//リスナーオブジェクトを生成
var listenerObject:Object = new Object();
//onLoadProgressイベントハンドラメソッドを定義
listenerObject.onLoadProgress = function(mc, lb, tb) {
  trace("読み込み状況は，"+lb+"/"+tb+"です");
};
//リスナーオブジェクトを登録
mcLoader.addListener(listenerObject);
//画像を読み込む
mcLoader.loadClip("image001.jpg",imageBox);

　ムービープレビューを実行すると，図4のように[情報]パネルにダウンロードの状況が表示されます。完全にファイルが読み込まれるまでに，複数回処理が実行されていることがわかりますね。ローカル環境でテストする場合には，一瞬で読み込みが終わってしまうので，ムービープレビュー画面のメニューから[表示]-[ダウンロードの設定]から仮想の回線速度を設定し，さらに[表示]-[ダウンロードのシミュレート]を選択してテストしてみましょう。

図4：ダウンロードの状況が表示されたところ

　ここで注目していただきたいのは，onLoadProgressイベントハンドラメソッドの記述方法です。実はonLoadProgressイベントハンドラメソッドは，「読み込みを行っているインスタンス」「読み込み済みバイト数」「全体のバイト数」の三つの引数を受け取ることができます。 

リスナー.onLoadProgress =
  function(対象インスタンス,読込済みバイト数,全体バイト数){
  //処理
};
三つの引数を受け取る変数名は自分で自由に指定して構いません。一つ目にはインスタンスへの参照が，二つ目には読み込み済みバイト数が，そして三つ目には全体バイト数が渡されるわけですね。

　この仕組みを利用すると，現在，どのくらい読み込んでいるのかという情報を，簡単に取得し，表示することができるというわけです。 

listenerObject.onLoadProgress = function(mc, lb, tb) {
  trace("読み込み状況は，"+lb+"/"+tb+"です");
};
パーセント表示にしたい場合には， 
listenerObject.onLoadProgress = function(mc, lb, tb) {
  trace("読み込み状況は，"+Math.floor(lb/tb*100)+"％です");
};
のようなコードにすればOKです。

＊1 ものすごく回線速度が速い場合にはほとんど表示されないかもしれません。また，2回目以降の読み込みは，すでにFlashムービーがキャッシュされているため，読み込み待ち表示がされません。