第8回　ActionScriptの応用：ローディング

Flash Playerは、あるフレームまでムービーの再生が進んだとき、必要なデータがダウンロードされていないと、ダウンロードが追いつくまで再生を中断してしまう。あらゆるユーザーの環境に対応するためには、ダウンロードがすべて終了してからムービーを開始するように、ローディングページを作成する必要がある。プログレスバーが伸びて、ダウンロードの状況が視覚的に確認できるローディングを作成してみよう。

Lesson5第4回の「メソッドを使ったアクション」で作成したサンプルにローディングを設定してみよう。まずは、flaファイルを開き、ムービープレビュー画面でユーザーのダウンロード環境をシミュレートする。

1．［制御］→［ムービープレビュー］を選択する。ムービープレビューウィンドウで［表示］→［ダウンロード設定］を選択し、ダウンロード速度を、56Kbpsに設定する【図1】。

制作するサイトのターゲットによって、ユーザー環境を想定し、一番遅いダウンロード速度を選択するとよい。

2．［表示］→［プロファイラ］を選択して、ダウンロードパフォーマンスのグラフを表示する。プロファイラの左側のプリロードを確認しよう。ここでは、「476fr(15.9s)」と表示されている。これは、ダウンロードが終わるまでに476フレーム分、時間に換算すると15.9秒かかるということを示している【図2】。

3．次に、プロファイラ右側のグラフを確認する。グラフのバーの長さはフレームのデータサイズを表している。下の赤い線を越えると、設定した環境ではフレームの再生にダウンロードが追いつかず、そのフレームが読み込まれるまでムービーの再生が止まってしまう【図3】。

4．［表示］→［ダウンロードのシミュレート］を選択して、ダウンロードをシミュレートしよう。赤い線を超えるフレームでムービーが停止し、ダウンロードが完了するまではうまく動作しないことがわかる【図4】。

ダウンロードしたデータのパーセンテージに合わせてプログレスバーが伸びるローディングを作成しよう。

1．「シーン1」のすべてのレイヤーの最初に2フレーム分のフレームを挿入する。「background」レイヤーはキーフレームを［フレーム1］に移動し、「btn」レイヤーの［フレーム1～2］には［フレーム3］と同じボタンシンボルを配置する。プロパティインスペクタで［インスタンスのビヘイビア：グラフィック］、［グラフィックのオプション：シングルフレーム］に変更し、ローディング中はボタン操作ができないようにしておく【図5】。

2．「loading」レイヤーを作成し、［フレーム1～2］にプログレスバーが100%の範囲となる［W：200］、［H：10］のグレーの四角形を描画したら、中央下に「loading...」の「...」の部分がアニメーションするムービークリップシンボル「loading」を配置する【図6】。

3．左上を基準に［W：100］、［H：10］の水色の矩形を描画したムービークリップシンボル「bar」を作成し、四角形の左端に配置する。インスタンス名を「bar_mc」に設定しよう【図7】。

4．「action」レイヤーの［フレーム1］を選択し、［アクション］パネルに、ダウンロードしたパーセンテージと、「bar_mc」の幅の比率を設定する【図8】。「getBytesLoaded」はムービークリップを読み込んだバイト数を返すメソッドで、「getBytesTotal」は、ムービークリップのデータサイズを返すメソッドだ。

（1）
percent = Math.floor( this.getBytesLoaded() / this.getBytesTotal() * 100 );
「this.getBytesLoaded()/this.getBytesTotal()*100」は「読み込んだバイト数÷読み込む全体のバイト数×100」となり、現在読み込まれたデータのパーセンテージを表す。「Math.floor()」は()内の数値の小数点以下を切り捨てるMathオブジェクトのメソッドなので、変数「percent」に、現在読み込まれたデータのパーセンテージの整数部が設定される。

（2）
bar_mc._xscale = percent * 2;
変数「percent」の「0～100%」の変化に合わせて、ムービークリップ「bar_mc」の幅「100px」を、「0～200%」に伸縮させる

5．「action」レイヤーの［フレーム2］にキーフレームを挿入して、［アクション］パネルに、読み込み中ならば［フレーム1］の処理を繰り返し、読み込み終了ならば次のフレームにジャンプして、コンテンツの再生を始める処理を、条件分岐を使って設定する【図9】。これで完成だ。［制御］→［ムービープレビュー］を選択し、［表示］→［ダウンロードのシミュレート］でプログレスバーを確認してみよう。

（1）
if ( percent < 100 ) {
this.gotoAndPlay( 1 );
}
変数「percent」の値が「100」より小さい数値（読み込み中）の場合、［フレーム1］に戻って再生する

（2）
else{
this.play();
}
変数「percent」の値が「100」の（読み込みが終了した）場合、次のフレームを再生する