[AS3]自動的に画像が重なっていくスライドショー

質問

ASに触れたての初心者です。
Actionscript3.0で、ボタンなどを使わない、ただ画像を順次流すだけのスライドショーが作りたいです。

何もないステージに、まずムービークリップ「Images1」が２秒くらかけて画面上からスライドして来ます。
ステージぴったりに収まった（座標が0,0になった）ところで２秒ほどImages1を見てもらいます。
次に、Images1の上にトランプが重なるように、新たなMC、「Images2」が同じような動作で降りてきます。
これも、ステージにぴたりと合わさったところで２秒ほど静止し、その上からさらに「Images3」が同じような動作で重なっていきます。
これをImages5くらいまで順次重ねていって、不要になった層は適時削除していきたいです。
Images1を「スライドしてくる」「数秒とどまる」「消える」といった動作はできたのですが、それをmages5まで繰り返させるのが全く解りませんでした…。
タイムライン上だけで作ると惜しいものができたのですが、Images5までいってImages1に戻ったときに、Images5の上からImages1を重ねるという操作がわからず、タイムラインで作るのを諦めました。
いったいどのようにスクリプトを組んだら良いのでしょうか？
大変困っています。どなたかお願い致します。

現時点のスクリプトは以下のとおりになります。
import flash.utils.Timer;
import flash.display.MovieClip;
import flash.events.TimerEvent;

//ムービークリップ
var Images1:Sprite = new Sprite();
Images1.graphics.beginFill(0x000000);
Images1.graphics.drawRect(0, 0,300,-500);
Images1.graphics.endFill();
addChild(Images1);

//移動
this.addEventListener(Event.ENTER_FRAME,timerfunc);
function timerfunc(e:Event):void
{
Images1.y=Images1.y+10;//スライド
if(Images1.y>500)Images1.y=500;//スライドのとまる場所
timer1.start();//タイマースタート
}

//一定時間待ってから消えるタイマー
var timer1:Timer = new Timer(6000,1);
timer1.addEventListener(TimerEvent.TIMER, timerHandler1);
function timerHandler1(e:TimerEvent):void{
removeChild(Images1);
removeEventListener(TimerEvent.TIMER, timerHandler1);
removeEventListener(Event.ENTER_FRAME,timerfunc);
}

回答No.1

BlurFiltan · ベストアンサー

> タイムライン上だけで作ると惜しいものができたのですが、
> Images5までいってImages1に戻ったときに、
> Images5の上からImages1を重ねるという操作がわからず、
> タイムラインで作るのを諦めました。

と書かれていらっしゃいますが，
そこら辺をどうするかを "具体的にイメージする" ということができなければ
結局何でやっても同じだと思いますよ。。。

何にしてもまずは具体的な動作シナリオ(アルゴリズム(手品のタネ))のイメージを作って
そのイメージ通りに動くように
タイムラインで動きを作ったり，
ActionScriptをコーディングしたりするわけですから。

タイムラインで作る方法は
定番中の定番の方法ですが下の【添付図】↓をご参考に。

【添付図】↓を見てイメージは湧きましたか？
本来，これくらいの仕組みは自力で考え出さなければなりません。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

次にスクリプトです。

例えばメインタイムラインのフレーム1など，
フレームに書くスクリプト例です↓。

//---------------------------------------------
//Imagesの色分け用に色指定する配列を適当に作成
var colArr:Array=[0xFF0000,0x00FF00,0x0000FF,0xFFFF00,0x00FFFF];

//スプライト Images1～Images5 を一気に作成＆配置
for (var i:int=1; i<=5; i++) {
this["Images"+i] = new Sprite();
this["Images"+i].graphics.beginFill(colArr[i-1]);
this["Images"+i].graphics.drawRect(0, 0,300,-500);
this["Images"+i].graphics.endFill();
addChild(this["Images"+i]);
}

//２秒後に関数「startImages」を実行するタイマーを用意
var myTimer:Timer=new Timer(2000,1);
myTimer.addEventListener(TimerEvent.TIMER, startImages);

//カウンタ用の変数cntを用意
var cnt:int=0;

//Images○の動作を開始させる関数「startImages」の定義
function startImages(e:TimerEvent):void {
//カウンタをカウントアップ
cnt = (cnt<5)? cnt+1:1;
//動かす「Images○」のy座標を0にする
this["Images"+cnt].y=0;
//動かす「Images○」の表示順を一番上(最高深度)に移動
this.setChildIndex(this["Images"+cnt], this.numChildren-1);
//毎フレーム 関数「moveImages」を実行
this.addEventListener(Event.ENTER_FRAME,moveImages);
}

//関数「moveImages」の定義
function moveImages(e:Event):void {
//「Images○」をスライド
this["Images"+cnt].y+=10;
//「Images○」のy座標が500以上になれば
if (this["Images"+cnt].y>=500) {
//「Images○」のy座標を500で固定して
this["Images"+cnt].y=500;
//毎フレーム 関数「moveImages」を実行するのを解除
this.removeEventListener(Event.ENTER_FRAME,moveImages);
//タイマースタート(２秒後に「startImages」が実行される)
myTimer.start();
}
}

//関数「startImages」を初回実行
startImages(null);
//---------------------------------------------

タイムラインで作るにしてもスクリプトで作るにしても
やはりどちらにしても肝腎なのは，
具体的な動作シナリオのイメージでしょうね。

お礼

ありがとうございます！お蔭様で、理想的な動きができました！感謝致します。
一行一行説明を入れてくださっているので、とてもわかりやすく、またカスタマイズしやすく非常に助かりました！
画像の添付までありがとうございます。同じようなかたちで作成していたのですが、gotoAndPlayからの指定を、私はこの図で言うと７フレーム目に指定しておりました。思うような動作ができなかったのは、もしかしてそれが原因だったのかもしれません…。（そこにも怪しいASを書いていたので、そちらが原因かもしれませんが…）
お恥ずかしながら、「できる所から作ってみよう」として作った結果がこれです…。きちんと頭でシナリオを組み立てられるように、がんばろうと思います。

また今回のものとは別の制作物などで、BlurFiltanさんが過去にされた回答に、何度も助けられました。何回も見返して、勉強させていただいております。
そのBlurFiltanさんにご回答いただけて、本当に嬉しいです。
この場でお礼申し上げます。本当にありがとうございました！