Loadingを作る。

2011/01/22  as3.0, チュートリアル

 

コンテンツが表示されるまでに時間がかかる場合があります。

 

きれいな写真とかのせると、けっこうな時間がかかります。

目安としては、swfファイルが200KB以上だったらと言った感じかと・・・。 (もちろんサーバーなどにもよります。)

で、下記のようにしてあげれば読み込んで、読み込みが終了したらaddChildします。

 

var _loader:Loader = new Loader();
var _info:LoaderInfo = _loader.contentLoaderInfo;

_info.addEventListener (ProgressEvent.PROGRESS,loadProgress);
function loadProgress(e:ProgressEvent):void{
	trace (e.bytesLoaded + " / " + e.bytesTotal);
	/*読み込み途中*/
}
_info.addEventListener (Event.COMPLETE,loadComplete);
function loadComplete(e:Event):void {
	_info.removeEventListener(ProgressEvent.PROGRESS,loadProgress);
	_info.removeEventListener(Event.COMPLETE,loadComplete);
	_info.removeEventListener(IOErrorEvent.IO_ERROR, loadError);
	/*読み込み完了*/
}
_info.addEventListener (IOErrorEvent.IO_ERROR,loadError);
function loadError(e:IOErrorEvent):void {
	_info.removeEventListener(ProgressEvent.PROGRESS,loadProgress);
	_info.removeEventListener(Event.COMPLETE,loadComplete);
	_info.removeEventListener(IOErrorEvent.IO_ERROR, loadError);
	/*エラー発生*/
}
_loader.load(new URLRequest("main.swf"));

 

で、作る時の問題としては、読み込むだけならいいのだけど、

 

読み込み完了時に出現アニメーションをつけたい

 

 

ローディングが終わってから、addChildなどをするだけでは「ぱっ」と出ておしまい。とかじゃなくて、ロゴが出現して、他のが出現してー。って欲しい訳です。。

 

 

ポイントがいくつかありますが。。

 

読み込みが完了するまで、動かさない。

 

読み込みの最中に動作してしまうと言う問題が起こると思います。

addchildした時には、既に動画の最初の1秒が過ぎていたりします。

先に読み込まれ始めてしまうタイミングっていうのは、とてもあいまいで、 表示の1秒前だったり、2秒前だったり。

回避策としては、2つあって、

 

1、addChildのイベントをmain.swf側で取得をする。

 

2、読み込みが完了後load.swf側から、main.swfの中のinitialize的な関数を呼び出す。

 

の二つがあります。

 

1に関しては、ADDED_TO_STAGEとイベントが発行されるので

main.swf側に

 

function main(){//コンストラクタ
stage.addEventListener(Event.ADDED_TO_STAGE,init);
}

function init(e:Event):void{
//動作を始めるようなスクリプト
}

 

と書くとaddChildをした時間を中心に動作します。

 

とても簡単なのですが、1点だけ問題があって、このADDED_TO_STAGEがflash player9.0.24(くらい?)からの メソッドになるので、9から対応させたい時にはNGの手法になります。

 

 

なので、その場合には2を使用します。

main.swf側に下記のようなファンクションを書きます。

 

public function initialize():void {
//動作を始めるようなスクリプト
}

 

この時に注意したいのが、load.swfからアクセスをするので、 private でなく public設定にしておく事。

privateにしておくと、クラス外部から、アクセスができなくなってしまいます。

 

これで、読み込みが完了した時に

function loadComplete(e:Event):void {
	_info.removeEventListener(ProgressEvent.PROGRESS,loadProgress);
	_info.removeEventListener(Event.COMPLETE,loadComplete);
	_info.removeEventListener(IOErrorEvent.IO_ERROR, loadError);
	/*読み込み完了*/
	var mainContent = _loader.content
	mainContent.initialize()
}

 

と書けば、読み込み完了と同時に動きが始まります。

そんな感じでローディングができます。

 

まとめ

ローディングは、 組み込んだ後からが本番です。 出現のモーションを つけましょう!