Actionscript 3 Tweening

cat
We can create animations on flash’s timeline but if you want to create dynamic behaviour, using actionscript to animate is very handy. In most cases we need to use a “tweening engine” to mirror what the motion tweens do for us when we’re working on the timeline. The tweening engine is a little library of code that will handle the complex details of animation and allow us to focus on what we want, where, and when. Flash has a built in tween engine, and there are also many other simple to use tweening engines for actionscript.

To access flash’s built in as3 tweening engine we have to import its classes as such:

import fl.transitions.Tween;        // this brings in the main tween engine
import fl.transitions.easing.*;     // this allows us to use easing controls for more elaborate movement

To tween a movie clip symbol we would create a command like this:

var myTweenX:Tween = new Tween(mc_circle, "x", Strong.easeOut, 0, 300, 3, true);

In the above line of code the first argument is mc_circle. This is the movie clip object that will be tweened.

The second argument is “x” which is the property to be tweened. Other properties could be animated such as “width” or “alpha”.

The third argument is Strong.eastOut which is the type of transition.

0 is the start position in pixels.

300 is the end position in pixels.

3 is the amount of time in seconds to tween.

True indicates that we want to use seconds as the unit of time.

Practical Example:

In this example a movie clip object will detect if the mouse is over top of it and be tweened to a random nearby position. (A hermit circle).

The Flash plugin is required to view this object.

Download .FLA source file

For more information read the adobe language reference on Tween. If you scroll down to the title called Constructor it will tell you which arguments do what.
Here is a good tutorial on using Flash’s built in tweening system.

One of my favourite 3rd party tweening engines is called Tweener. I find it to be cleaner to work with than flash’s built in tween engine.

How to use Tweener (Video Tutorial)

Another engine called TweenLite is faster and more streamlined, but will require a little bit more to setup. It is good for situations where you need to constantly move hundreds of objects on screen.

This entry was posted in Actionscript, Articles, Intermediate, Tutorials and tagged , , , , . Bookmark the permalink. Trackbacks are closed, but you can post a comment.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*