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

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

Please update flash player to view this Flash ActionScript tutorial!

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:

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.