In this Flash tutorial you will learn how to use tweens in Actionscript 3.0. Tweens are basically a way of animating a movie clip over a number of seconds with Actionscript code. A tweened movie clip can be moved, resized or faded using the Tween class. The Tween class also provides different easing methods. These methods can cause the objects to accelerate or deceleration during an animation. (EaseIn & EaseOut).
To use Tweens you will need to add the following two lines of code at the start of your code:
The first line of code imports the Tween class from the fl.transitions base class. As mentioned above the Tween class uses Actionscript code to move, fade and resize movie clips to be animated over a number of seconds. The second line of code imports the all the easing classes from fl.transitions base class. As briefly mentioned above, the easing class creates an easing effect which causes an object to accelerate or deceleration during an animation.
For more information on these classes checkout the:
‘AS3 Tween Components Reference’ and the ‘AS3 fl.transitions.easing Components Reference’.
Tweens in Actionscript 3 - part 1
Open a new Flash AS3 file.
Select the rectangle tool and draw a rectangle shape on the stage. You can choose whatever colour you wish, I have selected #FF0000 colour. Your rectangle should looks something like below:
Convert your rectangle into a symbol by pressing F8. Give your symbol an appropriate name, check movie clip and click ok. Now give your rectangle the instance name: rectangle_mc
On the timeline create a new layer called “Action”. Select the first frame and hit F9 to open up the action panel and enter the following code:
var myTween:Tween = new Tween(rectangle_mc, "x", Strong.easeOut, 0, 300, 5, true);
1. The code above creates a new instance of the tween class with name “myTween”.
- The first parameter is object you want to animate.
- The second parameter is the property you want to affect. Some of the other properties you can affect are: y, z, width, scaleX, scaleY, scale Z, rotationX, rotationY, and rotationZ.
- The third parameter is the name of the easing function. You can also use Back, Bounce, Elastic, None, Regular, and Strong.
- The fourth parameter is the starting position of the object.
- The fifth parameter is the ending position of the object.
- The sixth parameter is the duration of the motion.
- The seventh parameter is the useSeconds. This specifies whether you want to use seconds or frames. Choose true for frames and false for seconds.
Test your tween Ctrl + Enter. You should see your rectangle movie clip from left to right in five seconds.
>You should now be able to use Tweens in Actionscript 3.0.
Check back later for Tweens in Actionscript 3.0 part 2 where I will discuss the other Tween properties.