ETERNITY DESIGN BLOG

[ Progression4 ] LoaderListで複数ファイルをロード

このエントリはProgression 4.0.1 Public Beta 1.1時点の内容です。

Progression 4で追加されたLoaderListクラス。
複数ファイルの読み込みをまとめて、ロード状況などを管理してくれる便利なクラスですが、その読み込む対象となるファイルのURLをXMLから取得するなどの場合で読み込む数も対象のファイルURLも固定でない場合、動的(?)にこれまた、Progression 4で追加されたLoadBitmapDataやLoadSWFを指定する必要があります。

これではまってしまったのですが、最終的にはできたので、ご紹介。
ちなみに目的に直行したい方は最後のコードみてください。
途中のは迷走しています。

まずは、はまったやり方。
LoaderListはこちらのサンプルにあるように以下のようなコードを記述します。

new LoaderList( {
		onStart:function():void {
			trace( "読み込み処理を開始します。" );
		},
		onProgress:function():void {
			sp.scaleX = this.percent / 100;
			trace( "  ", this.target.className, ":", Math.round( this.percent ), "%,  count", this.loaded, "/", this.total, ",  size", this.bytesLoaded, "/", this.bytesTotal );
		},
		onComplete:function():void {
			trace( "  ", this.target.className, ":", Math.round( this.percent ), "%,  count", this.loaded, "/", this.total, ",  size", this.bytesLoaded, "/", this.bytesTotal );
			trace( "読み込み処理を完了します。" );
		},
		onError:function():void {
			trace( "ok" );
		}
	},
	new LoaderList( null,
		new LoadSWF( new URLRequest( "data/example.swf" ), null, { group:"mydata" } ),
		new LoadBitmapData( new URLRequest( "data/example.png" ) )
	),
	new LoadSound( new URLRequest( "data/example.mp3" ), null, { group:"mydata" } ),
	new LoadURL( new URLRequest( "data/example.txt" ) )
)

(サンプルより該当箇所抜粋)

LoaderList(initObject:Object = null, … commands)
なので、コマンドを配列に入れておいて、渡せばいいかと直前にFuncで配列に格納するだけのfunctionを用意し、その後、LoaderListで使用するコードにしましたが、まったく反応なし。

new Func(setUrlArray),
new Trace(urlArray),  // たとえばURLが3つあると仮定すると、[{}, {}, {}]という出力になる。
new LoaderList( {
		onStart:function():void {
			trace( "読み込み処理を開始します。" );
		},
		onProgress:function():void {
			sp.scaleX = this.percent / 100;
			trace( "  ", this.target.className, ":", Math.round( this.percent ), "%,  count", this.loaded, "/", this.total, ",  size", this.bytesLoaded, "/", this.bytesTotal );
		},
		onComplete:function():void {
			trace( "  ", this.target.className, ":", Math.round( this.percent ), "%,  count", this.loaded, "/", this.total, ",  size", this.bytesLoaded, "/", this.bytesTotal );
			trace( "読み込み処理を完了します。" );
		},
		onError:function():void {
			trace( "ok" );
		}
	},
	urlArray
)

・・・省略・・・

private function setUrlArray() {
	// ここで配列にLoadBitmapData入れる
	for(var i:Number = 0; i < loadURL.length; i++) {}
		urlArray.push(new LoadBitmapData(new URLRequest("読み込むファイルのURL")));
	}
	trace(urlArray);  // この時点では必要数LoadBitmapDataが格納された配列が出力されます。
}

で、このコードでは読み込まないようなので、配列の中身を確認してみようとFuncのあとにTraceでurlArrayを覗いてみたら、setUrlArrayの時には配列に格納されていたLoadBitmapDataがTrace時にはなくなってる。
配列は読み込むファイル分確保されてるのに中にあるはずのインスタンスがない。
Commandの仕組みを理解してないのが原因だとは思うのですが、どのタイミングで消されているのか・・・
(そもそも配列をLoaderListで指定しちゃってる時点で中身がどうとか以前に間違ってるんですが、そこは無視してください・・・というか最初に読み飛ばした方がいいって書いた!)

とりあえず、原因はわからないけど、配列が空ではどうにもならないので、別の方法に。

以下の方法で実現できました。

// LoaderListを用意しておく
loaderCommand = new LoaderList({
		onStart:function():void {
			trace( "読み込み処理を開始します。" );
		},
		onProgress:function():void {
			trace( "  ", this.target.className, ":", Math.round( this.percent ), "%,  count", this.loaded, "/", this.total, ",  size", this.bytesLoaded, "/", this.bytesTotal );
		},
		onError:function():void {
			trace( "Error" );
		},
		onComplete: loadComplete
	}
)

addCommand(
	new Func(setUrlArray),
	loaderCommnad
)

・・・省略・・・

private function setUrlArray() {
	// ここで配列にURL入れる
	for(var i:Number = 0; i < loadURL.length; i++) {}
		loaderCommand.addCommand(new LoadBitmapData(new URLRequest("読み込むファイルのURL")));
	}
}

ABOUT ME

名古屋を中心に、フリーランスでホームページ制作してます。 デザイン・サイト制作・WordPress案件・Flash制作、JavaScript(jQuery)と幅広く対応可能です。 案件のご依頼・ご相談はCONTACTよりご連絡ください。

CATEGORIES

ARCHIVES

TAGS