[Tips] Using Tweener

I hope you are still having a good weekend through this week. And if you remember a few post back then regarding the usage of Tweener, it has became an essential tool for me, if not, a neccessity for me in building a Flash project, faster and more efficient.

Like the good ol’ MC TWEEN, a spiritual succesor towards Tweener, you can download the free class files at http://code.google.com/p/tweener/

In this post I will go through a sweet short usage introduction that is enough to entice you to try more. Compared to MC TWEEN, in which you will have always declare :

#include mc_tween.as;

...at the start of every flash file, contrary to Tweener, you have to only do this, just like importing class for BitmapData or BlurFilter. Like :

import caurina.transitions.*;

But how do you use it? Unlike, MC TWEEN that only requires installation through a MXP package (double click and install through Macromedia extension), you need to place the classes in a correct folder. I will share with you on how to prepare your Flash to use Tweener.



Step 1 : Go to Tweener website at http://code.google.com/p/tweener/


Step 2 : Click on Downloads, or alternatively, you can download directly from the Featured Downloads link at the right of the page.

Step 3 : Select the Class file that best suite your preference, I will choose AS2 at the moment, it shouldn’t differ too much with AS3.

Step 4 : Once the link is clicked, the download will proceed immediately. Unzip the folder to your Desktop/Finder after download is completed.


Step 5 : This step here is purely optional, but I practice this because it really help to boost up my productivity and organize my Flash Files altogether. Adapted from Lee Brimelow’s tutorial, I will usually have a “Flash” folder on my Desktop that stores all my external Classes (Papervision, etc etc) and my experimentats. In this case, I will put the extracted caurina folder into Classes for all my AS2 files, this applies to any classes that is for AS3. Reason? It is best to have a separate Class folder for both AS version to avoid mixup and overwriting.

Step 6 : Now we will go into Flash and add our own Class Folder. Go to Preferences inside Flash (Ctrl + K for PC and CMD+K for Mac).

Step 6.2 : Select Actionscript from the left menu and Actionscript 2.0 Settings on the bottom right.


Step 6.3 : It will now pop a window for you to specify the location of the Class folder. Press on the plus (+) sign to add a new directory for this. And click on the Target button to find/browse the specified folder.

Step 6.4 : Select the correct folder which stores all of the external classes.

Step 7 : We will now proceed with our first experiment on using Tweener. It is really simple, which I will provide the example file on the end of this sharing. Create a new document with a movieclip that is named as “box” as its instance name. On the first frame and layer a/s, we will initilize the Flash file with importing the Tweener class.
By doing : import .caurina.transitions.*;
We will now try to move the box from the left side of the stage to the right end of the stage. Additionally, it will fade out after it reaches the right side. Awesome?

Step 8 : We will start with moving the box from left to right with the syntax as below :

Tweener.addTween(box,{_x:400,time:1,transition:"easeIn"})

Test the movie and it should slide gracefully from the left side of the screen to the right. Okay now, you might think on what about making more crazy stuff? Before going into that detail, the code is compromise of the name of the movieclip you need to control, and inside the {} curly bracket, you will then need to specify what you want the movie clip to do. It’s that easy!

There are a lot of syntax that you can explore and refer from the online documentation at :
http://hosted.zeh.com.br/tweener/docs/en-us/
But the most common used by me are : _x, _y, _xscale, _yscale, _frame, _color, _alpha, _autoAlpha
And you might think what are those? _autoAlpha?! basically it’s some really cool predefined animations that set to tween your movieclip to alpha 0, and make it disappear (_visible = false) automatically!

Step 9 : Now for the magic, we will add another line as :

Tweener.addTween(box,{_alpha:0,delay:0,time:1,transition:"easeIn"})

Notice the delay there? It is the same amount of time (in second) as the first tweening, that means the second code of tweening will wait in line until the first one finishes in 1 second. Experiment around. You will be amazed.

Extra note : For starter or intermediate learner, you might be stunned with all these examples that you can find at http://tweener.googlecode.com/svn/trunk/examples/. Head on to gotoAndLearn() as well for those recent tutorials that made use of a lot Tweener.

[ Download Tutorial File ]