xmlで読み込んだ幅が違う画像を横に並べる方法がわかりません。【AS3】

質問

xmlで読み込んだ幅が違う画像を横に並べる方法がわかりません。
Flash CS3 AS3 MacOS10.6.2

流れは、xmlに書かれた「画像URL」「幅」「高さ」を読み込み、
画像高さ＝360pxに固定し、それによって算出された新しい画像幅を
10px間隔で、横に並べたい。

のですが、、、うまくいかなくて困っております。
誰か助けてください。。。

ソースは以下の通りです。

XML-----------------------
<?xml version="1.0" encoding="UTF-8"?>
<root>
<banner image="A.jpg" link="a.html" target="_self" imgwidth="533" imgheight="800" />
<banner image="B.jpg" link="b.html" target="_self" imgwidth="640" imgheight="476" />
<banner image="C.jpg" link="c.html" target="_self" imgwidth="600" imgheight="603" />
<banner image="D.jpg" link="d.html" target="self" imgwidth="533" imgheight="800" />
<banner image="E.jpg" link="e.html" target="_self" imgwidth="533" imgheight="800" />
<banner image="F.jpg" link="f.html" target="_self" imgwidth="640" imgheight="476" />
</root>
---------------------------
（画像ファイル名は実際自由な名前が付きます）

◆ソースはhondakiyoshiさんのを参考にさせていただきました。
http://hondakiyoshi.com/actionscript/_as3-0_外部xml読み込みで表示するスクロールバナー.html
ASファイル（scrbanner.as）--------------------------

package {
-----省略---------

public class scrbanner extends MovieClip {
public const BNR_WIDTH:int = 260; //画像のX軸設定用数値
private const BNR_NUM:int = 5;
-----省略---------

// コンストラクタ
public function scrbanner(){
//XML読み込み
-----省略---------
}

//XML読み込み完了後の処理
function LoaderInfoCompleteFunc (event : Event) {
loadxml = new XML(url_loader.data);
var xmlList:XMLList = loadxml.banner;
scrollmc = new scrollclass();
scrollmc.y=scrollmc.x =0;

//画像の数だけバナークラスの作成を繰り返す
var i:int=0;
var rw:Array = new Array();
while (i<BNR_NUM){
for each(var element:XML in xmlList){
bannermc[i]=new bannerclass(element.@image,element.@link,element.@target,element.@imgwidth,element.@imgheight);
rw[i] = 360*xmlList[i].@imgwidth/xmlList[i].@imgheight+10; //ここで各画像の幅＋余白10pxを計算
//bannermc[i].x = i * BNR_WIDTH; //このままだと等間隔に並ぶ
bannermc[i].x = bannermc[i].x + + rw[i]; //★ここが問題の部分
scrollmc.addChild(bannermc[i]);
i++;
}
}
-----省略---------
addChild(scrollmc);
}
}
}
---------------------------------------------------------------------
ASファイル（bannerclass.as）--------------------------
package {
-----省略---------

public class bannerclass extends MovieClip {
-----省略---------

public function bannerclass(imagepath:String,inurl:String ,tgt:String,imgw:int,imgh:int){

-----省略---------

}
//ローディング中の処理
-----省略---------

};
//画像読み込みが終わったら。
private function completeHandler(event:Event):void {
//フェードイン用に最初が白いMOVIEクリップを準備
bf= new bunner_fadein();
//マウスオーバー用MOVIEクリップを準備
ovmc = new bannerover();
bf.width = ovmc.width = this.width;
bf.height = ovmc.height = this.height;
addChild(bf);
addChild(ovmc);

loadingmc.visible=false;
bf.gotoAndPlay("fadein");
ovmc.addEventListener(MouseEvent.ROLL_OVER, bnover);
ovmc.addEventListener(MouseEvent.ROLL_OUT, bnout);
ovmc.addEventListener(MouseEvent.CLICK, bnclick);
ovmc.buttonMode = true;
ovmc.useHandCursor = true ;
ovmc.mouseEnabled = true;
//ここで表示画像サイズを指定しました。
this.width = 360*width/height;
this.height = 360;

}
private function ioErrorHandler(event:IOErrorEvent):void {
trace("Unable to load image: " );
}
-----省略---------
}
}
---------------------------------------------------------------------
ASファイル（scrollclass.as）-----------------------------------------------
これはそのままです。
---------------------------------------------------------------------

長々とすみません。
もうどうしようもできなくて。。。
よろしくお願いいたします。

回答No.1

mahny · ベストアンサー

私はCS3は持っていないので確認は出来なかったのですが、、、

★問題点
bannermc[i].x = bannermc[i].x + rw[i];
の処理ですが、、、

bannermc[i].xがおそらく初期値が0なので
bannermc[i].x = rw[i];
と同じ

またrw[i]はi番目の画像の幅と10を足しているだけなので
全ての画像が x座標=(画像幅+10) の位置に来てしまっていると予想します。

配列をそのまま使うなら
bannermc[i].x = bannermc[i-1].x + rw[i-1];
が正解になるんですかね。
※ただし(i==0)の時は、bannermc[i]=0; としないと
　配列範囲外へのアクセスで例外エラー出ますね。

★直してみたコード
forとwhileが重なってるのが見づらかったので外しちゃいました。
--------------------
//画像の数だけバナークラスの作成を繰り返す
var rw:Number = 0;
for each(var element:XML in xmlList)
{
　var bannermc = new bannerclass(
　　　　　　　　　　　　element.@image,
　　　　　　　　　　　　element.@link,
　　　　　　　　　　　　element.@target,
　　　　　　　　　　　　element.@imgwidth,
　　　　　　　　　　　　element.@imgheight);
　// ★ここが問題の部分
　bannermc.x = rw;
　scrollmc.addChild(bannermc);

　// 次に並べる画像の開始位置 = 余白 + ( 元の画像幅 * 拡大率 )
　rw = 360 * element.@imgwidth / element.@imgheight + 10;
}

お礼

ありがとうございます！
ばっちりでした！！！！
キレイに並びました。
もうここで何日苦労したか。。。
これで今日はゆっくり寝れそうです。

間違いの部分も作って頂いたサンプルを見て直せました。
+=でrwを足していくということですね。
色々勉強になります。

これから、ボタンを配置して、クリックでスライドするスクリプトに挑戦です！
ありがとうございました！

回答No.2

mahny

#1です。
すいません。直したコードの最後間違っていますね。

// 次に並べる画像の開始位置 = 前画像の開始位置 + ( 元の画像幅 * 拡大率 ) + 余白
(誤) rw = 360 * element.@imgwidth / element.@imgheight + 10;
(正) rw += 360 * element.@imgwidth / element.@imgheight + 10;