プリローダー

「プリローダー」とは、データを読み込んでいるときに、閲覧者にストレスを与えないための仕掛けのことです。
インターネットでFlashを閲覧したとき、Flashの再生が開始されるのはFlashのデータが完全に読み込まれてからなので、その読み込みが終わるまでの間表示しておくアニメーション等のことです。
ここではプリローダーの設定・作成の方法を解説します。

ParaFla! でFlashにプリローダーを設定するには、まず「プロジェクトのプロパティ」を開きます。
[プロジェクトのプロパティ画像]
「詳細設定」の部分に、「ID：9999の画像ファイルをロード画面にする」という項目があるので、ここにチェックします。
すると、ファイルリストに登録してある、 ID が「9999」のアイテムをプリローダーとして表示することができます。

プリローダーには、画像ファイル、テキストファイル、スプライトを使用することができます。
プリローダーにしたいアイテムのプロパティを開き、一番上の「 ID 」という項目の数字を「 9999 」に書き換えてください。
[ファイルのプロパティ画像]
これで、そのファイルが読み込み画面として表示されるようになったはずです。
Flashを再生した時には、まずプリローダーが表示され、読み込みが完了すると、メインのイベントに進むようになります。

ID を「 9999 」に書き換えたアイテムは、プリローダーとして自動的に表示されるので、「イベントに追加」する必要はありません。
実際にプリローダーとして動く時には、そのアイテムは「固定画面」の「深度：0」として配置されるので、
イベントリストの一番上で「画像を消去：0」をして、読み込みが終わったらプリローダーを消すようにしましょう。
（「画像を消去：ALL」では消せないことがあります）。

プリローダーに設定したアイテムは表示する位置などの設定を行うことができません。
画像やテキストをプリローダーに設定した場合、座標は一番左上（0, 0）に合わせて表示されます。
スプライトを設定した場合も同様ですが、スプライトの中には他の画像やテキストを自由に配置することができます。
最新バージョンの ParaFla! では、 ID:9999 のスプライトの中に、更に他のスプライトを入れることも可能になりました。
スプライトをプリローダーに設定することでプリローダーをかなり自由に作ることができますが、プリローダーを複雑にしすぎて「プリローダーのプリローダーが必要」なんてことにならないように注意してください。

Suzuka でFlashにプリローダーを設定する場合、プリローダーにしたいアイテムの「開始フレーム」を「 1 」にするだけでよいようです。

プリローダーはファイルのダウンロード中に表示されるものなので、ローカルに保存してある場合は動作しません。インターネットにアップロードしてから動作のチェックをしてください。
また、プリローダーが有効となるのは swf を html に埋め込んで表示した場合のみで、 swf を直接表示した時は動作しないので注意してください（プリローダーが動作するブラウザもあります）。
プリローダーを設定しても swf のファイルサイズが小さい場合は読み込みがすぐに終わってしまうため、プリローダーが一瞬しか表示されない場合もあります。

ActionScript を使用すると、読み込みの進捗状況を表示する事ができます。

getBytesLoaded()	現在までに読み込まれたバイト数
getBytesTotal()	ファイル全体のバイト数

読み込みの進捗状況を取得するには、この2つを使用します。
簡単なものであれば、上記を2つを変数に代入してテキストで表示するだけでもプリローダーとしては十分だと思います。
実際に上記の2つを使ってバイト数とパーセンテージを表示するプリローダーのサンプルを作ってみます。

ParaFla! では、「プロジェクトのプロパティ」でプリローダーの設定をしたら ID:9999 のスプライトとテキストを作成します。
テキストの「ファイルのプロパティ」を開き、変数名に「hyouji」と入力したら、
スプライトの中にテキストを固定画面で配置、その下に「アクションを挿入」⇒「スクリプト」でフレームアクションを作ります。

Suzuka では、スプライトとテキストを作成し「テキストのプロパティ」の「変数名」に「hyouji」と入力します。
1 フレーム目にスプライトを配置してそのスプライトの中にテキストを配置し、次のレイヤーに「アクションレイヤー」を挿入します。

次に、作成したフレームアクションに以下を書き込みます。


				onEnterFrame = function(){

				        b_total = _root.getBytesTotal();

				        b_loaded = _root.getBytesLoaded();

				        percent = Math.round(b_loaded / b_total * 100);

				        hyouji = b_loaded + "Bytes/" + b_total + "Bytes (" + percent + "%)";

				};

これで、テキストに現在のロード状況とパーセントが表示されます。

また、取得したロード状況から絵を描画することで以下のようなメーターつきのプリローダーも作ることができます。

ParaFla! では、まず「プロジェクトのプロパティ」を開いて、Flashの横幅を「 160 」、高さを「 120 」にして、プリローダーのチェックボックスをチェックします。
スプライトを新規作成して ID を「 9999 」にし、スプライトの中に「アクションを挿入」⇒「スプライト」でフレームアクションを作成します。

Suzuka では、まず「プロジェクトのプロパティ」を開いて、Flashの横幅を「 160 」、高さを「 120 」にします。スプライトを新規作成してレイヤーに追加、そのスプライトの「開始フレーム」が 1 になっているのを確認して、スプライトの中で「アクションレイヤーを挿入」でフレームアクションを作成します。

次に、フレームアクションに以下を記述します。


				b_total = _root.getBytesTotal();    //総ファイルサイズの取得

				b_loaded = 0;                       //変数の初期化

				clear();

				 

				onEnterFrame = function(){

				        //読み込んだバイト数を変数に代入

				        b_loaded = _root.getBytesLoaded();

				 

				        //バイト計算

				        percent = Math.round(b_loaded / b_total * 100);

				        pl = Math.round(b_loaded / 1024) + "KB/" + Math.round(b_total / 1024) + "KB (" + percent + "%)";

				 

				        //バーの外枠の描画

				        clear();

				        lineStyle(1, 0x000000, 100);

				        beginFill(0xCCCCFF, 100);

				                moveTo(Stage.width / 6 , Stage.height / 2);

				                lineTo(Stage.width - Stage.width / 6 , Stage.height / 2);

				                lineTo(Stage.width - Stage.width / 6 , Stage.height - Stage.height / 4);

				                lineTo(Stage.width / 6 , Stage.height - Stage.height / 4);

				        endFill();

				 

				        //メーターの描画

				        lineStyle(1, 0x000000, 100);

				        beginFill(0x3300FF, 100);

				                moveTo(Stage.width / 6 + 2 , Stage.height / 2 + 2);

				                lineTo(Stage.width / 6 + (Stage.width / 6 * 4 * (b_loaded / b_total)) - 2 , Stage.height / 2 + 2);

				                lineTo(Stage.width / 6 + (Stage.width / 6 * 4 * (b_loaded / b_total)) - 2 , Stage.height - Stage.height / 4 - 2);

				                lineTo(Stage.width / 6 + 2 , Stage.height - Stage.height / 4 - 2);

				        endFill();

				 

				        //テキストを表示するための設定

				        createTextField("pr", 0 , 0 , Stage.height / 5 , Stage.width , 20 );

				                tfm = new TextFormat();

				                tfm.size = 15;

				                tfm.align = "center";

				                tfm.color = 0x000000;

				                tfm.italic = true;

				                tfm.bold = true;

				        pr.text = pl;

				        pr.setTextFormat(tfm);

				};

処理は上から順に、「バイト数を変数に代入」、「バイト計算」、「バーの外枠の描画」、「メーターの描画」、「テキストを表示するための設定」となっています。
メーターの描画についてはFlashゲーム講座＆ASサンプル集【Flash の描画について】が参考になります。

メーター付きサンプルプリローダーソースのダウンロード

SWFファイルを圧縮した場合、実際のSWFファイルサイズは小さくなりますが、「getBytesTotal()」は圧縮される前のファイルサイズを返すので、ファイルサイズの値に違いが生じます。
そのようなときにローダーがうまく動かない場合は「getBytesTotal()」を使用せず、おおよその圧縮後のファイルサイズを直接数値で記述しておきます。
読み込み状況の取得全般についてはFlashゲーム講座＆ASサンプル集【読み込み状況の取得について】も参考になります。

トップページに戻る