2008/12/30 (Tue) ⑯ プログレスバー

NOW LOADING・・・・・という画面が出てくるとロード中だということが分かりユーザーは安心するでしょう。

この画面を作るにはどのくらいロードしたのかを知り、それを数字やバーなどを使って表現する方法があります。

ローディング画面はフレーム1で表示されるようにする。

ムービークリップではなくアクションスクリプトで動かすのでフレームは1フレームのみです。
フレーム1で実行されるように、stop()を記述しておきます。

ロードが終わると同時にgotoAndPlay()が実行されるようにします。


どのぐらいロードされたかを格納する変数の生成

どれぐらいの容量がロードされたのかを変数名loadedとして生成します。
変数を生成するにはvarを使います。

• var loaded:int = Math.round(loaderInfo.bytesLoaded / loaderInfo.bytesTotal * 100);

という風になります。
・左辺
変数名loadedを宣言します。intというのは変数が整数の形(int型)ということを示します。

・右辺
Mathという演算を扱うクラスを用いてカッコ内の引数を計算した値を出しています。
このときはMathで演算を扱うと宣言し、ピリオドで区切りを入れて、round()メソッドにより引数を四捨五入しています。
カッコの中の引数は計算式です。
この時は、ムービークリップ（DisplayObject)というクラスの中にある、オブジェクトが属しているファイルのロード状況を参照するプロパティのloaderInfoクラスで定義された、loaderInfoクラスのプロパティであるbytesTotalやbytesLoadedというプロパティで値を呼び出しています。

loaderInfo.bytesLoaded　はロード済みのバイト数を参照します。
loaderInfo.bytesTotal　は全容量を参照します。

loaderInfo.bytesLoaded / loaderInfo.bytesTotal * 100
つまりこれで読み込んだバイト数のパーセントが分かるわけです。
ちなみにこのときもこのムービークリップを示すthisが省略されています。




テキストフィールドに値を表示する。

テキストフィールドのインスタンスを作っておき、そこにアクションスクリプトで求めた数値や文を表示したいというときは。前にもやった代入というのを使います。前にもやったというかしょっちゅうやっていますね。だから、とても簡単です。難しく考えることはありません。

インスタンスにははじめから沢山のプロパティを持っています。高さ、幅、縮尺などがあります。テキストもそのプロパティの中の一つなのでテキストフィールドにテキストを表示したい場合はテキストフィールドのインスタンスのtextというプロパティ値に表示したいテキストを　=　を使って代入すればいいのです。

今の場合表示したいテキストはどのぐらいのバイト数がロードされているかです。
表示するためのテキストフィールドのインスタンス名をloadedPercentBOXという名前にします。

•  loadedPercentBOX.text = loaded + "%";

今回は何パーセントかを表示するので％も一緒に表示するように定義します。

• loadedPercentBOXのtextというプロパティに変数loadedに％を足した値を代入します。という意味です。

関数を定義する

上記の2つのステートメントでイベントリスナーに呼び出される読み込まれたパーセント数を表示する関数を作ります。

• function loadingPercentText(event:Event):void{
• var loaded:int = Math.round(loaderInfo.bytesLoaded / loaderInfo.bytesTotal*100);
• loadedPercentBOX.text = loaded +"%";
• }

こんな感じです。

関数の名前はloadingPercentTextとしました。少々長いですがすぐに分かるのが一番良いです。

イベントリスナーの登録
次にイベントリスナーを登録します。

今回は今までと違いクリックなどで呼び出すイベントではありません。よって1フレーム分の時間ごとに自動的にイベントを発生してくれるENTER_FRAMEというのを使います。

ENTER_FRAMEはフレームに進入するイベントでフレームレートによって発生する間隔が決定されます。
フレームレートが20fpsならば1秒間に20回イベントリスナーが呼び出されます。
正確にはイベントを制御するEventクラスの中にある定数のなかで「フレームに進入」するイベントのENTER_FRAMEです。
記述するときはピリオドで区切って　Event.ENTER_FRAME　と記述します。

• this.addEventListener(Event.ENTER_FRAME,LoadingPercentText);

となります。イベントの引き金となるのはフレームが変わることなのでインスタンス名はメインタイムラインを示すthisです。省略してもかまいません。



100％になったらイベントを停止し次の場面へ移動するための関数

100％読み込んだらロード画面を停止してメインのコンテンツに移動するようにします。
100%になったら上記のイベントリスナーを停止し次のシーンへ行くように if 文を使用して分岐を作ります。

• if (loaded >= 100) {
• romoveEventListener(Event.ENTER_FRAME,loadingPercentText);
• gotoAndPlay(2);
• }

条件でloadedの値が100％になったら。
removeEventListener()で上記のaddEventListener()を削除し。gotoAndPlay()で2フレーム目に移動します。





これらを組み合わせると。

• this.stop();
   
• function loadingPercentText(event:Event):void{
• var loaded:int = Math.round(loaderInfo.bytesLoaded / loaderInfo.bytesTotal*100);
• loadedPercentBOX.text = loaded + "%";
   
• if (loaded =< 100){
• removeEventListener(Event.ENTER_FRAME,loadingPercentText);
• gotoAndPlay(2);
• }
• }
   
• this.addEventListener(Event.ENTER_FRAME,loadingPercentText);