フェードイン-（待機）-フェードアウトのやり方/Action scriptを使用

Action scriptを使用して2枚の画像を順番に「フェードイン」-「何秒か待機」-「フェードアウト」を繰り返したいのですが、この「何秒か待機」の部分はどのように記述すればいいのでしょうか？

No.1 ベストアンサー 回答者： perse 回答日時： 2005/09/17 11:11

setIntervalを使うと一定の間隔で関数等を呼び出すことができます。

例えば
　setInterval(my関数,5000)
とするとmy関数が実行されるのは5000ミリ秒後です。
つまり5秒待機したことになります。

//_rootにインスタンス名:my_mc(ムービークリップ)を用意
var inflg:Boolean = true;
var outflg:Boolean = false;
var id:Number;
//
_root.my_mc._alpha = 0;
//onEnterFrameイベント開始
_root.onEnterFrame = fun_EnterFrame;
function fun_EnterFrame() {
if (this.inflg == true) {
if (this.my_mc._alpha>=100) {
//フェードイン終了後
fun_Sleep();
} else {
this.my_mc._alpha++;
}
} else if (this.outflg == true) {
if (this.my_mc._alpha<=0) {
fun_Sleep();
} else {
this.my_mc._alpha--;
}
}
}
function fun_Sleep() {
trace("待機開始");
//onEnterFrameをとめる
_root.onEnterFrame = null;
//フラグ反転
_root.inflg = !_root.inflg;
_root.outflg = !_root.outflg;
//5秒待機
_root.id = setInterval(fun_Clear, 5000);
}
function fun_Clear() {
//setIntervalを解除(解除しないと5秒後にまた呼び出される)
clearInterval(_root.id);
//onEnterFrameイベント開始
_root.onEnterFrame = fun_EnterFrame;
}

この例は画像１枚の場合
２枚だともう一個フラグ立てればできるかな(?)

この回答へのお礼

ありがとうございます。現在試しているところです。

お礼日時：2005/09/26 14:48

No.2 回答者： DPE 回答日時： 2005/09/17 14:22

これの次にあれをする、といった段階ごとの処理は、switch 文を使って分岐させると簡単です。

行動を決める変数を１つ用意し、この変数の値を次のように決めます。

　1：画像をフェードイン　2：待機　3：フェードアウト

switch 文でこの変数をもとに分岐します。
例えばステップを管理する変数の初期値を１としておきますと、最初は case 1: （ラベルといいます）と書かれたところの処理が行われます。
つまり、

　case 1: フェードイン
　case 2: 待機
　case 3: フェードアウト

というように各ラベルを付けて処理を書き、各段階が終了した時点で変数の値を１進めておくと、フェードイン→待機→フェードアウトという処理になります。
最後のフェードアウトまで済んだ後は変数を１に戻しておけば、最初の処理に戻ります。


仮に画像のムービークリップ clip1 と clip2 があるとして、２枚くらいなら clip1 をフェードイン→待機→フェードアウト→ clip2 をフェードイン・・・と、片っ端からステップを踏んでいくのもいいのですが、これがもし、画像が５枚も 10 枚もあったとしたら、全てをステップにしていては大変です。
フェードイン→待機→フェードアウトという演出は、どの写真にも共通する処理なのですから、要は、操作するムービークリップだけ切り替えられればいいのです。
そこで、ムービークリップのインスタンス名を固定の名前＋通し番号で付け、今表示する画像の番号を変数で管理するようにします。
１枚の写真が終わったらカウントを１つ増やし、次の写真も同様に処理するようにスクリプトを組みます。
あとはムービークリップのインスタンス名にさえ気をつければ、写真が何枚あっても次々と同様に表示させることができます。


スクリプトにしますと、大体、次のようになります。
ステージに clip ＋通し番号で付けた画像のムービークリップ clip1 と clip2 があるとします。
このスクリプトはフレームに設定してください。

（↓各行頭に全角のスペースが入っています。コピーする際は、全て半角のスペースかタブに置き換えてください）


　//行動を決めるステップカウンタ
　//1：該当画像をフェードイン　2：一定時間、待機　3：該当画像をフェードアウト
　act_step = 1;

　//演出をかける画像の管理番号を保持
　image_no = 1;

　//画像の最大数
　image_max = 2;

　//フェードイン/アウトのスピードを保持
　fade_spd = 10;


　//全ての画像を透明にする
　for( i = 1 ; i <= image_max ; i++ )
　{
　　this[ "clip" + i ]._alpha = 0;
　}


　/*一定時間、待機する関数*/
　function Wait()
　{
　　//行動ステップカウンタを進める
　　_root.act_step++;

　　//タイマーを削除
　　clearInterval( timer_id );
　}


　/*全体を指揮する処理を定義*/
　//ステップカウンタに従って行動
　_root.onEnterFrame = function()
　{
　　switch( act_step )
　　{
　　　//該当画像をフェードイン
　　　//100％に達したら先に進む
　　　case 1:
　　　　this[ "clip" + image_no ]._alpha += fade_spd;
　　　　if( this[ "clip" + image_no ]._alpha >= 100 )
　　　　{
　　　　　//タイマーをセットして先に進む
　　　　　timer_id = setInterval( Wait , 5000 );
　　　　　act_step++;
　　　　}
　　　　break;

　　　//一定時間、待機
　　　case 2:
　　　　break;

　　　//該当画像をフェードアウト
　　　//完全に透明になったら、次の初期化をして最初に戻る
　　　case 3:
　　　　this[ "clip" + image_no ]._alpha -= fade_spd;
　　　　if( this[ "clip" + image_no ]._alpha <= 0 )
　　　　{
　　　　　//次の画像をセット
　　　　　//全て終了していたら、最初の画像に戻る
　　　　　image_no++;
　　　　　if( image_no > image_max )
　　　　　{
　　　　　　image_no = 1;
　　　　　}

　　　　　//最初に戻る
　　　　　act_step = 1;
　　　　}
　　　　break;

　　　default:
　　　　break;
　　}
　};


一定時間待機するには、getTimer という関数を利用して時間を計測するか、＃１の方がおっしゃるように setInterval 関数を使います。
getTimer を使った方法は古い Flash Player でも動作する利点はありますが、数ミリ秒ながら誤差が生じる可能性もあります。
Flash MX 以降をお使いでしたら setInterval がオススメです。

ステップカウンタに従い、case1: ラベルの処理が行われます。最初は clip1 がフェードインします。
フェードインが済んだら、タイマーをセットして先に進みます。
タイマーで呼び出されるのは、Wait という関数です。
Wait 関数が呼び出されるまでは変数 act_step の値は 2 ですから、case2: ラベルの処理が行われます。何もすることはありませんので、break で何もしないで待機します。
一定時間後に何をするかというと、待機時間が経過したら先に進めばいいので、行動を決めているステップカウンタを１進めます。
タイマーで呼ばれる関数内で、タイマーを削除するのを忘れないようにご注意ください。
タイマーが稼動していると、余計な時に Wait 関数が呼び出されてステップカウンタが狂って動作がおかしくなったり、次の待機時間が５秒に満たないなどの不具合の原因になります。

タイマーで呼び出される関数内でステップカウンタが進められ、次からは case3: ラベルの処理が行われます。
フェードアウトが終了したら、次の画像のための初期化をして最初に戻ります。
この作例では clip1 と clip2 が交互にフェードイン→・・・の動作を無限に繰り返しますが、clip2 がフェードアウトしたら終了させたり、もう１つカウンタを用意して指定の回数だけ繰り返すようにすることも可能です。


画像が増えた時は、clip ＋通し番号でインスタンス名を付け、変数 image_max を画像の枚数に変更してください。
変数 fade_spd を変更すると、フェードイン/アウトの速さが変わります。
なお、どうしてもこのような命名規則でインスタンス名を付けられない事情がある場合は、配列変数にインスタンス名を登録しておき、この配列変数を順番に参照してインスタンス名を取得することで対応できます。
機会がありましたら、配列変数を使う方法も研究してみてください。

この回答へのお礼

詳しい説明をありがとうございました。

お礼日時：2005/09/26 14:47