jump to navigation

Using TweenLite with Flash CS3 (the basics) August 1, 2010

Posted by Tournas Dimitrios in Actionscript.

Have you had trouble with Adobe’s Tween class? (Used for so called “easy” ActionScript animation of display objects) I sure have, so I thought I’d write a post about it. When I was first taught how to animate with ActionScript, I had many a lock up and stutter from the Tween class. For awhile I was quite annoyed, seeing the benefit of animation using ActionScript but thinking that it was totally unreliable. Now there are a number of methods to fix the problems with Tween, using Dictionaries, new objects and so on; all of which seemed tedious and time consuming. Thankfully, I found a better solution, third party tweening engines! I’m going to tell you about what I think is the best one, TweenLite.

TweenLite (and the Greensock Tweening Platform) is simple, powerful, fast and reliable. Greensock has many awesome classes, generously available for free, all of which are (so far as I understand) maintained by one person. You can get them at http://www.greensock.com/

I’ll just go through a few features with you now. First of all the TweenLite object has two main methods, to() and from(). With these you can change and object’s properties, from their current value to a new value at a certain rate. from() works similarly; it sets the properties of an object to what you specify, and then moves those properties back to what they were. So you can tween object’s in both directions.

Let’s experiment with to():

import com.greensock.TweenLite;

TweenLite.to(object, 1.25, { x: 20, y: 45, alpha: .8, customProperty: 20.36 });

The first parameter is the object you want to perform a tween on. The second is the amount of time you want the tween to take. And the third is an object literal of properties you want to change. In this case these properties will be moved to the values specified. TweenLite can modify any numerical property of an object, making some really powerful stuff possible.

Next I’ll talk about a few of the special properties, they are: onStart, onComplete, ease, and delay. Here’s a definition of them:

  • onStart – A function that should be called when the tween begins (when its currentTime is at 0 and changes to some other value which can happen more than once if the tween is restarted multiple times).
  • onComplete – A function that should be called when the tween has finished
  • ease – Use any standard easing equation to control the rate of change. For example, Elastic.easeOut. The Default is Quad.easeOut.
  • delay – Amount of delay in seconds (or frames for frames-based tweens) before the tween should begin.

Let’s try and use the ease property first :

import com.greensock.TweenLite;

import com.greensock.easing.*;

TweenLite.to(object, 1.25, { x: 20, y: 45, alpha: .8, customProperty: 20.36, ease: Sine.easeOut });

Note the extra import, we must import the easing classes to be used with the tween. You can use all the standard easing equations, and a few extras to my knowledge.

Now for the rest of those properties:

import com.greensock.TweenLite;</p>
TweenLite.to(object, 1.25, { x: 20, y: 45, alpha: .8, customProperty: 20.36,
   ease: Sine.easeOut,  onStart: startFunction,
   onComplete: completeFunction, delay: 3});

So this tween will trigger startFunction() when it starts, completeFunction() when it ends, and will wait 3 seconds before starting.

That’s just the tip of the iceberg, but the engine has great documentation, so go to http://www.greensock.com/ and check it out. The purpose of this post was not to rewrite the documentation, but to get your feet wet and show you a better way to tweening

Must read tutorial from the official site here >>>

See these screen casts :

Actionscript Animation with TweenLite by Nils Millahn

TweenLite Easing by Nils Millahn

Real-world Actionscript: Animated Menu using TweenLite by Nils Millahn

Real-world Actionscript: TweenLite onComplete by Nils Millahn :

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s