cBlog

The Tweener Class

Introduction

Simple enough, Tweener is a class for creating tweens in Flash.  Tweener surpasses and replaces, at least for me, the standard Flash Tween class.  I have this opinion not only because I just like it and its easy to use, but for two main reasons: frame animation and garbage collection, which I will go into more detail later on.

How do I get Tweener and how do I use it?

Using the Tweener class is much like the standard Flash class, except this is not internally packaged so you have to import it into Flash.  First, go to google code to download the class: http://code.google.com/p/tweener/ - here you will find news, info, downloads, links, and other data.  Click on downloads and click the link with as3 in it.  You will now have a folder called caurina - put this folder into the directory with your Flash file.  Then when you create your Flash file and want to use Tweener, just type the following line of code:

import caurina.transitions.*;

The * symbol just indicates that you will import all of the files in the transitions directory.

So now you have it imported - how do you tween something with it?  Say you want your movie clip, which has an instance name of box_mc, to tween to an x value of 100 and at the same time scale to double size, all in 0.5 seconds.  You would write the following line of code:

Tweener.addTween(box_mc, {x:100, scaleX:2, scaleY:2, time:0.5});

That’s it!  It’s nice, clean, and compact.  Basically you write

Tweener.addTween(your_movie_clip, {property:value, property:value,
time:number_in_seconds});

You can also use functions like onComplete:function and pass through function parameters as an array with onCompleteParams:[value, value].

The great things about Tweener

There are many reasons why I like Tweener.  First, here are the 2 main reasons:

Garbage collection.  In the Flash Player when your movie runs, the internal engine disposes of garbage data - this could be variables, urls, images, etc.  I have run into many problems using the standard Flash Tween class that has to do with garbage collection.  No matter how I declared variables and initiated the tweens, it could somehow malfunction; very buggy.  Tweens have stopped mid-animation, several tweens at the same time can collide and crash, and many other scenarios.  But with Tweener, I’ve never encountered a problem.  I think Tweener is very stable as the standard Flash Tween class was not.

Frame animation.  For years, Flashers have struggles with the issue of rewinding movie clips.  I’ve tried and seen many Flashers create scripts that say

movie_mc.onEnterFrame = function() {
     this.prevFrame();
}

and that sort of thing.  It’s never been stable and never been easy.  Now it is.  With Tweener, you can just tell it to tween the frames as if it were a regular movie clip property.  Simple as that! And there are many other “special” properties that you can tween as easily as that, filters for example!

There are other things that make Tweener great.  Another reason I choose to use it is because its so compact.  When you use the standard Flash Tween class, you had to create a new tween for every property you tween.  Using Tweener, you can call a tween and within that line of code, tween as many properties of the movie clip as you want.  And you used to have to indicate where it tweened from and to, whereas with Tweener, you just tell it where to tween to.  For example, to get Flash to tween the movie clip from the position it is already at, you would have to say from movie_mc.x to the new value of 100, whereas now you just say 100.

Enjoy!  Here’s some links that might help you:

Now you know Tweener basics; how to get it and use it in your Flash projects.  For reference and help, take a look at the documentation at http://hosted.zeh.com.br/tweener/docs/en-us/.  Tweener also has different transitions and the google code download page for Tweener also has a cheat sheet that you can download to view all of the different transitions, which is helpful.  And don’t hesitate to ask questions or leave comments here too!