Tweening in Flash is the process of creating an animation based on the start frame and end frame. You can use tweening for animations and special effects in your application to make it more dynamic.

First we are going to work with Flash internal classes, and then we will move on to some popular open-source classes to see the differences between them. This will help you understand how things work and maybe choose what’s best for you.

To download the source files used for this tutorial, click here .

Setup scene

Create a new Flash File (for AS3). The dimensions of the stage should be about 550 x 400. Next we will draw three shapes on the stage, each one converted to a MovieClip with an instance name (look in the picture bellow).

Flash Transitions

First, we have to import the necessary classes.

Code block

import fl.transitions.Tween;
import fl.transitions.easing.*;

The first line is to import the Tween, the second one is to import the Easing classes (used for effects). The constructor of the Tween Class looks like this:

Tween(obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean = false)

And the actual code looks like this:

Code block

var _flashTransitions:Tween = new Tween(_flash, "x", Elastic.easeOut, 0, 300, 3, true);

It’s a good practice to declare a variable for the tween to have more control.
So far we have initialized our tween, the object parameter is the _flash MovieClip on the stage. We are changing its “x” propriety from its initial position ( 0 ) to the next finish position ( 300 ). Duration is used to set the speed of animation. For this animation we are using Elastic.easeOut easing effect. Another great thing is we can add events listeners to this animation. These are some of the events:
motionChange:  Indicates that the Tween has changed and the screen has been updated.
motionFinish:    Indicates that the Tween has reached the end and finished.

This is how they work:

Code block

import fl.transitions.TweenEvent;
_flashTransitions.addEventListener(TweenEvent.MOTION_CHANGE, MotionChange);
_flashTransitions.addEventListener(TweenEvent.MOTION_FINISH, MotionFinish);
function MotionFinish():void
{
trace("in motion");
}
function MotionChange():void
{
trace("finish");
}

First we’ve added the TweenEvent class, then the event listeners to our tween variable. Test the movie to check everything works as it should.
Caurina’s Tweener
Tweener syntax was created with simplicity of use in mind, while still allowing access to more advanced features. It follows a ‘one-line’ command when creating new tweenings, with no instancing required (as it’s a static Class). Also, there are no initialization methods required by Tweener, other than ‘import’ command.
Let’s see how it looks:
Tweener.addTween(_object:Object, {_parameters:Object});

And the code:

Code block

import caurina.transitions;
Tweener.addTween(_caurina, {x:300, time:3, transition:"easeOutElastic"});

Our object parameter is _caurina MovieClip. The “x” parameter is the ending point of our tween. Tweener takes the object start position automatically. Next is the speed of the animation and finally the effect we are going to use.
As you see, there is not much difference of what we’ve previously used. Now comes the cool part. Let’s add some events to this animation. All we have to do is add two more parameters.

onUpdate  equivalent to motionChange in Flash
onComplete equivalent yo motionFinish in FLash

We are going to change the tween code like this:

Code block

import caurina.transitions;
Tweener.addTween(_caurina, {x:300, time:3, transition:"easeOutElastic" onUpdate:CaurinaChange,  onComplete:CaurinaComplete});
function CaurinaChange():void
{
trace("caurina in motion");
}
function CaurinaComplete():void
{
trace("caurina finish");
}

That’s it ! You don’t have to import more classes and write another line of code. Pretty simple and clean.
If you test the movie, you will see the same results.
If you are using the Tweener you should know that it ads extra 8kb to your movie size. If you want to know more about Tweener you just have to take a look at the documentation of this package.
TweenMax / TweenLite
Basically,  Tweenmax and TweenLite are the same. The difference is that TweenMax adds more features to TweenLite. I will focus on TweenLite.
The constructor of the TweenLite looks like this:
TweenLite(target:Object, duration:Number, vars:Object);
And the code:

Code block

import com.greensock.TweenLite;
var _tweenLite:TweenLite = TweenLite.to(_tweenmaxlite,3, {x:300, ease:Elastic.easeOut});

Code block

import com.greensock.TweenLite;
var _tweenLite:TweenLite = TweenLite.to(_tweenmaxlite,3, {x:300, ease:Elastic.easeOut, onUpdate:TweenLiteUpdate, onComplete:TweenLiteComplete });

A project using TweenLite is going to have an extra 4.7kb added to its size.
Conclusion
If you run all three examples, you will see they all do the same thing. You can change almost every proprety of the object that we want to tween, from position to scaling or alpha. The main difference is that the last two examples are easy to write and clean. If you are going to make a project that doesn’t  need to many effects, it’s better to use TweenLite or Tweener ( it’s a matter of taste and size added to the resulting .swf ). For projects with elaborated effects I suggest using TweenMax as it has some nice extra features.
————————————
FireCode is a promising project created by a couple of passionate Flash developers. Our purpose is to help you understand how Flash works and show you how to develop or customize your components.
We hope you enjoyed this tutorial. Don’t forget to visit our portfolio here and to send us your questions or suggestions!