プリローダーの作成
これでムービーの動きの部分は完成です。最後にプリローダーを作成します。プリローダーは次の役割を持っています。
プリローダーの役割
- 各パーツの読み込みが完了していない状態で、フレームが再生されるのを防ぐ
- ユーザーに現状の読み込み状況を伝える
各パーツの読み込みが完了していない状態で、フレームが再生されると、一部のパーツのみが表示されたりと、制作者の意図した通りに表示されない可能性があります。そのために全てのパーツの読み込みが完了した時点で、フレームが再生されるようにします。
また読み込みに時間がかかる場合、どの程度読み込みが完了しているのかが分からないと、ユーザーもストレスになります。そのため現状の読み込み状況を伝えるのもプリローダーの役割です。
２種類のプリローダーの作成方法
プリローダーを作成する場合、flaファイルの構造によって、ActionScriptの記述方法も変わります。
- flaファイル内に全ての素材を埋め込んでパブリッシュする場合
- 素材を外部から読み込む場合
現時点では1の構造になりますので、1の場合のプリローダーの作成方法について解説します。2の場合の作成方法については、後の章で解説します。
プリローダーの仕組み
プリローダー(以下preloader_mc)は、メインタイムラインのpreloaderフレームに配置されています。現時点では、パブリッシュ時に表示されないようにガイドにしているので、ガイドを解除して通常のレイヤーに戻します。
preloader_mcの構造
- プリローダーのバー(bar_mc)
- 読み込み状況を表示するダイナミックテキスト
preloader_mcの中には、プリローダーのバー(以下bar_mc)と、初期値で100を表示している読み込み状況を表示するためのダイナミックテキストが配置されています。
preloader_mcの処理
preloader_mcには、次のようなを処理をenterFrameによるループ処理で行うように記述します。
- 現在の読込み済みバイト数を取得
- 合計のバイト数を取得
- 現在の読込み率を表示
- 現在の読込み状況をバーで表示
- 読込みが完了したら"init"フレームへ移動
フレームの再生を停止
まずはフレームの再生を停止させるため、preloaderフレームにstopメソッドを記述してフレームの再生を停止します。
そしてpreloader_mcに次のコードを記述します。
preloader_mcに記述
現在の読込み状況を取得
現在の読込み状況(%)を計算する式は次のようになります。
現在の読込みバイト数 / 全バイト数 * 100
ムービークリップには、現在の読込まれたバイト数と、全バイト数を取得する2つのメソッドが用意されています。
ムービークリップの現在の読込みバイト数の取得
ムービークリップ.getBytesLoaded()
ムービークリップの全バイト数の取得
ムービークリップ.getBytesTotal()
今回はswf全体の読込み状況を取得するため、_rootのそれぞれの値を取得しています。
さらに整数にするためにMath.floorメソッドの引数として、読込み率を計算する式を入れています。Math.floorは小数第一位を切り捨てるメソッドです。切り上げる用のMath.ceil、四捨五入する用のMath.roundメソッドも用意されています。
ダイナミックテキストの利用
そして現在の読み込み状況を表示するためのにテキストボックスを用意します。この場合は必ずダイナミックテキストで作成します。
ダイナミックテキストとは、ActionScriptから内容を変更することが可能なテキストボックスです。今回のように、状況によって表示する内容を変更させたいようなテキストボックスの場合は、静止テキストではなく必ずダイナミックテキストを使います。
さらにこのテキストボックスの値を変更できるように、プロパティでインスタンス名をつけます。ここでは"num"という名前にしています。これでActionScriptから、このダイナミックテキストの値を取得することも、値を変更することも可能になります。
テキストボックスの種類には、静止・ダイナミック・テキスト入力の３種類があります。テキスト入力もダイナミックと同様にActionScriptで内容を書き換えることができるほか、ユーザーがブラウザ上で直接内容を書き換えることもできます。主にフォームなどに利用されます。
ダイナミックテキストのプロパティの設定
- テキストの種類にダイナミックテキストを選択し、インスタンス名にnumと指定
- デバイスフォントを指定
ダイナミックテキストの内容の変更
preloader_mcに記述したActionScriptの2行目では、num.textに現在の読込み率を代入しています。このnumはダイナミックテキストのインスタンス名で、.textは値を意味するプロパティです。num.textに値を代入するということは、ダイナミックテキストの表示の値を変更するという意味になります。
今回は、読み込み率を計算して、その結果をtext.numに代入することで、現在の読み込み状況を動的に変更するようにしています。
_xsaleプロパティによるサイズの変更
_xsaleプロパティとは
さらに読込み率に比例して、bar_mcの横幅が変化するように_xscaleプロパティに読込み率を代入しています。_xscaleプロパティは横幅の率を意味し、100を代入すると元の大きさになります。50を代入すると半分の大きさ、200を代入すると倍の大きさになります。今回は指定しませんが、縦幅を変更する場合は、_yscaleプロパティを使います。
読み込み完了時の処理
そしてnum.textの値が、100になった場合、つまりが読み込み完了した場合は、メインタイムラインを"init"フレームに移動させています。preloader_mcは、"init"フレーム以降には配置されていないので、この時点で表示されなくなる仕組みです。
現時点のプレビューです。(※プリローダーの動作は確認できないと思います。)
ダイナミックテキストを指定した場合、通常はデバイスフォントが適用されます。つまりswfファイル埋め込まれたフォントではなく、ユーザー側のフォントを使って表示されます。そのためフォント名を指定してもユーザー側に入っているかどうかは分からないため、アンダーバーで始まるデバイスフォントを指定しています。
