Thursday, 28 July 2011

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

2 comments:

markerlineable 17 August 2013 at 13:59  

Hi. This is a great little tidbit! I was wondering how you managed to create the reset button. I've used your technique in an extended fashion on a grid of 10x10 movie clips (100 movie clips, that is, not 10x10 pixels) and the sequence works well but I can't reset it with the code that I have.

iliketo 19 August 2013 at 14:04  

@markerlineable,

Can you post the reset code you are using?

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP