2010-06

XMLを読み込んでステージ上に画像を配置するためにこんなコードを書きました。 かなりの割合ではしょってるけども。

for(var i:int = 0; i<xml.@maxnum; i++){
  //Panel を用意する
  panelInit(i);</p>

<p>//画像を読み込む
  img.load(reqImage);
  img.contentLoaderInfo.addEventListener(Event.COMPLETE, attachImage(i));</p>

<p>if(i == xml.@maxnum-1){
    Tweener.addCaller(this, {
      onUpdate : function(){
        sortPanel();
        loading.visible = false;
        showControler();
        panels.forEach(function(_this:Panel, i:int, ary:Array){
          _this.visible = true;
          _this.oldY = _this.y;
          _this.y = stageH+_this.height;
        });
      },
      onComplete : function(){
        panels.forEach(function(_this:Panel, i:int, ary:Array){
          Tweener.addTween(_this,{
            y : _this.oldY,
            visible : true,
            time : 2.5,
            onComplete : function(){
              if(i==ary.length-1){
                timer.start();
              }
            }
          });
        });
      },
      delay : 1,
      time : 1,
      count : 1
    });
  }
}</p>

<p>function attachImage(_id:int):Function{
    return function(event:Event):void{
        var img:MovieClip = new MovieClip();
        img.addChild(event.target.content);
        img.x = -img.width/2;
        img.y = -img.height/2;
        img.alpha = 1;
        panels[_id].addChild(img);
        panels[_id].href = xmlObj.href[_id];
        panels[_id].target = xmlObj.target[_id];
        panels[_id].addEventListener(MouseEvent.CLICK,clickImg);
    };
}

panelInit() はPanelクラスを呼び出して配置する関数。 でもこの書き方だと、 Panelを一個配置する→画像を読み込む→読み込まれたらPanelに貼り付ける っていう処理になってるので、どうやら画像が読み込まれた順(？)に配置されてる模様。

これじゃいけないので、 Panelをとりあえず配置する→とりあえず画像を読み込んでおく→順番にPanelに貼り付けていく っていう処理に変えたいと思います。

まず先にPanelを全部配置したいので、

for(var i=0; i<xml.@maxnum; i++){
  panelInit(i);
}

panelInit() だけ別のfor文で処理しておきます。

次に画像を順番に並べてどっかに置いておきたいので、

var imgAry:Array = new Array(); //画像を置いておく配列を用意する
for(var i:int = 0; i&lt;xml.@maxnum; i++){</p>

<p>//中略</p>

<p>//画像が読み込まれたら実行でなく、画像を読み込む準備ができたら実行するようにする
  img.contentLoaderInfo.addEventListener(Event.INIT, attachImage(i));</p>

<p>//中略</p>

<p>function attachImage(_id:int):Function{
    return function(event:Event):void{
        var img:MovieClip = new MovieClip();
        img.addChild(event.target.content);
        img.x = -img.width/2;
        img.y = -img.height/2;
        img.alpha = 1;
　　　　　　　　　//Panelに設定していた諸々はここではやらないようにする
                //ただただ画像をおいとくだけにする
        imgAry.push(img);
    };
}

で、最後にパネルの配列と画像の配列を対応させます。

//略
  if(i == xml.@maxnum-1){
    Tweener.addCaller(this, {
      onUpdate : function(){
        sortPanel();
        loading.visible = false;
        showControler();
        panels.forEach(function(_this:Panel, i:int, ary:Array){
          //ここで各Panelにプロパティを指定する
          _this.href = xmlObj.href[i];
          _this.target = xmlObj.target[i];
          _this.addEventListener(MouseEvent.CLICK,clickImg);
          _this.visible = true;
          _this.oldY = _this.y;
          _this.y = stageH+_this.height;
          //いろいろやったら最後にPanelに画像を貼り付ける
          _this.addChild(imgAry[i]);
        });
      },
//略

こんな感じで無事XMLに書いた順番に配置してくれるようになりました。

でももっとうまくやる方法がある気がするんだぜ。