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 Tween Class Animation with Easing Methods

This Flash ActionScript tutorial demonstrate the use of Tween Class animation effects with different easing Methods.

Please update flash player to view this Flash ActionScript tutorial!

Flash Tutorial Content:

In previous Flash Actioncript Tween Class animation tutorial, we used the Regular easing Class and easeOut easing Method. Actually, you can also use other easing Methods, for example, easeIn, easeInOut, easeNone. This flash tutorial shows the Tween Class animation effects with the other easing methods.

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 flash movie will show how the football moves with different easing Methods.

Flash ActionScript Codes:

//Use ComboBox controls
import fl.controls.ComboBox;

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

//Add items to the easingMethodComo
easingMethodCombo.prompt = "Select easing Method";
easingMethodCombo.addItem( {label: "easeIn" } );
easingMethodCombo.addItem( {label: "easeOut" } );
easingMethodCombo.addItem( {label: "easeInOut" } );
easingMethodCombo.addItem( {label: "easeNone" } );

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

//Declare the easeMethod
var easeMethod:Function;

 

function runSelectedIndex(evt:MouseEvent):void {

//selectedIndex of prompt message is -1
//selectedIndex of first item is 0
if (easingMethodCombo.selectedIndex == -1) {
output_txt.text = "Please select an easing Method!";
return;
} else if (easingMethodCombo.selectedIndex == 0) {
easeMethod = Regular.easeIn;
output_txt.text = "easing Method: easeIn" + "\n" + "Starts motion from a zero velocity and then accelerates motion as it executes.";
} else if (easingMethodCombo.selectedIndex == 1) {
easeMethod = Regular.easeOut;
output_txt.text = "easing Method: easeOut" + "\n" + "Starts motion fast and then decelerates motion to a zero velocity as it executes.";
} else if (easingMethodCombo.selectedIndex == 2) {
easeMethod = Regular.easeInOut;
output_txt.text = "easing Method: easeInOut" + "\n" + "Combines motion of the easeIn() and easeOut() methods. Starts motion from a zero velocity, accelerate motion, then decelerate to a zero velocity.";
} else if (easingMethodCombo.selectedIndex == 3) {
easeMethod = None.easeNone;
output_txt.text = "easing Method: easeNone" + "\n" + "No easing Method apply. Motion remains steady from beginning to end";
}

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

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

}

 

blueButton_btn.addEventListener(MouseEvent.CLICK, runSelectedIndex);

 

//Function to reset football to original location
function resetLocation(evt:MouseEvent):void {

football_mc.x = 70;
football_mc.y = 70;
output_txt.text = "";

}

 

reset_btn.addEventListener(MouseEvent.CLICK, resetLocation);

Download Flash Source File:

Flash Source File tween-animation-2.fla

Remarks:

Now you learned the animation effects with different easing Methods (easeOut, easeIn, easeInOut, easeNone). The next flash actionscript tutorial will show the animation effects with the other easing Classes, for example, Back, Bounce, Elastic, Regular, Strong and None).