AS3.0でギャラリーのボタンの透明度を変えたい

環境：MacOSX
Flash CS5
AS3.0

写真がステージに読み込まれた際にその写真に該当するボタンの透明度を
50%にしたいと思ったのですが、うまくいかなくて困っています。

btnArr[imageNum].alpha = 0.5;

上記のスクリプトでいけるとおもったのですが、うまくいきません。。
別の写真がステージに配置された時には透明度を戻したいのですが
分からず困っています。
どなたかどうかよろしくお願いします。

// 写真のURLを保存する配列
var photoArr:Array
//
var btnArr:Array

// 写真を自動的に変更するタイマー
var imageTimer:Timer;

// 大きな画像を読み込むローダー
var bigImageLoader:Loader;

// 現在表示されている画像の番号
var imageNum:Number = 0;

//--------------------------------
// 初期化の処理
//--------------------------------
// 配列を設定する
photoArr = new Array();
photoArr[0] = "c00.jpg";
photoArr[1] = "c01.jpg";
photoArr[2] = "c02.jpg";
photoArr[3] = "c03.jpg";
photoArr[4] = "c04.jpg";

//
btnArr = new Array();
btnArr[0] = btnA;
btnArr[1] = btnB;
btnArr[2] = btnC;
btnArr[3] = btnD;
btnArr[4] = btnE;

// タイマーを起動
startTimer();


// 大きな画像を読み込む
loadImage();

// タイマーをスタートする
function startTimer() {
imageTimer = new Timer(1000, 0);
imageTimer.start();
imageTimer.addEventListener(TimerEvent.TIMER, onTimerCalled);
}

// タイマーが呼ばれるたびに実行される
function onTimerCalled(evt) {
btnA.y -= 85;
btnB.y -= 85;
btnC.y -= 85;
btnD.y -= 85;
btnE.y -= 85;
if(btnA.y <= 0){
btnA.y = 380;
}
if(btnB.y <= 0){
btnB.y = 380;
}
if(btnC.y <= 0){
btnC.y = 380;
}
if(btnD.y <= 0){
btnD.y = 380;
}
if(btnE.y <= 0){
btnE.y = 380;
}

imageNum+=1;
if (imageNum >= photoArr.length) {
imageNum = 0;
}
// 大きな画像を読み込む
loadImage();
}




//btn01をクリックした時の処理
btn01.addEventListener(MouseEvent.CLICK,xClick01);
function xClick01(evt:Event):void {
btnA.y -= 85;
btnB.y -= 85;
btnC.y -= 85;
btnD.y -= 85;
btnE.y -= 85;
if(btnA.y <= 0){
btnA.y = 380;
}
if(btnB.y <= 0){
btnB.y = 380;
}
if(btnC.y <= 0){
btnC.y = 380;
}
if(btnD.y <= 0){
btnD.y = 380;
}
if(btnE.y <= 0){
btnE.y = 380;
}

imageNum+=1;
if (imageNum >= photoArr.length) {
imageNum = 0;
}
// 大きな画像を読み込む
loadImage();
}

//btn02をクリックした時の処理
btn02.addEventListener(MouseEvent.CLICK,xClick02);
function xClick02(evt:Event):void {
btnA.y += 85;
btnB.y += 85;
btnC.y += 85;
btnD.y += 85;
btnE.y += 85;
if(btnA.y >= 381){
btnA.y = 40;
}
if(btnB.y >= 381){
btnB.y = 40;
}
if(btnC.y >= 381){
btnC.y = 40;
}
if(btnD.y >= 381){
btnD.y = 40;
}
if(btnE.y >= 381){
btnE.y = 40;
}

imageNum-=1;
if (imageNum <= -1) {//photoArr.lengthを-1に変更
imageNum = 4;
}

// 大きな画像を読み込む
loadImage();
}



// 大きな画像を読み込む
function loadImage() {
// 新しい画像を読み込む
var url = "gallery_img/"+photoArr[imageNum];
btnArr[imageNum].alpha = 0.5;//読み込まれた画像に該当するボタンの透明度を50%にする処理
var req = new URLRequest(url);
bigImageLoader = new Loader();
bigImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoad);
bigImageLoader.load(req);
mainTarget.addChild(bigImageLoader);
}

// 大きな画像が読み込まれたら実行される処理
function onImageLoad(eventObj) {
bigImageLoader.alpha = 0;
stage.addEventListener(Event.ENTER_FRAME, onFadeIn);
}

// フェードインをつける
function onFadeIn(eventObj) {
bigImageLoader.alpha += 0.1;
}

// フェードインの処理を取り除く
if (bigImageLoader.alpha >= 1) {
removeEventListener(Event.ENTER_FRAME, onFadeIn);
}

No.2 回答者： BlurFiltan 回答日時： 2012/07/12 18:49

～～～字数制限により＃１からの続き～～～

というわけで
全体的にスクリプトを考えなおしてみました。

Loader インスタンスは２つだけにして
画像を交互にロードし
ロードした方の Loader のインデックス(表示順/Z軸方向順番/昔で言う深度)を上に持って行くという方法のスクリプト例です。


//＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
// 写真のURLを保存する配列
var photoArr:Array;

// ボタンの参照を保存する配列
var btnArr:Array;

// 写真を自動的に変更するタイマー
var imageTimer:Timer;

// 大きな画像を読み込むローダー２つ
var bigImageLoader0:Loader;
var bigImageLoader1:Loader;

//ローダーを作成＆「mainTarget」内に配置
bigImageLoader0 = new Loader();
mainTarget.addChild(bigImageLoader0);
bigImageLoader1 = new Loader();
mainTarget.addChild(bigImageLoader1);

// 上側にあるローダーの番号
var loaderNum:int = 1;

// 現在表示されている画像の番号
var imageNum:Number = 0;

//--------------------------------
// 初期化の処理
//--------------------------------
// 写真のURLの配列を設定する
photoArr = new Array();
photoArr[0] = "c00.jpg";
photoArr[1] = "c01.jpg";
photoArr[2] = "c02.jpg";
photoArr[3] = "c03.jpg";
photoArr[4] = "c04.jpg";

// ボタンの配列を設定する
btnArr = new Array();
btnArr[0] = btnA;
btnArr[1] = btnB;
btnArr[2] = btnC;
btnArr[3] = btnD;
btnArr[4] = btnE;

// タイマーを起動
startTimer();

// 大きな画像を読み込む
loadImage();

// タイマーをスタートする
function startTimer() {
imageTimer = new Timer(2000,0);
imageTimer.start();
//タイマーイベントで関数 gotoNextPhoto を実行
imageTimer.addEventListener(TimerEvent.TIMER, gotoNextPhoto);
}

//btn01をクリックした時に関数 gotoNextPhoto を実行
btn01.addEventListener(MouseEvent.CLICK,gotoNextPhoto);

//関数 gotoNextPhoto の定義
function gotoNextPhoto(evt:Event = null):void {
for (var i=0; i <=btnArr.length-1; i++) {
btnArr[i].y -= 85;
if (btnArr[i].y<=0) {
btnArr[i].y=380;
}
}
imageNum+=1;
if (imageNum>=photoArr.length) {
imageNum=0;
}
// 大きな画像を読み込む
loadImage();
}

//btn02をクリックした時に関数 gotoPrevPhoto を実行
btn02.addEventListener(MouseEvent.CLICK,gotoPrevPhoto);

function gotoPrevPhoto(evt:Event):void {
for (var i=0; i <=btnArr.length-1; i++) {
btnArr[i].y+=85;
if (btnArr[i].y>=381) {
btnArr[i].y=40;
}
}
imageNum-=1;
if (imageNum<=-1) {
imageNum=photoArr.length-1;
}
// 大きな画像を読み込む
loadImage();
}

// 大きな画像を読み込む
function loadImage() {
//loaderNum の 0 と 1 を入れ替える
loaderNum^=1;
// 新しい画像を読み込む
var url="gallery_img/"+photoArr[imageNum];
var req=new URLRequest(url);
this["bigImageLoader"+loaderNum].contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoad);
this["bigImageLoader"+loaderNum].load(req);
}

// 大きな画像が読み込まれたら実行される処理
function onImageLoad(eventObj) {
//↓全ての btnArr[○○] のアルファを 100% にしておく
for (var i = 0; i <= btnArr.length-1; i++) {
btnArr[i].alpha=1;
}
//↓読み込まれた画像に該当するボタンのアルファ 50% にする
btnArr[imageNum].alpha=0.5;
//ロードされたローダーの表示順を一番上にする
mainTarget.setChildIndex(this["bigImageLoader" + loaderNum],mainTarget.numChildren-1);
this["bigImageLoader"+loaderNum].alpha=0;
this.addEventListener(Event.ENTER_FRAME, onFadeIn);
}

// フェードインをつける
function onFadeIn(eventObj) {
this["bigImageLoader" + loaderNum].alpha+=0.1;
// フェードインの処理を取り除く
if (this["bigImageLoader"+loaderNum].alpha>=1) {
this.removeEventListener(Event.ENTER_FRAME, onFadeIn);
}
}
//＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

No.1 回答者： BlurFiltan 回答日時： 2012/07/12 18:44

実際に書かれていらしゃるままのものを作成してみましたが

btnArr[imageNum].alpha = 0.5;
これでちゃんと
btnArr[imageNum] は半透明になりましたよ。

ただし，
btnArr[imageNum] は順番に半透明になって行くだけなので
一周すると btnA～btnE は全て半透明になってしまします。

そうならないようにするには

btnArr[imageNum].alpha = 0.5;//読み込まれた画像に該当するボタンの透明度を50%にする処理

と書かれていらしゃる部分を
次のようにする方が良いと思います。

//↓全ての btnArr[○○] のアルファを 100% にしておく
for(var i = 0; i <= btnArr.length-1; i++){
btnArr[i].alpha=1;
}
//↓読み込まれる画像に該当するボタンのアルファ 50% にする処理
btnArr[imageNum].alpha=0.5;


とにかくこうしてもしなくても
btnArr[imageNum].alpha = 0.5;
でちゃんと半透明になりますよ。



あと，
上のスクリプトが今の場所にあるままだと
「画像が読み込まれたとき」ではなく「画像を読み込むとき」になりますよね。

「画像が読み込まれたとき」にするには

// 大きな画像を読み込む
function loadImage() {…}

この↑中からこちらの↓中に引っ越しすべきでしょう。

// 大きな画像が読み込まれたら実行される処理
function onImageLoad(eventObj) {…}

　


=================================================

ただ，
ボタンが半透明になるかならないかではなく，
またコードの書き方が良い悪いではなく，
仕組み(プログラム自体)に致命的な欠陥があります。

今のように，
どんどんどんどん
bigImageLoader = new Loader();
で Loader インスタンスを作成して行って
そこに次から次へとJPEGをロードして行ったら
閲覧者のメモリがパンクしてしまいます。

Loader の座標がどれも同じ位置なので
どんどんどんどん Loader が増えて行っていることがわかりにくいだけです。
座標を少しずつでもずらせば大量に画像が配置されて行くのがわかると思います。


これを解決するには，
例えば 最初に写真の数だけの Loader インスタンスを作成しておいて
該当 Loader に写真をロードし
インデックス(表示順/Z座標の上下関係)を上にするなどの方法をとる方が良いと思います。

もしそうするとなると
何度も何度も同じ Loader に同じ画像をロードするのは変なことになりますから
最初に全画像を各 Loader にロードしておいて
ボタンクリック や Timer で順番に該当 Loader のインデックス(表示順/Z座標の上下関係)を上に上げる方が自然な流れになります。


または
Loader インスタンスは写真の数だけ用意するのではなく
２つだけ(固定)にしても良いと思います。

例えば
bigImageLoader0 と bigImageLoader1 の２つを最初に作って両方とも addChild() しておいて
ボタンクリック や Timer で
ある変数の 0 と 1 を切り替えて該当画像を bigImageLoader0 または bigImageLoader1 にロードし
ロードした Loader の方のインデックス(表示順/Z座標の上下関係)を上にしても良いでしょう。


他にも方法はあると思います。
例えば
Loader は今のままのようにガンガンに作りまくるのだけれども
前の前の前に画像をロードした Loader (例えば３つ下の Loader)は
順番に removeChild() した上で null にして参照を切る とかいう方法もあります。
(ただしこれは管理が結構難しい(ややこしい)ですよ。)
(また実際の Loader 削除はガベージコレクタ待ちになるのであまりお薦めできません。)
(↑Loader を removeChild() した上で参照を切っても，ステージ上の表示から消えるだけで，ガベージコレクションの対象にならない限りメモリから消えることはないという意味です。)

まだ他にも方法はあると思いますが，
とにかく今のままの仕組み(プログラム)は欠陥品ですよ。


　

===================================

それと...

最後の
// フェードインの処理を取り除く
の部分全体が
独立してしまっていますから動作していませんよ。
ちゃんと
// フェードインをつける
function onFadeIn(eventObj) {…}
内に入れないと。

また入れたとしても
そのままでは
stage.addEventListener(Event.ENTER_FRAME, onFadeIn);
が対象としているもの(この場合 stage)と
removeEventListener(Event.ENTER_FRAME, onFadeIn);
が対象としているもの(この場合 root)とがズレてますから
延々とアルファは上がりっぱなしになってしまいますよ。

　

　
===================================



何だか全体的にガタガタで見ていられないので
＃２で Loader インスタンスを２つだけ用意する方法のスクリプト例を回答します。


～～～字数制限のため＃２へ続く～～～