The Idea Behind the Tricks

The ActionScript 3 Tween class can "tween" any numerical property of any object. "Tween" means change the value of the property over a specified time interval in a specific manner with, for example, one of many available AS3 easing functions applied. Most often the property being "tweened" is the x or the y coordinate of a MovieClip, or its rotation, or its alpha property. Changes in these properties directly create motion or produce change in appearance. This is not how we use the Tween class in the example below:

In the example above, we create an auxiliary object, 'paramObj' with a property, 't'. The object itself is not a display object; it doeas not appear on the Stage in any way. It is simply an instance of the Object class. We apply the Tween class to 'paramObj' and its property 't' to change the property 't' over 5 seconds, between the values 0 to 360, with 'Bounce.Back' easing function applied. Then we use the Tween class's event TWEEN_CHANGE to capture the changes in 't' and use them to change over time the x and the y coordinates as well as the rotation property of the red rectangle. The red rectangle is contained in a Shape called 'shBlock'. How do we change the x, y coordinates of shBlock for changing values of 't'? We change them in a way that makes shBlock travel along the circle. More specifically, we use simple equations for a circle with 't' representing the angle in degrees:

x(t)=radius*cos(t*pi/180),  y(t)=radius*sin(t*pi/180).

A mathematically-inclined person will recognize right away that we are using 't' as a parameter in a parametric representation of a circle. A mathematically-inclined person will also notice that a choice of a circle is arbitrary: we can use any parametric curve: x=x(t), y=y(t), and make the rectangle follow that curve in a tweened fashion.

Download

Download the fla file for the applet above.

The Code

Below, we put our comments as comments within the code to keep the flow clear.

 

//The following classes are needed for this application.

 

import fl.transitions.Tween;

import fl.transitions.TweenEvent;

import fl.transitions.easing.*;

/*
We store the easing function and the circle radius in variables so we can easily make changes.
*/

var curEase:Function = Bounce.easeOut;

var rad:Number=150;

/*
The next object is the key idea in this tutorial. This construct creates an object called 'paramObj' with a single property 't' that is initially set to 0. We will be tweening the t property of this object and then tying the motion of the square to this changing property.
*/

var paramObj:Object = {t:0};

/*
Instead of using the Object literal syntax as we did above: 'var paramObj:Object={t:0};', you could use the following syntax: 'var paramObj:Object = new Object(); paramObj.t=0;'
*/

/*
We use a global variable, tw, for the tween that will be created on the click of the btnPlay button.
*/

var tw:Tween;

/*
We will draw the circle, the stop line, shStopLine, and the red rectangle, shBlock, in a Sprite 'spBoard'. spBoard makes it easier to handle x and y coordinates. spBoard is positioned in the center of the Stage.
*/

var spBoard:Sprite=new Sprite();

var shBlock:Shape=new Shape();

var shStopLine:Shape=new Shape();

this.addChild(spBoard);

spBoard.x=this.stage.stageWidth/2;

spBoard.y=this.stage.stageHeight/2;

spBoard.addChild(shStopLine);

spBoard.addChild(shBlock);

/*
We call a function defined later in the script that draws the circle, the red block, and the stop line.
*/

prepElems();

/*
When the 'click to move' button is pressed, we hide the button, contruct the tween, and start listening for the tween change event so we can move the red block based on the changes of the tweened property 't'.
*/

btnPlay.addEventListener(MouseEvent.CLICK, startMotion);

 

function startMotion(me:MouseEvent):void {

 

//Hide the button. It will be restored when the tween has finished.

 

btnPlay.visible = false;

 

/*

Constructing (and starting) the tween that runs paramObj.t from 0 to 360

over a 10 second period. (t will represent the angle in the circular motion.)

*/

 

tw = new Tween(paramObj, "t", curEase, 0, 360, 10, true);

tw.addEventListener(TweenEvent.MOTION_CHANGE, mover);

tw.addEventListener(TweenEvent.MOTION_FINISH, stopper);

 

}

 

function mover(tevt:TweenEvent):void {

 

/*

Any number of tasks tied to the value of paramObj.t can be executed here.

We move the block around the circle of radius 'rad' with t representing

the angle, in degrees. We also rotate shBlock based on the value of t.

*/

 

shBlock.x = rad*Math.cos(Math.PI * paramObj.t/180);

shBlock.y = rad*Math.sin(Math.PI * paramObj.t/180);

shBlock.rotation = paramObj.t;

 

}

 

function stopper(tevt:TweenEvent):void {

 

//Remove the listeners and restore the button.

tw.removeEventListener(TweenEvent.MOTION_CHANGE, mover);

tw.removeEventListener(TweenEvent.MOTION_FINISH, stopper);

btnPlay.visible = true;

 

}

 

function prepElems():void {

 

spBoard.graphics.lineStyle(1,0xCCCCCC);

spBoard.graphics.drawCircle(0,0,rad);

shStopLine.graphics.lineStyle(1,0x0000FF);

shStopLine.graphics.moveTo(-30,0);

shStopLine.graphics.lineTo(30,0);

shBlock.graphics.lineStyle(1,0x000000);

shBlock.graphics.beginFill(0xFF0000,1.0);

shBlock.graphics.drawRect(-10,-13,20,26);

shBlock.graphics.endFill();

shStopLine.x=rad;

shStopLine.y=shBlock.height/2;

shBlock.x=rad;

shBlock.y=0;

 

}

 

A Look at the Tween Class Constructor

The reson the code above works is a great flexibilty of the AS3 Tween class. Let's look at the class constructor and the parameters that it takes:

new Tween(obj:Object,prop:String,func:Function,begin:Number,

finish:Number,duration:Number,useSeconds:Boolean=false);

'obj' represents any object, a display object or not. 'prop' represents the name of a property of this object. 'func' is the easing function to be used by the tween (the 'Bounce.easeOut' function above). 'begin' the beginning value of the property, 'finish' the end value. The tween will change the value of 'prop' from 'begin' to 'finish'. 'duration' represents the duration of the tween. How is the duration measured? If 'useSeconds' parameter is set to 'true' - in seconds. If the parameter is set to 'false' (the default), the duration is measured in number of frames. In the latter case, the actual duration depends on the number of frames as well as the frame rate of your movie.

On the text page, we illustrate the built-in AS3 easing functions that can be used with an instance of the Tween class.

Back to Intermediate Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.