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

Flash ActionScript Multiple Animation with Tween Class

This Flash animation tutorial shows how to do multiple animations (e.g. linear movement, rotation, change of alpha, change of width and height, etc.) at the same time with Tween Class.

Please update flash player to view this Flash ActionScript tutorial!

Flash Tutorial Content:

Flash animation with Tween Class is not limit to single animation at a time. This tutorial shows how to do multiple animations (e.g. linear movement, rotation, change of alpha, change of width and height, etc.) at the same time with Tween Class.

The complete Flash Movie of this tutorial is shown as above. Please select the Movie Clip to get start and play around to see how it works. The square MovieClip will do some animations (rotation, change alpha, change width and change height) at the same time while moving from the left top corner to the middle right of the stage.

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.*;

//Destination location the specified movie clips will move to
var x2:Number = 350;
var y2:Number = 150;

//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)
var tweenX:Tween = new Tween(square_mc, "x", Regular.easeOut, square_mc.x, x2, 3, true);

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

//Rotation tween animation
//Begin with 0 degree
//Finish with 360 degree
//i.e. rotate from 0 degree to 360 degree in 3 seconds
var tweenRotation:Tween = new Tween(square_mc, "rotation", Regular.easeOut, 0, 360, 3, true);

//Alpha tween animation
//Begin with 0 alpha (0% visible)
//Finish with 1 alpha (100% visible)
//i.e. from 0% visible to 100% visible in 3 seconds
var tweenAlpha:Tween = new Tween(square_mc, "alpha", Regular.easeOut, 0, 1, 3, true);

//Width tween animation
//Begin with the original width of square_mc
//Finish with (the original width of square_mc + 50)
//i.e. increase the width of square_mc by 50 in 3 seconds
var tweenWidth:Tween = new Tween(square_mc, "width", Regular.easeOut, square_mc.width, square_mc.width + 50, 3, true);

//Height tween animation
//Begin with the original height of square_mc
//Finish with (the original height of square_mc + 50)
//i.e. increase the height of square_mc by 50 in 3 seconds
var tweenHeight:Tween = new Tween(square_mc, "height", Regular.easeOut, square_mc.height, square_mc.height + 50, 3, true);

 

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-4.fla

Remarks:

You can also do sequence flash animation easily with Tween Class. The next flash tutorial will do sequence animation (e.g. linear movement at start, follow by rotation, then resize, and finally linear movement again, etc.) with Tween Class.