littlepad blog

LoaderList クラスを使った画像一括読み込み

Progression4 で追加された LoaderList クラスが素晴らしすぎます!
一括で画像をプリロードする場合、今までは GroupLoader をよく利用していましたが、
LoaderList を使うと、JPG などの他に SWF、SOUND などもまとめて読み込むことができます。

以下、外部 XML に登録された外部画像を読み込むサンプルです。

読み込む XML はこんな感じ。

<?xml version="1.0" encoding="utf-8" ?>
<contents>
<content>
<title>画像1</title>
<image>images/content1.jpg</image>
</content>
<content>
<title>画像2</title>
<image>images/content2.jpg</image>
</content>
<content>
<title>画像3</title>
<image>images/content3.jpg</image>
</content>
</contents>

今回は IndexScene の atSceneLoad 内でXMLを読み込んでいます。
ここでは XML を元にシーンを作成し、読み込んだ画像も initObject として渡しています。

override protected function atSceneLoad():void {
    addCommand(
        // XML 読み込み
        new LoadURL( new URLRequest("contents.xml") ),
        function():void {
            var xml:XML = new XML(this.latestData);
            
            // 複数ファイル読み込みする LoaderList
            var loaderList:LoaderList = new LoaderList();
            
            // XML のデータから LoaderList を作成
            for (var i:uint = 0; i < _sceneTotal; i++) {
                loaderList.addCommand(
                    new LoadBitmapData( new URLRequest(xml.content[i].image), 
                    {
                        cacheAsResource: true, 
                        context: new LoaderContext(true),
                        resGroup:"image", 
                        resId:"image" + i
                    })
                );
            }
            
            // 読み込み開始
            loaderList.onStart = function():void {
                trace( "読み込み開始" );
            }
            // 読み込み中
            loaderList.onProgress = function():void {
                trace( this.percent,"%" );
            }
            // 読み込み完了
            loaderList.onComplete = function():void{
                trace( "読み込み終了" );
                
                for ( var j:uint = 0; j < xml.children().length(); j++ ) {
                    // content の数だけシーン作成
                    var imageBmp:Bitmap = new Bitmap(getResourceById("image" + j).data);
                    
                    var content:ContentScene = new ContentScene( "content" + j,
                    { 
                        title: xml.content[j].title,
                        image: imageBmp     // 読み込み画像(Bitmap)
                    });
                    
                    addScene(content);
                }
                
                // 最初のシーンへ移動
                var com:Goto = new Goto( new SceneId("/index/content0") );
                com.execute();
            };
            
            // 読み込み開始
            loaderList.execute();
        }
    );
}

読み込んだ画像は getResourceById を使って id でアクセス出来ます。

ちなみにSWF を読み込むときはこんな感じで。

var lo:Loader = new Loader();
loaderList.addCommand(
    new LoadSWF( new URLRequest(xml.content[i].swf), lo, {
        cacheAsResource:true, 
        context:new LoaderContext(false),
        resGroup:"swf", 
        resId:"swf" + i
    } )
);

読み込んだデータへのアクセスは画像と同様に id 指定で。

var lo:Loader;
lo = getResourceById("swf" + j).data;
モバイルバージョンを終了