Flash AS3 Tutorials Center | Interesting Flash Animation Tutorials | Valuing Flash Animation Tutorials | Flash ActionScript and Animation Home

AS3 Beginner Tutorials | AS3 Basic Lessons | AS3 Valuing Courses | AS3 Components Tutorials | AS3 and PHP Interaction Tutorials
AS3 Practical Tutorials | AS3 Animation Techniques | AS3 Transition Effects Tutorials | AS3 Download Upload Files | AS3 Particle Systems
Communication Between Flash Movies with AS3 | AS3 and JavaScript interaction | AS3 Matrix Transformation | AS3 Physics Simulation Tutorials

ActionScript Sequence Animation with Tween Class

In this last Flash ActionScript tutorial of Tween Class animation, we do sequence animation (e.g. linear movement at start, follow by rotation, then resize, and finally linear movement again, etc.) with Tween Class.

Please update flash player to view this Flash ActionScript tutorial!

Flash Tutorial Content:

This Flash ActionScript Tween Class animation tutorial shows how to do sequence animation with Tween Class. Unlike multiple animation shown in previous actionscript tutorial, the animation of sequence animation follow one by one (e.g. linear movement at start, follow by rotation, then resize, and finally linear movement again, etc.)

The complete Flash Movie of this tutorial is shown as above. The square MovieClip will move from the left top corner to the middle right of the stage, then do rotation, follow by change the width and height, then finally move from the left to the right. You can do as many sequence animation as you need with Tween Class.

Flash ActionScript Codes:

//Tween class lets you to move, resize, and fade movie clips
import fl.transitions.Tween;

//easing classes lets you do some elastic motion of movie clips
import fl.transitions.easing.*;

//import the TweenEvent class
//allow create a listener to catch the event when a tween finish.
import fl.transitions.TweenEvent;

//Declare and use later
var tweenX:Tween;
var tweenY:Tween;
var tweenAlpha:Tween;
var tweenRotation:Tween;
var tweenWidth:Tween;
var tweenHeight:Tween;
var tweenReturn:Tween;

//
//1st Tween Animation Set (tweenX, tweenY and tweenAlpha)
//

//Let's do the Tween animation in x-axis
//Some explanation
//football_mc = instance name to animate
//"x" = moving in x-axis
//Easing Class = Regular (Others are Back, Bounce, Elastic, Strong and None)
//Easing Method = easeOut (Others are easeIn, easeInOut, easeNone)
//easeOut = moving slower and slower when approaching destination)
//football_mc.x = start location in x co-ordinate (you can use number here)
//x2 = final location after moved in x co-ordinate (you can use number here)
//Duration = 3 seconds
//true = animated using seconds (false = animated using frames)
tweenX = new Tween(square_mc, "x", Regular.easeOut, 70, 350, 3, true);

//Tween animation in y-axis
tweenY = new Tween(square_mc, "y", Regular.easeOut, 70, 150, 3, true);

//Alpha animation
tweenAlpha = new Tween(square_mc, "alpha", Regular.easeOut, 0, 1, 3, true);

//
//2nd Tween Animation (tweenRotation)
//

//Listen when tweenX (linear motion) finish.
//Starts RotationTween when tweenX finish
tweenX.addEventListener(TweenEvent.MOTION_FINISH, RotationTween);

 

function RotationTween(evt:TweenEvent):void {

//Rotation tween animation
tweenRotation = new Tween(square_mc, "rotation", Regular.easeOut, 0, 360, 3, true);
//Remove tweenX Event Listener after use
tweenX.removeEventListener(TweenEvent.MOTION_FINISH, RotationTween);

//Listen when tweenRotation (Rotation motion) finish.
//Starts widthTween when tweenRotation finish
tweenRotation.addEventListener(TweenEvent.MOTION_FINISH, widthTween);

}

 

//
//3rd Tween Animation Set (tweenWidth and tweenHeight)
//

 

function widthTween(evt:TweenEvent):void {

//Width tween animation
tweenWidth = new Tween(square_mc, "width", Regular.easeOut, square_mc.width, square_mc.width + 50, 3, true);
//Height tween animation
tweenHeight= new Tween(square_mc, "height", Regular.easeOut, square_mc.height, square_mc.height + 50, 3, true);
//Remove tweenRotation Event Listener after use
tweenRotation.removeEventListener(TweenEvent.MOTION_FINISH, widthTween);

//Listen when tweenWidth (Width motion) finish.
//Starts tweenGoBack when tweenWidth finish
tweenWidth.addEventListener(TweenEvent.MOTION_FINISH, tweenGoBack);

}

 

//
//4th Tween Animation (tweenReturn)
//

 

function tweenGoBack(evt:TweenEvent):void {

//Return tween animation
tweenReturn = new Tween(square_mc, "x", Regular.easeOut, square_mc.x, 70, 3, true);

//Remove tweenRotation Event Listener after use
tweenWidth.removeEventListener(TweenEvent.MOTION_FINISH, widthTween);

//Listen when tweenReturn (Return motion) finish.
//Starts another Tween Animation when tweenReturn finish
//Add another Listener here if there are more animation

}

 

//
//Another Tween Animation
//

 

//Another function here if there are more animation

 

function displayLocation(evt:Event):void {

//Display location of the Footabll in the Message TextField.
output_txt.text = "Location of square: " + Math.round(square_mc.x) + "," + Math.round(square_mc.y) + "\n" + "Alpha of square: " + Math.round((square_mc.alpha * 100))/100 + "\n" + "Width of square: " + Math.round(square_mc.width) + "\n" + "Height of square: " + Math.round(square_mc.height);

}

 

stage.addEventListener(Event.ENTER_FRAME, displayLocation);

Download Flash Source File:

Flash Source File tween-animation-5.fla

Remarks:

This Flash ActionScript tutorial showed how to do sequence animation with Tween Class.