Flashプリローダーを呼び出されるFlashメディアに配置する


1、前置き
BLOGの方でも書きましたが、コチラにもUP。

(この解説作ってみて思いましたが、自分の説明ベタに愕然。参考程度以下で読んでください。ごめんなさい。)




さて、正直言って個人が大きな映像を無料のサーバーを使って配信する事自体、色々大変ですが、
それでもやってみたいと思う私のような考えの人に読んでもらえたらコレ幸いですw

そもそもプリローダーって何じゃらほい??って人のために

プリローダーとは
プリローダーはムービーのデータ転送が間に合わず、アニメーションが途中で間断されるのを防ぐために設ける仕掛けの一つです。最初に必要なデータをロード することによって、途中でアニメーションが止まることなくスムーズに再生することができます。また、ユーザーにストレスを感じさせないために、現在どれく らいロードしているのか、グラフ表示、パーセント表示を用い、待ち時間を明示するのが一般的です。

だそうですw
簡単に言うと読み込みしている時に「Loading...」とか表示されている物を見たことがある人はソレだと思ってください。

私はActionScriptの天才と呼ばれる人たちとは違い凡人以下なので、もしかしたら、もっと簡単で、もっと合理的な方法があるかもしれませんので悪しからず。




2、解説

このチュートリアルで解説するプリローダーはあくまで外部メディアを呼び出しする時に利用する事を前提に解説してます。
つまり、呼び出されるメディアにつけるプリローダーです。呼び出す側のFlash(例えばFlashムービープレーヤー)に付ける物ではありません。 大元のFlashとは別に映像SWFファイルを用意し、大元のファイルで再生ボタンを押せばプリローダーを経て再生される。っていうのを作りたい人用です。


新規の状態から説明すると、まず、ローダーを付けたい映像をタイムラインに配置。
映像に関しては以前「QuickTimeをFlashで利用する」 で作ったQuickTimeムービーを使ってみました。(一応外部メディアを利用するという事で)。Flashで読み込ませるときは「Macromedia Flashドキュメントにビデオを埋め込む」を選んでみました。

素材に関しては何でもかまいません。とりあえずFlash内で作った簡単なシェイプムービーでも動作するはずです。



ちなみに↑の図では3フレーム目から配置しているように見えますが、実は映像自体は4フレーム目から配置しています。3フレーム目にはダミーの静止画を置いてます。1,2フレームめを使わないのは1フレーム目と2フレーム目にプリローダーを配置する為です。

で、さっそくプリローダーをば。
ちょっとココではプリローダーの作り方は省きます。簡単なのでまた今度解説します。
(簡単に言うと一般的なのはバーが延びていくムービーを作ればいいだけの話。モーショントゥイーンでサクサクっと作れます。)

1フレーム目にはプリローダーをMC化したものと、アクションスクリプトを書くための適当なMCさえあればできます。
数値とか表示したい方は、それ用のダイナミックテキストと解説用静止テキストがあればOK

アクションスクリプト記述用の適当なMC


プリローダー


変数用ダイナミックテキスト


プリローダー用、グラフィック、静止テキストなど


Flash全体の1フレーム目

とりあえず、上記のように配置。プリローダーをMC化したのは1フレームで収める為です。応用は好きにしてくださいw




3、アクションスクリプト
2、で解説したアクションスクリプト用MCに書くアクションスクリプトを今回用に作りました。




1〜2行目

onClipEvent (load) {
_root.映像が乗るステージ.stop();


とりあえず1フレ目で止めといて。



3行目


まず必要なのは呼び出されるメディアのファイルサイズを取得する事。
(このスクリプトが載るメディアのサイズです。)
コレはベタに。

_root.映像が乗るステージ.変数(上記ではload0) = _root.映像が乗るステージ.getBytesTotal();}




5行目

数値をGETする為にもう一つ「onClipEvent」を書きます。
onClipEvent (enterFrame) {

(ちなみに:上記の変数は分かりやすく 「load0」「load1」「load2」 と、していますが、好きな名前に変えてください。)

6行目


で、読み込んだ分の容量をココで取得。

_root.映像が乗るステージ.変数(上記ではload1) = _root.映像が乗るステージ.getBytesLoaded();



7行目

ここでは読み込む分の残りをGET

_root.映像が乗るステージ.変数(上記ではload2) = _root.映像が乗るステージ.getBytesTotal()-_root.映像が乗るステージ.getBytesLoaded();



8行目

今回の場合、タイムラインの4フレ目から映像を配置しているので

if (100 == Math.floor(_root.映像が乗るステージ.getBytesLoaded()/_root.映像が乗るステージ.getBytesTotal()*100)) {
_root.映像が乗るステージ.gotoAndPlay(4);}
}


ここまででとりあえず半分終了。



あとはMC化したプリローダーにもアクションスクリプトを書いてやります。

onClipEvent (enterFrame) {
this.gotoAndStop(Math.floor(_root.映像が乗るステージ.getBytesLoaded()/_root.映像が乗るステージ.getBytesTotal()*100));
}


最後に。タイムラインの最後のフレームに
gotoAndPlay(3);

を書いてやります。この辺の応用でループさせる事が出来たり、3フレーム目に静止画を置いて、「stop();」をかけておくと、見せたい画像で止まらせる事もできます。



ここまできたら動いているはずですが・・・あっそうそう。ちなみに解説の始めにも書きましたが、外部メディア側に付ける物なので、この状態でプレビューしても機能しません。あくまで大元から呼び出した時のみ機能するプリローダーです。ためしに大元Flashと呼び出されるメディア(Flash)をUPしてみて確認してみてください。(ローカルでもチェックできますが、当然読み込み時間はなくローダーは動きません)

まぁ一般的なプリローダーの応用ですから、ちょっと変更すれば色々できます。





補足説明
それでもうまく呼び出されない!っていう人は階層をチェックしてみてください。大元のFlashと呼び出されるFlashを同じ階層にUPすればうまくいく事があります。

あと、3フレーム目にダミーの静止画を置いた意味をここに書いておくと、大元である呼び出す側の状態は人それぞれだと思います。物によってはアクションレイヤーの3フレーム目に「 stop(); 」を入れると動き出したりします。





とりあえずこんな感じで私的には問題なく動作していますが、間違いがあったら指摘よろしくお願いします。
いやでもこういう物の解説って難しい・・・flaファイル公開した方が早いような気がしてきました・・・
チュートリアルTOP