as3でフェード

質問

10個あるスプライトを順番にタイミングをずらしてフェードインで表示するものを
作りたいのですが、どのようにすれば良いでしょうか。

下記のようにウエイト関数つって挟み込めばできそうなのですが、
もっとスマートな方法はないでしょうか。

for (var i:int=0; i<containers.length; i++){

　　//フェードスタート
　　containers[i].addEventListener(Event.ENTER_FRAME, slideContainer);

　　//ウエイト挟む？

　　//イベント
　　function slideContainer(e:Event):void{

　　　　　e.target.alpha += 0.01;

　　　　　if (e.target.alpha = 1 ) {
　　　　　　　　e.target.removeEventListener(Event.ENTER_FRAME, slideContainer);
　　　　　}

　　}

}

回答No.1

BlurFiltan · ベストアンサー

◎ まずは現状のスクリプトの指摘から。

そもそも for文 を使おうとすることが間違いですが
仮に使うとしても
その中に function文 を入れることがさらなる間違いです。
何度も同じ function を定義するのは変です。

さらに
if文 の () 内で代入演算子「=」を使うこともこの場合は間違いです。
使うのであれば等価演算子「==」でしょう。
しかし
alpha は結構イイカゲンな値になるため
通常は等価演算子「==」で判断できません。
この場合は，比較演算子「>=」を使うべきです。

◎ 次に本題です。

最初に
for文 を使うことが間違いということを書きましたが
では何を使うのかと言えば
ActionScript 3.0 から導入された「Timerクラス」を使うか
もしくは
ActionScript 2.0 以下 や JavaScript ではお馴染みの
「setInterval」や「setTimeout」を使うのが一般的です。

※別法として
　「カウンター用に別の Event.ENTER_FRAME 実行関数を用意する」
　とか
　「MC のループ再生で順次 Event.ENTER_FRAME 実行関数を登録する」
　などの方法もありますが
　最近は一般的な方法とは言えません(昔は一般的)。

下のスクリプト【例１】～【例３】には
全角スペースでインデントを入れています。
そのままコピペで使用するとエラーになるので
全角スペースを削除するか TAB などに置換してください。

【例１】「Timerクラス」を使うスクリプト例

//カウンタ用変数 i の初期化
var i:int = 0;

//Timerクラスのインスタンス tm を作成
//(遅延：2000ミリ秒(２秒)，実行回数：containers の要素数-1)
var tm:Timer = new Timer(2000,containers.length - 1);

//指定遅延時間毎に関数 startSlide を実行
tm.addEventListener(TimerEvent.TIMER,startSlide);

//関数 startSlide の定義
function startSlide(e:TimerEvent = null):void {
　　//フェードスタート
　　containers[i].addEventListener(Event.ENTER_FRAME, slideContainer);
　　//カウンタ i に 1 を加算
　　i++;
}

//Timerスタート
tm.start();

//関数 startSlide を即実行
startSlide();

function slideContainer(e:Event):void {
　　e.target.alpha += 0.01;
　　//(「=」を「>=」に修正)
　　if (e.target.alpha >= 1) {
　　　　e.target.removeEventListener(Event.ENTER_FRAME, slideContainer);
　　}
}

【例２】「setInterval」を使うスクリプト例

//カウンタ用変数 i の初期化
var i:int = 0;

//関数 startSlide を 2000ミリ秒(２秒) 間隔で遅延実行
var ID:int = setInterval(startSlide, 2000);

//関数 startSlide の定義
function startSlide():void {
　　//フェードスタート
　　containers[i].addEventListener(Event.ENTER_FRAME, slideContainer);
　　//もし i が containers の要素数-1 であれば
　　if (i < containers.length - 1) {
　　　　//カウンタ i に 1 を加算
　　　　i++;
　　//それ以外は
　　} else {
　　　　//setInterval を解除
　　　　clearInterval(ID);
　　}
}

//関数 startSlide を即実行
startSlide();

function slideContainer(e:Event):void {
　　e.target.alpha += 0.01;
　　//(「=」を「>=」に修正)
　　if (e.target.alpha >= 1) {
　　　　e.target.removeEventListener(Event.ENTER_FRAME, slideContainer);
　　}
}

【例３】「setTimeout」を使うスクリプト例

//カウンタ用変数 i の初期化
var i:int = 0;

//関数 startSlide の定義
function startSlide():void {
//フェードスタート
containers[i].addEventListener(Event.ENTER_FRAME, slideContainer);
//もし i が containers の要素数-1 であれば
if (i < containers.length - 1) {
//この関数 startSlide を 2000ミリ秒(２秒) 後に実行
setTimeout(startSlide, 2000);
//カウンタ i に 1 を加算
i++;
}
}

//関数 startSlide を実行
startSlide();

function slideContainer(e:Event):void {
e.target.alpha += 0.01;
//(「=」を「>=」に修正)
if (e.target.alpha >= 1) {
e.target.removeEventListener(Event.ENTER_FRAME, slideContainer);
}
}

上記３例中では
【例１】の「Timerクラス」を使う方法が
ActionScript 3.0 では最も一般的だと思います。
reset() や stop() メソッドや
timerComplete イベントなども用意されています。

ただ
途中から(モノによって)遅延実行時間を変更したい場合などは
【例３】の「setTimeout」の方が使い易い気がします。

【例２】の「setInterval」を使う方法は
上記３例中で最古からあって結構普及していますが，
何度も setInterval が重複セットされると
ID の管理が難しくなることもあるため
個人的に私はあまり使いたくありません。

お礼

すごくよくわかりました。
ありがとうございます！