ローディング05 - _widthでバーを伸ばす | FLASHプチ講座ブログ

FLASHプチ講座ブログ

FLASHのプチ講座ブログ。ActionScript3.0勉強中。

フラッシュでローディングバーアニメーションをつくろう!
も、もうすぐ完成です!

前前回、下のスクリプトで

bytesTotal = _root.getBytesTotal();
bytesLoaded = _root.getBytesLoaded();
parcent = bytesLoaded / bytesTotal * 100;
Math.floor(percent);

フラッシュがどれだけダウンロードされたかを
パーセント表示することができましたよね。

今回は、↑のスクリプトにちょこっと加えて、
ロードされたパーセンテージにあわせて
ローディングバーが伸びていく、というパートをつくりましょう。

---------------------------------------------------

前回説明したムービークリップのプロパティ _width を使って、
ロードされたパーセンテージにあわせて、バーの横の長さをスクリプトで伸ばして行く方法をやってみます。



1.メインタイムライン、1フレーム目に、
 横5px、縦10pxくらいの四角を描いて、ムービークリップにします。



2.(1)のムービークリップをダブルクリック、さっき描いた四角を選択して、
  プロパティのX: Y: のところをX:0 Y:0 にしてください。
  (四角を0,0に合わせておかないとバーが変な風に伸びます。)



3.メインタイムラインにもどって、(1)のムービークリップをクリック、
  プロパティのところで(1)のムービークリップにloadingBarと名前をつけてやります。



4.アクションパネルで、
  (”▼アクション-ムービークリップ”となっているか確認)
  ムービークリップに下のようなスクリプトを書きます。

onClipEvent(enterFrame){

  bytesTotal = _root.getBytesTotal();
  bytesLoaded = _root.getBytesLoaded();
  parcent = bytesLoaded / bytesTotal * 100;

  this._width = parcent;
}




5.最後に2フレームに画像かなにかちょっとサイズのあるものをいれてやり、
  2フレーム目を選択して、フレームアクションに

  stop();

  と記述。
  (これでムービープレビューしたときにムービーが2フレーム目でストップします。)



6.ムービープレビューしてください。すると、2フレーム目にいれた画像かなにかが
  表示されていると思います。ここで前回同様、表示→ストリーミングを表示
  選択すると...



7.バーが右にすーと伸びて、その後に、
  2フレーム目に入れた画像か何かが表示されるはずです。

----------------------------------------------------------

ロードされたパーセンテージにあわせてローディングバーが伸びていく!!
ができました!
でもこれではさびしいので、次回仕上げをやりましょう。


▲ローディング04 - プロパティ_widthの説明 へ戻る
▼ローディング06 - テキストボックスに数字で%表示 へ進む


Flash MX 2004 ウェブデザイン・ガイド
著者: 伊佐 恵子
ActionScriptがわからない!プログラミングってなに?!
という人にもわかりやすいようにすごく丁寧に説明しています。
サイトの中での具体的なフラッシュの活用方法も載っていますよ!


**************************************************
↓私の講座サイトです。興味のある人はぜひ見に来てください♪
フラッシュ講座