2/2 シンプルなローディングバーを作る [Flash] All About

Flash自体のファイル容量を取得して表示する

ローディングバーの仕組みは以下の形をとります。

1) Flash自体のファイル全体の容量を取得する
2) 現在ダウンロードした容量を取得し全体の容量と比較する
3) 2の比率に合わせてローディングバーの幅を変更する
4) 全てダウンロードしたら「start」フレームに移動する

この仕組みをActionScriptで表現していきます。

1.　配置されているムービークリップ「loading」に以下のActionScriptを記述します。

 onClipEvent(load){

	totalSize = _root.getBytesTotal();
	nowLoaded = _root.getBytesLoaded();


	if(totalSize == nowLoaded){
		gotoAndPlay("start");
	}else{
		_root.stop();
	}
}

onClipEvent(enterFrame){
	nowLoaded = _root.getBytesLoaded();
	
	if(totalSize == nowLoaded){
		gotoAndPlay("start");
	}else{
		barWidth = nowLoaded/totalSize*100;
		bar._xscale = barWidth;
	}
}

長いので少しずつ見ていきましょう。

上部の「onClipEvent(load){}」内に注目してください。

 totalSize = _root.getBytesTotal()
nowLoaded = _root.getBytesLoaded();


if(totalSize == nowLoaded){
		gotoAndPlay("start");
	}else{
		_root.stop();
	}

この部分は既にこのムービーを過去に表示していて、ローディング画面を表示する必要がない場合、本編にスキップする記述です。
1行目では、「_root.getBytesTotal()」を使用して、このムービー全体の容量を取得しています。
2行目では「_root.getBytesLoaded()」を使用して、現在までにダウンロードされた容量を取得しています。
以降のif文でこの二つが同じ場合、つまりダウンロードが完了している場合本編にスキップ、それ以外の場合はタイムラインを止め、以下の記述を実行するという構造です。

onClipEvent(enterFrame){
	nowLoaded = _root.getBytesLoaded();
	
	if(totalSize == nowLoaded){
		gotoAndPlay("start");
	}else{
		barWidth = nowLoaded/totalSize*100;
		bar._xscale = barWidth;
	}
}

次に「onClipEvent(enterFrame){}」内の記述について注目してください。
onClipEvent(enterFrame){}はタイムラインの進行に関係なく、1フレーム時間が経過する毎に{}内の処理を実行します。
2行目は先ほど同様現在のダウンロードの進行具合を取得しているので、enterFrameを用いて繰り返しダウンロードの進行を監視しています。

以降のif文は先ほど同様ですが、後半に注目してください。

barWidth = nowLoaded/totalSize*100;
bar._xscale = barWidth;

1行目で現在のダウンロードした容量を全体の容量を割り、100をかけています。これによってダウンロードの進行を％表示に変換しています。
2行目でムービークリップ「bar」の横幅を変更しています。「_xscale」というのはムービークリップの横幅(％)に対応しているプロパティです。

これで完成です。
完成したファイルをダウンロード

ローディングバーは良く目にするものです。ただ、元々Flashはダウンロードしながら再生する機能が備わっています。これを利用して長いムービーではダウンロード待ちを極力しないで済むような設計をすることが本来優先すべき課題です。

とは言え、どうしてもローディング待ちが発生するとき、面白くかっこいいローディングバーがあれば待ち時間もユーザに負担をかけませんね。見る人の立場に立って考えて、ローディングやファイルの容量というものを決めていってください。

【関連記事】
グラフィカルなローディングバーを作る