Sequential movie clip delay in AS3

In this quick tip I will show you three ways of sequentially delaying movie clip animation using Actionscript 3. You will need the TweenNano class which can be downloaded from greensock.com. My examples assume you have four movie clips on the stage with the instance names: mc1, mc2, mc3 and mc4.

In the first example I have used the Timer Class with a delay of one second a repeat count of four. This will create four, one seconds delays. Everytime the moveCircle function is called, the counter increments and each movie clip moves to 50 pixels in the y axis after an one second delay.

import com.greensock.TweenNano;

var counter:Number =-1;
var mcArray:Array = [mc1, mc2, mc3, mc4];

var myDelay:Timer=new Timer(1000, mcArray.length );
myDelay.addEventListener(TimerEvent.TIMER, moveCircles);
myDelay.start();

function moveCircles(event:TimerEvent):void {
         counter++;
         TweenNano.to(mcArray[counter], 2,{y:50});
}

The second example uses the delay property in the TweenNano class as an alternative to using the Timer class. I have put the TweenNano.to() method inside a For loop which sets a delay for each of the movie clips.

import com.greensock.TweenNano;

var mcArray:Array = [mc1, mc2, mc3, mc4];
var len:uint = mcArray.length;

for(var i:uint = 0; i < len; i++){
        TweenNano.to(mcArray[i], 2, {y: 50, delay: i * 2});
}

The third example uses the onComplete property in the TweenNano class to call the playNextBall function. The playNextball function increments the counter and calls the startBall function if the current count is less than the number of items in the array.

import com.greensock.TweenNano;

var mcArray:Array = [mc1, mc2, mc3, mc4];
var counter:uint = 0;

function startBall():void{
   TweenNano.to(mcArray[counter], 2, {y: 50, onComplete:playNextBall});
}

function playNextBall():void{
   if(counter != mcArray.length-1){
       counter++;
       startBall();
   }
}

startBall();

The three examples above all delay the movement of the y position. The same code can be used to delay the other properties of the movie clip such as the x, rotation, height etc. I have delayed the alpha property in the example below.

import com.greensock.TweenNano;

var mcArray:Array = [mc1, mc2, mc3, mc4];
var len:uint = mcArray.length;

for(var i:uint = 0; i < len; i++){
   mcArray[i].alpha = 0;
   TweenNano.to(mcArray[i], 2, {alpha: 1,  delay: i * 2});
}

You can also use the TweenMax's allFrom method to achieve the same effect. Although this method uses slightly more memory.

import com.greensock.TweenMax;

var mcArray:Array = [mc1, mc2, mc3];

TweenMax.allFrom(mcArray, 0.5, {alpha:0}, 0.5);

Related tutorials
Time delay in Actionscript 3
Delay function in Actionscript 3