フラッシュでローディングバーアニメーションをつくろう!
も、もうすぐ完成です!
前前回、下のスクリプトで
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がわからない!プログラミングってなに?!
という人にもわかりやすいようにすごく丁寧に説明しています。
サイトの中での具体的なフラッシュの活用方法も載っていますよ!
**************************************************
↓私の講座サイトです。興味のある人はぜひ見に来てください♪
フラッシュ講座