多次元配列のデータがうまく吸い出せません。

質問

こちらでご指導仰ぎながらアクションスクリプトの簡素化を進めています。いい感じのところまできていますが最終局面で行き詰っています。

myMovieClipというムービークリップと3つのボタンmy_btn1、my_btn2、my_btn3を配置しそれぞれのボタンをクリックしたらムービークリップの色が変わるという物を作っています。エラーは出ないのですが全てのボタンで同じ色（指定していない）に変化します。なにがおかしいのでしょうか？

本来なら
colorTransDic[my_btn1] = new ColorTransform(1,1,1,1,122,15,122,0);
とするところを簡素化したく配列に色データを詰め込み
colorTransDic[this["my_btn" + i]] = new ColorTransform(colors[i - 1]);
としましたがこれが間違っているようです。

お手数ですがご指導宜しくお願いいたします。

スクリプトは以下の通りです。
import flash.geom.ColorTransform;
import flash.geom.Transform;

var trans:Transform = new Transform(myMovieClip);

var colorTransDic:Dictionary = new Dictionary();

var colors:Array = [[1,1,1,1,255,255,255,0],[1,1,1,1,122,122,122,0],[1,1,1,1,0,0,0,0]];

for (var i:int = 1; i<=3; i++)
{
colorTransDic[this["my_btn" + i]] = new ColorTransform(colors[i - 1]);
this["my_btn" + i].addEventListener( MouseEvent.CLICK , onClick );
}

function onClick( event:MouseEvent )
{
trans.colorTransform = colorTransDic[event.currentTarget];
}

回答No.1

BlurFiltan · ベストアンサー

おそらく
new ColorTransform( ) の ( )内に入れる引数を
勝手に配列だと決めていらっしゃるところが間違いなんだと思います。

colorTransDic[this["my_btn" + i]] = new ColorTransform(colors[i - 1]);

これだと
「new ColorTransform( ) の
第１引数に colors[i - 1] 全部を入れて
第２引数～第８引数には何も入れない。」
ということになってしまいます。
　↓↓↓
new ColorTransform(colors[i - 1], , , , , , , )

つまり
new ColorTransform( ) の
「第１引数には想定外の変なものを入れて，
第２引数～第８引数引数はデフォルトのまま。」
ということになりますから，
実際に次のような値が入ります。
　↓↓↓
new ColorTransform(NaN, 1, 1, 1, 0, 0, 0, 0)

動作的には次のように動きます。
　↓↓↓
new ColorTransform(0, 1, 1, 1, 0, 0, 0, 0)

したがってどのボタンをクリックしても
myMovieClip は
new ColorTransform(0, 1, 1, 1, 0, 0, 0, 0)
の色(赤が飛んだ色)にしかならないのです。

というわけで対処法です。

◎ 対処法１

ご質問のスクリプトの次の部分を

colorTransDic[this["my_btn" + i]] = new ColorTransform(colors[i - 1]);

次のように変えるのも１つの方法だと思います。

colorTransDic[this["my_btn" + i]] = new ColorTransform(colors[i - 1][0],colors[i - 1][1],colors[i - 1][2],colors[i - 1][3],colors[i - 1][4],colors[i - 1][5],colors[i - 1][6],colors[i - 1][7]);

(↑改行無しの長い１行です。)

◎ 対処法２

ご質問のスクリプトの次の部分を

//-------------------------
var colors:Array = [[1,1,1,1,255,255,255,0],[1,1,1,1,122,122,122,0],[1,1,1,1,0,0,0,0]];

for (var i:int = 1; i<=3; i++)
{
colorTransDic[this["my_btn" + i]] = new ColorTransform(colors[i - 1]);
this["my_btn" + i].addEventListener ( MouseEvent.CLICK , onClick );
}
//-------------------------

次のように変えるのも１つの方法でしょう。

//-------------------------
var colors:Array = [new ColorTransform(1,1,1,1,255,255,255,0),new ColorTransform(1,1,1,1,122,122,122,0), new ColorTransform(1,1,1,1,0,0,0,0)];

for (var i:int = 1; i<=3; i++)
{
colorTransDic[this["my_btn" + i]] = colors[i - 1];
this["my_btn" + i].addEventListener ( MouseEvent.CLICK , onClick );
}
//-------------------------

◎ 対処法３

またはご質問のスクリプト全体を
次のように変えるのも１つの方法でしょう。

//-------------------------
import flash.geom.ColorTransform;
import flash.geom.Transform;

var trans:Transform = new Transform(myMovieClip);

var colorDic:Dictionary = new Dictionary();

var colors:Array = [[1,1,1,1,255,255,255,0],[1,1,1,1,122,122,122,0],[1,1,1,1,0,0,0,0]];

//ColorTransformのプロパティ名を配列に登録
var colorProp:Array = ["redMultiplier","greenMultiplier","blueMultiplier","alphaMultiplier","redOffset","greenOffset","blueOffset","alphaOffset"];

for (var i:int = 1; i<=3; i++)
{
colorDic[this["my_btn" + i]] = colors[i - 1];
this["my_btn" + i].addEventListener ( MouseEvent.CLICK , onClick );
}

function onClick ( event:MouseEvent )
{
var colorTrans:ColorTransform = new ColorTransform();
for (var i:int = 0; i < colorProp.length; i++)
{
colorTrans[colorProp[i]] = colorDic[event.currentTarget][i];
}
trans.colorTransform = colorTrans;
}
//-------------------------

ActionScript ではありませんが
関連している内容の質問だと思われるURLです。

「JavaScriptでインスタンスを生成するときに、引数を配列の内容にするにはどうした... - Yahoo!知恵袋」
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1064279940

お礼

早々のご指導感謝します。完璧なご指摘でどこが間違っていたか完全に理解出来ました。また丁寧に複数の対処法まで考えていただき本当に嬉しかったです。対処法２で進めることとさせていただきました。これから作業を進めていきますがまた行き詰った時は宜しくお願いします。この度はありがとうございました。