Using The Tween Class in Flash ActionScript

By Blue_Chi | Flash 8 | Intermediate

The Tween class is used to create smooth animations using ActionScript by providing us with various controls for changing the value of any object properties over a period of time or frames. Using the Tween class for animation has many advantages over using traditional timeline motion tweens as it offers great flexibility and tighter control, makes it possible to set the animation duration in seconds instead of frames, allows us to create non-linear animations, and makes the updating process of animations easier. The animation shown in the example below is controlled by an instance of the Tween class. Read on to learn how to use it.

The Tween class could be used to animate any property of a given movieclip, once an instance of the Tween class is created, you simply assign to it the property you wish to animate, the beginning and the end value of the property, the duration for which it has to run and the easing method by which the animation should flow. We will create an example to let you understand how this works in practice.

Example

In a new Flash movie, draw a circle or any other shape, convert it to Movie Clip symbol and assign the instance name myBall_mc to it. 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 then to see the trick. Explanation will follow.

import mx.transitions.Tween;
import mx.transitions.easing.*;

var myHoriTween:Tween = new Tween (myBall_mc,"_x",Strong.easeOut,0,400,2,true);

myHoriTween.onMotionFinished = function (){
this.yoyo()
}

Explanation

We will go through the code bit by bit.

import mx.transitions.Tween;
import mx.transitions.easing.*

Before we can use the Tween class in our movie we have to import it, it is possible to import the classes on the go each time it gets used, but if you are going to use it multiple times it is easier to import the whole package once at the start. The first line imports the Tween class itself and the second imports the easing package which we will use to control the way the tween acts.

var myHoriTween:Tween = new Tween (myBall_mc,"_x",Strong.easeOut,0,400,2,true);

We need to create an instance of the Tween class to control a specific property of the object we intend to animate. The Tween constructor is usually formatted in the following manner:

var tweenInstanceName:Tween = new Tween (object, property, function, begin, end, duration, useSeconds)

The tween instance name is the variable name we will use to refer and manipulate the tween later on, you can use any valid identifier as its name. Tween is set as the datatype of the object. The object is the instance name of the object you wish to animate, it can be any object to which you can assign an instance name (movie clip, button, text, etc.). The property is the scale, _x position, _y position, _alpha or whatever property you wish to tween, the property has to be passed as a String (i.e. between quotation marks). The function is the type of tween to use (we will explain this one later). The begin parameter is the starting value for the animation, the end parameter is the ending value for the animation, the duration is a duration in seconds or frames, the useSeconds is a Boolean to set the duration amount in seconds or frames, the default value of it is true. Using seconds for the duration allows you to use fractions of a second as the value, the duration will be measured in frames and only whole numbers will be accepted as values for the duration.

Going back to the function parameter of the Tween constructor, the function to be placed there is the easing class which shall dictate the way the tween will be animated, the easing class must be further customized using the easing method for it to work. We will first explore the easing classes:

  1. Regular: the animation will gradually increase or decrease in speed as specified by the easing method.
  2. Bounce: the animation will bounce back a few steps when it reaches the end position before settling at it.
  3. Back: the animation 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 emphasised Regular effect.
  6. None: no special tweening, the object movement will not speed up along the path.

Each of these functions must be then 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.

Describing how these various effects look like using words is quite difficult, you can easily explore the different combinations to see how they play in action. Here are a couple of examples:

var myHoriTween:Tween = new Tween (myBall_mc,"_x",Bounce.easeOut,100,500,4,true);

var myHoriTween:Tween = new Tween (myBall_mc,"_x",Back.easeInOut,100,500,4,true);

Tween Methods

Tween classes could be further manipulated using methods, these are commands that instruct the tween to take certain actions, the most basic examples of these are .stop and .resume. Here is a list of all the methods available to the Tween class:

These methods are invoked directly onto the instance of the tween class:

myHoriTween.stop();

We will be able to illustrate a better example after going through the event handlers below.

Tween Event Handlers

Event handlers are tools that you could use to trigger code when a specific event has occurred such as the completion of the animation. Event handlers are used directly on the instance of the Tween this way:

myTween.onMotionFinished = function (){
trace("Do Something!");
}

Here are the available event handler for the Tween class:

The example which we used in the movie shown at the beginning of the tutorial uses the .onMotionFinished handler along with the .yoyo() method to create a looping animation. This code makes the tween play back in reverse each time the motion of it is completed.

myHoriTween.onMotionFinished = function (){
this.yoyo()
}

Tween Properties

It is also possible to access and modify some of the properties of the tween instance such as the duration and the position of it, here is the complete list the list of accessible properties:

For example, we can trace the position of the tween as it runs using the .onMotionChanged event handler this way:

myHoriTween.onMotionChanged = function (){
trace (this.position);
}

Conclusion

Those were the main highlights of the tween class, experiment with it to learn more about creating complex and non-linear effects. Feel free to post at the Oman3D Forum if you have any questions.

- End of Tutorial.