ActionScript3.0でローディング機能とローディングバーの作成方法と、簡単な作り方と解説や説明を入れて理解を深めてみました。
今回はFlash CS4ドキュメントで作成してみます。
1.ロードバーの配置
新規ファイルを作成して、タイムライン上のレイヤー1のフレーム1に、ローディングバーのイメージを作成します。
矩形ツールで作成しても、Illustratorなどで作成して読み込んでもよいのですが、基本的にはパスデータがよいでしょう。
今回は配置したローディングバーのイメージは、横幅100px 高さ10pxとします。
配置ができたらF8キーを押し、シェイプグラフィックでムービークリップを作成し、自由変形ツールでMCの中心点を左端に指定します。
これは、左端を起点としてバーが伸びるようにするためです。インスタンス名は『lbar』とします。
横幅はこのあとのActionScriptのソース部分の、コンテンツ総サイズとロード完了サイズにロードバーの長さをかける記述があるのですが、わかりやすくするために100pxとしています。
これは実際にどのようなサイズでも問題ありません。
2.アクションスクリプトの記述
次に、ローディングバーを配置したレイヤーと同じ階層に新規のレイヤーを追加します。
追加したレイヤーの1フレーム目をクリックしてアクションスクリプトを記述していきます。
アクションウィンドウが表示されていない場合は、F9キーを押して表示させます。
アクションウィンドウには以下のようなローディング機能とローディングバーの長さを伸ばす記述があります。
今回は、1ラインずつ記述内容を理解してみます。
stop(); //1フレーム目でストップをさせ以下の記述を実行
var info:LoaderInfo = root.loaderInfo; //LoaderInfoクラスを変数infoとして新規で作成。LoaderInfoクラスというのは、SWF ファイルやイメージファイルに関する情報を取得する関数です
root.addEventListener(Event.ENTER_FRAME,EnterFrameFunc); //イベントリスナーを追加して、Event.ENTER_FRAMEで継続的に繰り返し関数EnterFrameFuncを実行します
function EnterFrameFunc(event){ //イベント実行関数EnterFrameFuncで引数はeventとします。
this.lbar.width = Math.floor(info.bytesLoaded/info.bytesTotal*100); //数学関数Mathをfloorメソッドで繰 り下げ総ダウンロードに対しての完了済みサイズに100をかけてダウンロードパーセンテージをlbarの長さに代入しています。
floorメソッドは繰り下げて整数値を返しています
if(info.bytesLoaded == info.bytesTotal){ //ロード完了サイズとコンテンツ総サイズが同じになった時点で、下のremoveEventListenerでイベントリスナーを取り除き、ロードバー の長さへの代入関数が実行されないようにします
root.removeEventListener(Event.ENTER_FRAME,EnterFrameFunc);
this.gotoAndPlay(2); //レイヤーの2フレームへ移動させます。ここがロード完了後の処理で、2フレームのムービーを実行することになります。
}
}