Flash and animation are the two things which do not exist separately. I think Flash was created for animations.

In this article, I would like to describe some techniques which you may use to create Flash animations in code, in your AS2 or AS3 code.

What is the animation in terms of code? My definition is that animation of any object is the smooth changing of its properties, which might have effect on object’s location, shape, size, transparency and so on. The task for actionscript developer is to implement that smooth actions.
[SWF]http://www.flashdaweb.com/blog/files/tween_sample.swf, 550 , 400 [/SWF]
Press the buttons to see the tweens in action in the above sample. Source .fla file is available below.

Tween class

The best helper with any kind of coded Flash animations is Tween class.

//AS2:
#import mx.transitions.Tween;

//AS3:
#import fl.transitions.Tween;

Tween class is a powerful tool for all sorts of animation. It’s very simple to create and use so read on

How does it work.

Tween class allows smoothly change any property of the object from a starting value to an ending value within a proper time period.

Examples: (following properties are of AS2, but they are the same in AS3, only without “_” understroke symbol)

• Motion – Change _x and _y properties of you movie clip to move your object from one point to another

• Fade in/Fade out – Change _alpha property smoothly from 0 to 100 (or from 0 to 1 in AS3) to fade in any of your movie clips/sprites, and vice verca to fade them out.

• Zoom in/Zoom out – Change _xscale/_yscale or _width/_height properties to smoothly zoom your objects

• Spinning – Change _rotation property and your objects will spin.

This list might be quite longer but I think the above are the most common cases which worth to be noticed.

Using Tween class. Howto.

To begin your animation you simply need to create an instance of Tween class and pass all needed values to it.

//AS2
import mx.transitions.*;
import mx.transitions.easing.*;
var as2Tween:Tween = Tween(spriteObj, "_x", Regular.easeOut,
                                           fromX, toX, animPeriod ,true);

//AS3
import fl.transitions.*;
import fl.transitions.easing.*;
var as3Tween:Tween = new Tween(spriteObj, "x", Regular.easeOut,
                                                 fromX, toX, animPeriod, true);

Parameters:

spriteObj – is the object whose property our tween will be modifying
“_x” – property we would like to be smoothly changed
Regular.easeOut – one out of the batch predefined animation styles, read more at Adobe website
fromX – initial value to be set to modified property.
toX – final value the property will be set to upon animation completion.
animPeriod – animation duration in seconds or frames.
last parameter – is a boolean indicating whether animPeriod is measured in seconds (true) or in frames (false).

Note, Tween doesn’t check the current value of the property and in this code sample _x will be set to fromX value at the beginning of the animation. If you would like to move your object from the current position, then use spriteObj._x instead of fromX.
ActionScript classes do mix seconds and milliseconds parameters, here in Tween class animation length is set in seconds if applicable.

Tracking animation status.

Of course, it’s a really useful thing to be able to perform some actions when the animation is finished and to do so Tween class offers its methods for your benefits.

// AS2:
var as2Tween:Tween = Tween(spriteObj, "_x", Regular.easeOut,
                                           fromX, toX, animPeriod ,true);
as2Tween.onMotionFinished = function()
{
      //do whatever you need upon animation completion.
}

//AS3:
var as3Tween:Tween = new Tween(spriteObj, "x", Regular.easeOut,
                                                 fromX, toX, animPeriod, true);
as3Tween.addEventListener(TweenEvent.MOTION_FINISH, onTweenFinished);
//where onTweenFinished is the function of the following type
function onTweenFinished(evntObj:TweenEvent)
{
   //do whatever you need upon animation completion.
}

Please see .fla source files for more information on the code.

Download .fla AS3 and AS2 sources

Additional information.

Please visit our book store for more tips and tricks described in good books that we recommend