Creating Animations Using the AS3 Tween Class

By Riyadh Al Balushi | Flash CS3 | ActionScript 3.0 | Beginner

The Tween Class lets us create simple animations easily in ActionScript by specifying the starting and ending points of an object animation positions. This tutorial will teach you everything you need to know about the Tween Class, it's basic usage, easing variations, Tween methods, and Tween Events as well. The movie below shows an image moved around using the Tween Class.

You might be interested in checking our tutorial on using the TransitionManager Class which can be used as alternative to the Tween Class for creating richer transition effects instead of use simple animations.
This tutorial is written for the AS3 Tween Class. We have another tutorial for the AS2 Tween Class.

This tutorial will be divided in the following sections:

  1. Basic Usage of the Tween Class
  2. Easing Variations
  3. Tween Methods
  4. Tween Events
  5. Misc Tween Properties

Basic Usage of the Tween Class

The Tween Class is a ActionScript class that can be used to tween any property of any object. By the term tween we mean here the gradual increase or decrease of the value of a property which can bring about an animation. This could be the increase of transparency, the decrease in width, or the movement from left to right of any object.

The Tween Class is not included by default in a Flash movie and must be imported before it can be used, Adobe did this to ensure to help making SWF files smaller so that the Class is included only in movies that require it. To import this class you must use the import directive at the beginning before you start your actual code. Here is the code you need:

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

The Tween Class must be used through an instance of it. When instantiating the Tween Class you must provide the parameters required by the TWeen Class. This process is done by the manner illustrated in the following generalized code:

var myTween:Tween = new Tween(object, "property", EasingType, begin, end, duration, useSeconds);

All of these parameters must be provided when the class is instantiated. Here is what these parameters mean:

  1. object - This is the instance name of the object which will be animated. Example: my_box, gallery_mc, myTextField_txt.
  2. property - This is the name of the property which will be animated, it must be specified as a string (between quotation marks). Example: "alpha", "scaleX", "scaleY", "x", "y".
  3. EasingType - The easing type will determine how the tween animation will flow. We are going to explain this more in the next section of the tutorial. Examples: Strong.EaseIn, Elastic.EaseOut, Back.EaseInOut.
  4. begin - This is the position from which the animation will start, it must be specified as a number.
  5. end - This is the position at which the animation will stop, it must be specified at as a number.
  6. duration - This is the period for which the animation will run, the default unit for it is frames, however, the unit can be set in seconds if you set the next parameter as true.
  7. useSeconds - Set this parameter to true if you want to the duration to be measured in seconds instead of frames.

So for example, if we want to move an object called my_box along the x axis, from position 40 to position 300 in an animation that takes 5 seconds we would write it this way:

var myTween:Tween = new Tween(my_box, "x", Strong.easeOut, 40, 300, 5, true);
I intentionally did not talk about the EasingType because we will cover that in the next section below.

Running your own example

Create a new AS3 Flash movie, draw a square or any other shape, convert it to Movie Clip symbol (press F8 to do this) and assign the instance name my_box to it using the Properties Inspector. You will then have to right-click the only frame on the timeline and access the Actions panel. Paste the code below and test your movie (Ctrl+Enter) to see it move:

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


var myTween:Tween = new Tween(my_box, "x", Strong.easeOut, 40, 300, 5, true);

You can animate different properties and try out different values by changing the parameters. For example to make your object fade out make alpha decrease from 1 to zero in 10 seconds:

var myTween:Tween = new Tween(my_box, "alpha", Strong.easeOut, 1, 0, 10, true);

Using Easing Classes to Alter Tween Motion

It is possible to alter the motion flow of the tween by using different easing classes. Easing is the acceleration or the deceleration of the speed at which the object is moving. It is quite hard to explain in words, but it is easy to understand by just looking at it (Check the example below).

There are basically six easing types:

  1. Regular: the motion speed will gradually increase or decrease in speed as specified by the easing method.
  2. Bounce: the motion will bounce back a few steps when it reaches the end position before settling at it.
  3. Back: the motion will go beyond the end position before bouncing back into it.
  4. Elastic: a mixture of Bounce and Back effects combined.
  5. Strong: a more emphasized Regular effect.
  6. None: no easing, the motion will not speed up.

Each of these functions must be then be configured using one of the easing methods to determine at which part of the tween it shall apply the effect, i.e. at the start of it, the end of it, both, or none:

  1. easeIn: - The tween effect is applied to the start of the animation.
  2. easeOut: - The tween effect is applied to the end of the animation.
  3. easeInOut: - the tween effect is applied to the start and end of the animation.
  4. easeNone: - no tweening effect is applied, to be used with the None tween function.

You should now be able to use the Tween Class to animate any object you wish. The rest of the tutorial will explain Tween Methods, which are actions that can be performed on the Tween, Tween Event, which are events that can be reacted to by the player, and a couple of Tween Properties which can be helpful in advanced projects.

Tween Methods

The Tween Class has several methods which let you command it to take specific actions such as (a) stopping the tween at any time, (b) playing it over again, or (c) telling it to play in reverse. Each of the methods below are to be applied directly onto an instance of the tween class.

The example below creates a Tween, but then instantly stops it. An event listener is attached to a button that tells the tween to start when the button is clicked. As you can see, the methods are directly invoked on the instance of the Tween Class.

var myTween:Tween = new Tween(my_box, "alpha", Strong.easeOut, 1, 0, 10, true);
myTween.stop();

my_btn.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent){
myTween.start();
}

Tween Events

Tween Events let us track what is happening to the Tween and react to certain events such as the completion of the tween motion. This is helpful when you want to, for example, play a certain frame after the tween finishes.

The TweenEvent Class provides the following events:

All of these events can be registered by the Tween by using the .addEventListener() method and specifying a listener function - just like all other events in AS3. The example below registers the Tween instance with the MOTION_FINISH event and executes the .yoyo() method when it's done. This effectively makes the tween loop forever.

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

var myTween = new Tween(my_mc, "x", Strong.easeInOut, 100,300, 1, true);

myTween.addEventListener(TweenEvent.MOTION_FINISH, onFinish);
function onFinish(e:TweenEvent):void {
myTween.yoyo();
}
Please review the AS3 Event Handling Tutorial to learn more about this subject.

It is worth noting at this instance that it is possible to refer to the tween by using the keyword target from within the listener function instead of explicitly writing down the instance name. Here is an updated example:

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

var myTween = new Tween(my_mc, "x", Strong.easeInOut, 100,300, 1, true);

myTween.addEventListener(TweenEvent.MOTION_FINISH, onFinish);
function onFinish(e:TweenEvent):void {
e.target.yoyo();
}

This can let the event listener be used with more than one tween at the same time as it does not explicitly refer to an actual tween - a good idea for saving time and making things more organized.

Misc Tween Properties

In this final short section of the tutorial I will tell you about two properties of the Tween Class which can be accessed to retrieve information you might need. Both of these properties must be accessed directly from the instance of the Tween Class. Here they are:

These two properties are the most commonly used tween properties. If you would like to learn about the other ones which are not commonly used please refer to the ActionScript reference.

This concludes our tutorial. I hope that you learnt something helpful. Feel free to post any questions or comments you have the Oman3D Forum.

- End of Tutorial.