Basic Flash ActionScript Animation with Tween Class

This Flash ActionScript tutorial series show how to do animation with Tween Class. Flash animation with Tween Class is very easy and simple without much coding. The first tutorial use Tween Class to animate a football, moving from one location to a target location

Flash ActionScript Tween Class animation tutorial example display here. Your flash player version is too old to see this flash animation example!

Flash Tutorial Content:

Flash animation with Tween Class with ActionScript 3 is simple and easy without much coding. The simplest Tween animation requires only one line of code.

The complete Flash Movie of this tutorial is shown as above. The football will move from the left top corner to the center of the stage. To replay the movie, please refresh the browser.

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 = 200;
var y2:Number = 200;

//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(football_mc, "x", Regular.easeOut, football_mc.x, x2, 3, true);

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

function displayLocation(evt:Event):void {

//Display location of the Footabll in the Message TextField.
output_txt.text = "Location of ball: " + Math.round(football_mc.x) + "," + Math.round(football_mc.y);

}

stage.addEventListener(Event.ENTER_FRAME, displayLocation);

Download Flash Source File:

tween-animation-1.fla

Remarks:

This Flash ActionScript Tween Class tutorial use the Regular easing Class and easeOut easing Method. Actually, you can also use other easing methods, for example, easeIn, easeInOut, easeNone. The next Flash ActionScript tutorial will show the animation effects with the other easing methods.