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

Windmill rotation effect in AS3

In this tutorial you will learn how to create a windmill rotation effect in Actionscript 3. This effect gradually increases the speed of the windmill when the mouse is pressed, and gradually decreases the speed when the mouse is released. I have drawn the windmill in Flash, but you can also use an image if you wish.


Windmill rotation effect in AS3

Step 1

Open a new AS3 Flash file and create the windmill arms like below. I have used the Pen tool to draw the arms, but you can use an image if you wish.

Step 2

Convert the windmill arms into a movie clip F8. Choose the centre registration point and give the windmill the instance name: arms. Now add the windmill movie clip into another movie clip F8, and give the instance name: windmill. Inside this movie clip, on the timeline insert a new layer underneath the windmill arms layer and draw the wind mill legs like below.

Step 3

On the main timeline insert a new layer call 'Actions' then open up the Actions panel and enter the following code:

var speed:Number = 0;
var minSpeed:Number = 0;
var maxSpeed:Number = 20;
var increaseNum:Number = 0.8;
var decreaseNum:Number = 0.4;

//Boolean to check if mouse has been clicked.
var clicked:Boolean;

//This creates a click area on the stage using a sprite with
//the same size as the stage's width and height. The mouse down
// and up event listeners are added to the sprite.
var clickarea:Sprite = new Sprite();
clickarea.graphics.beginFill(0x000000, 0);
clickarea.graphics.drawRect(0,0,stage.stageWidth, stage.stageHeight);
clickarea.graphics.endFill();
clickarea.buttonMode = true;
clickarea.addEventListener(MouseEvent.MOUSE_DOWN, downHandler);
clickarea.addEventListener(MouseEvent.MOUSE_UP, upHandler);
addChild(clickarea);


//These functions set the click variable to true if the mouse is down
//and false if the mouse is up.
function downHandler(e:MouseEvent):void{
clicked = true;
}

function upHandler(e:MouseEvent):void{
clicked = false;
}


//Adds an enter frame event to the stage.
stage.addEventListener(Event.ENTER_FRAME, enterHandler);


//This function increase the speed if the mouse is down, and
//decrease the speed if the mouse is up.s
function enterHandler(e:Event):void{

windmill.arms.rotation += speed;

if(clicked){
increaseSpeed();
}else{
decreaseSpeed();
}
}


//This function increases the speed. If the speed is greater
//than the max speed then the speed is set to the max speed.
function increaseSpeed():void {
speed = speed + increaseNum;
if (speed > maxSpeed)     speed = maxSpeed;
}

//This function decreases the speed. If the speed is less
//than the min speed then the speed is set to the min speed.
function decreaseSpeed():void {
speed = speed - decreaseNum;
if (speed < minSpeed) speed = minSpeed; 
}    

Step 4

Export the movie Ctrl + Enter. Now press down on the windmill and it will gradually speed it, and release the mouse and it will gradually slow down. 

Play videos consecutively using AS3

In this quick tip I will show you how to play videos consecutively using the FLVPlayback component in Actionscript 3.

You will need an instance of the FLVPlayback component in the library which can be found on the menu bar by selecting Windows > Components > Video and dragging the component into the library. For more information on the FLVPlayback component take a look at the documentation.

import fl.video.FLVPlayback;
import flash.events.Event;

//Arrays of videos
var videoArray:Array = new Array('vid1.flv',  'vid3.flv',  'vid3.flv');

//Array index
var index:uint = 0;

//This adds the FLVPlayback component on the stage and plays the first video
//in the array.
var video:FLVPlayback = new FLVPlayback();
video.play(videoArray[0]);
video.addEventListener(Event.COMPLETE, videoHandler);
addChild(video);

//This function plays the next video when the current video has finished playing.
function videoHandler(e:Event):void{
(index >= videoArray.length) ? index = 0 : index++;     
video.play(videoArray[index]);
}