簡単AS3.0ローディンバー作り方

ActionScript3.0でローディング機能とローディングバーの作成方法と、簡単な作り方と解説や説明を入れて理解を深めてみました。

今回はFlash CS4ドキュメントで作成してみます。
1.ロードバーの配置

新規ファイルを作成して、タイムライン上のレイヤー1のフレーム1に、ローディングバーのイメージを作成します。

矩形ツールで作成しても、Illustratorなどで作成して読み込んでもよいのですが、基本的にはパスデータがよいでしょう。

今回は配置したローディングバーのイメージは、横幅100px 高さ10pxとします。
配置ができたらF8キーを押し、シェイプグラフィックでムービークリップを作成し、自由変形ツールでMCの中心点を左端に指定します。

これは、左端を起点としてバーが伸びるようにするためです。インスタンス名は『lbar』とします。

横幅はこのあとのActionScriptのソース部分の、コンテンツ総サイズとロード完了サイズにロードバーの長さをかける記述があるのですが、わかりやすくするために100pxとしています。

これは実際にどのようなサイズでも問題ありません。
2.アクションスクリプトの記述

次に、ローディングバーを配置したレイヤーと同じ階層に新規のレイヤーを追加します。

追加したレイヤーの1フレーム目をクリックしてアクションスクリプトを記述していきます。
アクションウィンドウが表示されていない場合は、F9キーを押して表示させます。

アクションウィンドウには以下のようなローディング機能とローディングバーの長さを伸ばす記述があります。
今回は、1ラインずつ記述内容を理解してみます。
stop(); //1フレーム目でストップをさせ以下の記述を実行

var info:LoaderInfo = root.loaderInfo; //LoaderInfoクラスを変数infoとして新規で作成。LoaderInfoクラスというのは、SWF ファイルやイメージファイルに関する情報を取得する関数です

root.addEventListener(Event.ENTER_FRAME,EnterFrameFunc); //イベントリスナーを追加して、Event.ENTER_FRAMEで継続的に繰り返し関数EnterFrameFuncを実行します

function EnterFrameFunc(event){ //イベント実行関数EnterFrameFuncで引数はeventとします。

this.lbar.width = Math.floor(info.bytesLoaded/info.bytesTotal*100); //数学関数Mathをfloorメソッドで繰 り下げ総ダウンロードに対しての完了済みサイズに100をかけてダウンロードパーセンテージをlbarの長さに代入しています。
floorメソッドは繰り下げて整数値を返しています

if(info.bytesLoaded == info.bytesTotal){ //ロード完了サイズとコンテンツ総サイズが同じになった時点で、下のremoveEventListenerでイベントリスナーを取り除き、ロードバー の長さへの代入関数が実行されないようにします

root.removeEventListener(Event.ENTER_FRAME,EnterFrameFunc);

this.gotoAndPlay(2); //レイヤーの2フレームへ移動させます。ここがロード完了後の処理で、2フレームのムービーを実行することになります。

}

}

掲載情報につきましては、当サイトが独自に調査、検証および収集した情報です。

情報の妥当性や確実性を一切保証するものでなく、情報や内容が訂正や修正、変更されている場合があります。 よって、当サイトの利用により生じたいかなる損害等についても運営側にて一切の責任を負いません。

掲載情報の修正・変更等をご希望の場合はお知らせください。

コメントを残す