第五章 外部ファイルの読み込み状況を取得する - 2

外部ファイルの読み込み状況をプリローダーで表示

今回はpict_mcに写真を読み込む度に、読み込み状況をプリローダーで表示します。イベントリスナーで読み込み状況を監視し、イベントの発生にあわせてプリローダーを表示するようにします。

なお前回のスライドショーと同様に、メインタイムラインの1フレームに記述するコードがあまり長くなると内容を把握し難いため、MovieClipLoaderの生成とイベントリスナーによるイベントの監視部分のコードは、"mcloader.as"というファイルに記述して、.flaファイルから読み込むようにします。

mcloader.asに記述するコード

※2〜3行目は、flaファイルのactionレイヤーの1フレームからカットして貼り付けます。

mcloader.asには、onLoadStart onLoadProgress onLoadCompleteイベントの発生に合わせて処理を行うよう記述しています。

onLoadStartの処理

onLoadStartは外部ファイルの読み込みを開始したときに発生するイベントです。functionに続く()内には、変数を指定します。ここでは変数名を_mcとしています。このイベントが発生したとき、外部ファイルを読み込む先のムービークリップインスタンスが変数_mcに代入されます。

そして変数_mcに代入されたインスタンスの親の名前がpict_mcのときは、次の処理を行っています。

  • preloader_mcを表示(9行目)
  • pict_mcを表示(10行目)

_parentとは?

拡大写真の読み込み先は、pict_mcの中のbase_mcになります。つまりonLoadStartイベント発生時に、渡されるインスタンス名は、base_mcとなります。今回base_mcというインスタンス名を他のムービークリップ内でも使用しているため、pict_mc内のbase_mcであることを判別するため、親の名前がpict_mcであるかどうかを8行目のif文の条件としています。_parentは、親のインスタンスを意味します。

onLoadProgressの処理

onLoadProgressは外部ファイルのデータの一部を読み込む度に発生するイベントです。このイベントが発生したとき、(1)読み込み先ムービークリップインスタンス、(2)ロード済みバイト数、(3)トータルのバイト数が渡され、今回は(1)_mc、(2)_lb、(3)_tbという変数に代入しています。

onLoadStart時と同様に、17行目で変数_mcの親のインスタンス名がpict_mcのときのみ、次の処理を行っています。

  • Math.floor((_lb / _tb) * 100)の式で、読み込み率を計算しnum.textに代入(18行目)
  • bar_mcの_xscaleプロティに、num.textの値を代入(19行目)

18〜19行目の処理は、前回とほぼ同じです。numは、preloader_mc内のダイナミックテキストのインスタンス名で、textプロパティは表示させる内容になります。このプロパティに現在の読み込み率を代入することで値を変化させています。

さらに読み込み率に応じて、preloader_mc内のbar_mcの_xscaleプロパティの変更し、読み込み状況に合わせてバーば伸びるようにしています。

onLoadCompleteの処理

mcloader.asに記述するコード

onLoadCompleteは外部ファイルの読み込みが完了したときに発生するイベントです。このイベントが発生したときも、読み込み先のムービークリップインスタンスが渡され、24行目で変数_mcに代入しています。

そして変数_mcの親のインスタンス名がpict_mcのときは、次の処理を行っています。

  • preloader_mcを非表示(27行目)
  • pict_mcを表示(28行目)
  • pict_mcのタイムラインを1フレームから再生(29行目)

これで拡大写真の読み込みが完了した同時に、1フレームから再生されることで、モーショントゥイーンでの効果により、フェードインで表示されます。

flaファイルの修正

actionレイヤーの1フレームを修正

mcloader.asの作成により、actionレイヤーの1フレームのコードも次のように修正します。

  • mcloader.asを読み込む一行を追加
  • actionレイヤーに記述していたMovieClipLoaderクラスと、イベントリスナー用オブジェクトのインスタンスの生成のコードは、mcloader.asにカットしてペースト

これでプリローダーが表示されるようになりました。