Jun 14

[Learn] Using TweenLite

ActionScript, Flash AS3, Flash Engines, Learn, Tutorial

TweenLite is a light-weight tweening engine for AS2 and AS3.

Tweening engines make animating objects through code a breeze. Instead of figuring out how to get to a certain point or value of an object’s property, all you need to do is figure out where you want that property to be (or where you want it to come from), the time it takes to get there, and you have movement.

There are a lot of tweening engines out there, but I prefer TweenLite because it is light (only 3kb), it is easy to use, does what I want it to do, and if I want more functionality, it has two older brothers*.

To get started, first you need to download TweenLite (I’ll be discussing the AS3 version here), and save it into your classpath.

There are 2 static methods you need to know, TweenLite.to() and TweenLite.from().

Those two methods take in three arguments:

• The object you want to animate
• The time, in seconds, the animation will span
• A dynamic Object instance target with predefined properties (this is where you put the values you want to reach)

So, to animate a box, it only takes one line to make it do some crazy stuff.

import gs.TweenLite; // import TweenLite

box_mc.x = 0;
box_mc.y = 100;

TweenLite.to(box_mc, 2, {x: stage.stageWidth, y: 200, rotation: 360, scaleX: 2, scaleY:2, alpha: .5});
//this will move the box to the edge of the stage, move it down 100 px, rotate it, scale it to 2x its
//size, and make it transparent, for 2 seconds.

Note that the TweenLite.from() method does the exact opposite of TweenLite.to(). It transforms your object to your third argument properties, and animates them towards the state the object has on the stage (very useful).
There are comments in the .as file itself, and explains some important things. This was to show how useful and indispensible tweening engines are. I can’t beleive how long I’ve strayed away from them, but now, I can’t live without them.

*TweenFilterLite - TweenLite + filtering capabilities
TweenMax - TweenFilterLite + bezier curves