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.
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 {
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:
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.