AS3 CS3 複数の画像サイズ等を変更する

質問

AS2からAS3に移行勉強中です。（有名な野●文雄さんのweb連載を中心に勉強しています。）
外部から複数の画像を読込み、各画像の位置やサイズを指定しようとしています。
以下のスクリプトを確認してみるとプロパティ変更の「function xSetContent」最後の「i=3」時のみ機能しています。これを「i=1」「i=2」の時も機能させるにはどのようにすればいいのか、「this["xSetContent"+i(or bn)] = function」「this["myLoader"+bn].contentLoaderInfo.addEventListener(Event.COMPLETE, this["xSetContent"+i(or bn));」等々テストしてみましたが、どれも希望通りに動きませんでした。テスト中にfunctionは一度しか機能しないとぼんやり認識できたのですが、、具体的にどのようにfor内でfunctionを繰り返しをさせられるのか？（この考え方も間違っているかもしれません。。）結果として複数の外部から読込んだ画像のプロパティ（位置やサイズ）を指定するにはどのようにすれば良いのか、ご教授ください。

以下現在のスクリプト
※3枚の画像読込みは出来ていますが、サイズ／位置の指定は3枚目（一番最後に読込んだ画像）のみです。
for(var i:int=1;i < 4;i++)
{
//trace(i); //表示：123
var bn:Number=i;
this["myLoader"+bn] = new Loader();
this["myLoader"+bn].load(new URLRequest("img/img00"+bn+".jpg"));
this["myLoader"+bn].contentLoaderInfo.addEventListener(Event.COMPLETE, xSetContent);
addChild(this["myLoader"+bn]);

function xSetContent(eventObject:Event):void
{
var myContent:DisplayObject = this["myLoader"+bn].content;
myContent.width = 93; myContent.height = 68;
myContent.x = -69+(i*97); myContent.y = 115;
//trace(i); //表示：444
}
}

回答No.2

BlurFiltan · ベストアンサー

AS2 でも AS3 でも基本的に同じ問題は起こりますよ。

とにかく問題は i です。
for文を抜けた後に(JPEGのロード完了時には) i は 4 になっています。
この辺をとう対処するかです。

対処案を３つほど書きます。

//===対処案１==================
for (var i:int=1; i<4; i++) {
this["myLoader"+i] = new Loader();
this["myLoader"+i].load(new URLRequest("img/img00"+i+".jpg"));
this["myLoader"+i].contentLoaderInfo.addEventListener(Event.COMPLETE, xSetContent);
this["myLoader"+i].x = -69+(i*97);
this["myLoader"+i].y = 115;
addChild(this["myLoader"+i]);
}

function xSetContent(eventObject:Event):void {
var myContent:DisplayObject = eventObject.target.content;
myContent.width = 93;
myContent.height = 68;
}
//=============================

↑i の値がまだ 1～3 のときに
その値を使って座標指定してしまえば
あっさりと問題が解決するという方法です。

AS2(AS1)でも同じ方法(考え方)は使えます。

//===対処案２==================
for (var i:int=1; i<4; i++) {
this["myLoader"+i] = new Loader();
this["myLoader"+i].load(new URLRequest("img/img00"+i+".jpg"));
//ロード完了時に関数xSetContentの戻り値を実行
this["myLoader"+i].contentLoaderInfo.addEventListener(Event.COMPLETE, xSetContent(i));
addChild(this["myLoader"+i]);
}

//戻り値として関数を返す 関数xSetContentを定義
function xSetContent(n:int):Function {
//戻り値として返す関数
return function():void{
var myContent:DisplayObject = MovieClip(root)["myLoader" + n].content;
myContent.width = 93;
myContent.height = 68;
myContent.x = -69+(n*97);
myContent.y = 115;
}
};
//=============================

↑クロージャという関数を使っています。
これも AS2(AS1)でも同じ方法(考え方)は使えます。
また
ActionScript に関わらず多くの言語でこのクロージャは使われます。

//===対処案３==================
//Dictionaryインスタンス「my_dic」を作成
var my_dic:Dictionary = new Dictionary();

for (var i:int=1; i<4; i++) {
this["myLoader"+i] = new Loader();
this["myLoader"+i].load(new URLRequest("img/img00"+i+".jpg"));
this["myLoader"+i].contentLoaderInfo.addEventListener(Event.COMPLETE, xSetContent);
//「my_dic」にLoaderをキーとして i の値を登録
my_dic[this["myLoader"+i]] = i;
addChild(this["myLoader"+i]);
}

function xSetContent(eventObject:Event):void {
var myContent:Bitmap = eventObject.target.content;
myContent.width = 93;
myContent.height = 68;
//「my_dic」からLoaderをキーとして i の値を取得
myContent.x = -69+(my_dic[myContent.parent]*97);
myContent.y = 115;
}
//=============================

↑Dictionaryクラスのインスタンスには
インスタンスをキーとしてインスタンスを登録することができます。
(インスタンスどうしを関連付けることができます。)
これは AS3 のみで使える方法で AS2(AS1) では使えません。

この場合は Loader インスタンスをキーとして i の値を関連付けています。
他にも例えば
「ボタンインスタンスをキーとしてムービークリップを関連付ける」
「テキストフィールドをキーとしてスプライトを関連付ける」
などのことができます。
フレームにコピペ＆ムービープレビューするだけで検証できる簡易例↓。

//=============================
//テキストフィールド「my_txt」を作成
var my_txt:TextField = new TextField();
my_txt.border = true;
my_txt.autoSize = TextFieldAutoSize.LEFT;
my_txt.x = my_txt.y = 20;
my_txt.text = "ココをクリックしてください";
addChild(my_txt);

//スプライト「my_sp」を作成
var my_sp:Sprite = new Sprite();
my_sp.x = my_sp.y = 120;
my_sp.graphics.beginFill(0xFFCC00);
my_sp.graphics.drawRect(-50, -25, 100, 50);
my_sp.graphics.endFill();
addChild(my_sp);

//Dictionaryインスタンスを作成
var my_dic:Dictionary = new Dictionary();
//「my_txt」をキーとして「my_sp」を関連付ける
my_dic[my_txt] = my_sp;

//「my_txt」クリック時に関数rotateMCを実行
my_txt.addEventListener(MouseEvent.CLICK,rotateMC);

//関数rotateMCの定義
function rotateMC(evt:MouseEvent):void {
//「my_txt」をキーとして関連付けたインスタンスを回転
my_dic[evt.currentTarget].rotation += 10;
}
//=============================

お礼

BlurFiltanさん

丁寧なアドバイスありがとうございます！
全ての対処案は思い通りに動きました。
対処案１の「i の値がまだ 1～3 のときにその値を使って座標指定してしまえば
あっさりと問題が解決するという方法です。」は思わず、そうか！と声を出してしまいました。まだまだ未熟なため「var myContent:DisplayObject = eventObject.target.content;」の「eventObject.target」が思いつかず、絶対にインスタンス名でないといけないと思い込んでいました。。

対処案２はn:intということは整数（-2147483648～2147483647）まで繰り返しているのかな。等々はっきりと認識はしていない箇所もありますがおおまかな流れを理解することができました。

対処案３はそうか、これがAS3なんだなあ、と関心してしまいました。説明は理解したつもりなんですが、別のスクリプトを書いているときにこれを思い出すが少し心配ですが、頭の片隅においていつか使用してみたいと思っています。(Spriteが出てきたときはDirectorを思い出してしまいました。懐かしいです。)

教えていただいた書き方が思いつくか、本当にAS3を習得できるか心配ですが、今後もめげずに頑張っていきたいと思います！再度になりましたが本当にありがとうござます。

回答No.1

tkd34

とりえあず、関数定義をforの外にだしてみては？

for(){
myFunction();
}

function myFunction():void {
//
}

お礼

tkd34さん
アドバイスありがとうございます。
早速、アドバイス通り、関数定義をforの外に出してみましたが
結果は、「i=3」時はfunctionが効いていますが、「i=1」「i=2」はfunctionが効きませんでした。
他に何かアドバイスがありましたらお手数ですがよろしくお願いします。