ローディングバーの作り方
ローディングバーの作り方
さて、ここまでで、「アニメーション」、「ムービクリップ」、「アクションスクリプト」の基礎は説明しましたので、それらを使って、ローディングバーを作ってみましょう。ブロードバンド化が進んだ今でも、ローディングバーは、Flashコンテンツを作る際は、まだまだ欠かせない存在です。
下準備：シーンの複製と土台作り
ここから再びサンプルサイトを使って説明していきます。
「ウィンドウ」→「デザインパネル」→「シーン」パネルを開きます。
上のように「シーン1」を選択して、右下の「＋」マークの左のボタンをクリックすると、シーンを複製できます。複製したら、それぞれのシーンに、任意の名前をつけましょう。ここでは、「ローディング」と「コンテンツ」と名前をつけることにしました。
（＊ここで、シーンを分けたのは、そのほうが編集作業がしやすいためです。「シーン」はこのように編集のしやすいようにどんどん活用しましょう。）
「+」ボタンをクリックして、新規シーンを作成しても良いのですが、ここでは、今までに作った、サンプルサイトで制作した、ヘッダとフッタのデーターを利用したかったので、シーンを複製しました。
複製して名前をつけたら、シーンパネルから「ローディング」を選択、ローディングシーンで、必要の無いパーツは削除しましょう。
各パーツは、選択して「delete」ボタンで削除できます。また、キーフレームは、右クリックから「キーフレームの削除」で削除できます。
さて、ローディングレイヤーに任意の長方形を描きましょう。長方形をステージに描いたら「F8」でムービークリップシンボル化します。
いよいよアクションスクリプトをつけていきましょう。
アクションスクリプトをつける
まずは、上のように書いてみましょう。
onClipEvent(load){}では、このムービークリップにつくられた変数「this.TotalData」にFlashコンテンツ自体のトータルの重さを代入しています。
getBytesTotal();は、ムービクリップ、または、Flash自体のトータルの重さを計測する関数です。「_parent」としているのは、アクションスクリプトをムービークリップにつけているからです。「ムービークリップとパス」の項でもやったように、相対パスで指定する場合、一つ上の階層に戻る場合は「_parent」を使用します。
this.LoadedData=_parent.getBytesLoaded();も同様に、変数LoadedDataに現在までに読み込まれているデーターの容量を代入しています。
アクションスクリプトでは、「=」は等しいという意味ではなく、「代入する」という意味になります。右辺を左辺に代入すると捉えると良いでしょう。
onClipEvent(enterFrame){}では、それらを出力パネルに表示させています。
慣れないうちは、こうやって一つ一つ「trace();」で出力するといいでしょう（途中で確認する）。そうすることで、全て書いてしまった後に、途中のスペルミスで悩むなんてこともなくなります。
うまく出力できたら、次のステップにみましょう。
さて、実験は成功したので、アクションスクリプトの続きを書いていきましょう。
上記2行は、上で説明した通りです。ただ、常にトータル容量と読み込まれた容量を計測したいので、onClipEvent(enterFrame){}の中に書きました。
その下の行は、読み込まれたパーセンンテージを計測しています。
「現在までに読み込まれた容量」÷「トータル容量」×100
でパーセンテージは計測できますが、Math.floorは整数化処理をする関数です。上記の式で求められる答えは、小数点を含むので、小数点以下を切り捨てているというわけです。
そして、最後に、「プログラミングの基礎（if文）」でやった、if文を使い、パーセントが100以上になったら「top（ラベル名）」に飛ばすという処理を行っています。ラベル名は、このように、Flash内のどのシーンにつけても、どこからでも、そのラベル名に飛ばすことができます。
this._xscale=this.Parcent;
は、青いローディングバーをパーセンテージと同期させ、アニメーションさせています。「_xscale」は、ムービークリップの幅を決めるプロパティです。これが、パーセンテージと同期することによって、擬似的にローディングバーが伸びているように見えます。
最後に、
_parent.par_txt=this.Percent;
で、ステージ上にある、ダイナミックテキストの領域「変数名：per_txt」に、パー線テジージを表示させています。
制作環境がブロードバンド環境で、回線が早すぎてローディングの画面を確認できない人がほとんではないでしょうか。そんな人のために、Flashには、各回線での動作をシミュレーションできる機能がついています。
「CTRL」+「RETURN」でファイルを書き出すか、パブリッシュプレビュー（Flash）をした後、「表示」→「ダウンロードのシミュレート」をクリックするしてみましょう。そうすると、あたかもナローバンド回線で見た時のような動作をシミュレーションする事ができます。
＊どの帯域の回線での動作をシミュレートするかは、「表示」→「ダウンロードの設定」で選ぶ事ができます。
ここまでのサンプルサイトを見る。
ここまでのサンプルFlashファイルをダウンロード。
（右クリック→ファイルをダウンロード:[top03.fla]270KB）
