AS3 tweening platform

Introduction

TweenLite is an Actionscript 3 tweening class written by Jack Doyle, GreenSock The purpose of this page is to have a printable version of the manual part of Tweenlite's homepage and to add some more examples at later stage....

Please refer to the TweenLite homepage and also consider donating something to Jack.

Usage

TweenLite.to

TweenLite.to(target:Object, duration:Number, variables:Object);

Description: Tweens the target's properties from whatever they are at the time you call the method to whatever you define in the variables parameter.

Parameters:

1. target: Target MovieClip (or any object) whose properties we're tweening
2. duration: Duration (in seconds) of the tween
3. variables: An object containing the end values of all the properties you'd like to have tweened (or if you're using the TweenLite.from() method, these variables would define the BEGINNING values). Putting quotes around values will make the tween relative to the current value. For example, x:"-20" will tween x to whatever it currently is minus 20 whereas x:-20 will tween x to exactly -20.

Properties you can change in the variables object:

Example (clip_mc refers to a movie clip you got on your stage or in your code).

TweenLite.to(clip_mc, 1.5, {alpha:0.5, x:120, volume:0});

• alpha: The alpha (opacity level) that the target object should finish at (or begin at if you're using TweenLite.from()). For example, if the target.alpha is 1 when this script is called, and you specify this parameter to be 0.5, it'll transition from 1 to 0.5.
• x: To change a MovieClip's x position, just set this to the value you'd like the MovieClip to end up at (or begin at if you're using TweenLite.from()).
• y: To change a MovieClip's yx position (like above).
• delay: The number of seconds you'd like to delay before the tween begins. This is very useful when sequencing tweens
• scaleX: Scaling in X direction
• scaleY: Scaling in Y direction
• rotation: Clock-wise rotation in degrees.
• ease: You can specify a function to use for the easing with this variable. For example, fl.motion.easing.Elastic.easeOut. The Default is Regular.easeOut (and Linear.easeNone for volume).
• autoAlpha: Same as changing the "alpha" property but with the additional feature of toggling the "visible" property to false if the alpha ends at 0. It will also toggle visible to true before the tween starts if the value of autoAlpha is greater than zero.
• volume: To change a MovieClip's volume, just set this to the value you'd like the MovieClip to end up at (or begin at if you're using TweenLite.from()).
• mcColor: To change a MovieClip's color, set this to the hex value of the color you'd like the MovieClip to end up at(or begin at if you're using TweenLite.from()). An example hex value would be 0xFF0000. If you'd like to remove the color from a MovieClip, just pass null as the value of mcColor.
• onStart: If you'd like to call a function as soon as the tween begins, pass in a reference to it here. This can be useful when there's a delay and you want something to happen just as the tween begins.
• onStartParams: An array of parameters to pass the onStart function.
• onUpdate: If you'd like to call a function every time the property values are updated (on every frame during the time the tween is active), pass a reference to it here.
• onUpdateParams: An array of parameters to pass the onUpdate function (this is optional)
• onComplete: If you'd like to call a function when the tween has finished, use this.
• onCompleteParams: An array of parameters to pass the onComplete function (this is optional)
• overwrite: If you do NOT want the tween to automatically overwrite any other tweens that are affecting the same target, make sure this value is false.

TweenLite.from

TweenLite.from(target:Object, duration:Number, variables:Object);

Description: Exactly the same as TweenLite.to(), but instead of tweening the properties from where they're at currently to whatever you define, this tweens them the opposite way - from where you define TO where ever they are now (when the method is called). This is handy for when things are set up on the stage where the should end up and you just want to animate them into place.

Parameters: Same as TweenLite.to(). (see above)

TweenLite.delayedCall

TweenLite.delayedCall(delay:Number,onComplete:Function,onCompleteParams:Array);

Description: Provides an easy way to call any function after a specified number of seconds. Any number of parameters can be passed to that function when it's called too.

Parameters:

1. delay: Number of seconds before the function should be called.
2. onComplete: The function to call
3. onCompleteParams [optional] An array of parameters to pass the onComplete function when it's called.

TweenLite.killTweensOf

TweenLite.killTweensOf(target:Object);

Description: Provides an easy way to kill all tweens of a particular Object/MovieClip. Parameters:

• target: Any/All tweens of this Object/MovieClip will be killed.

TweenLite.killDelayedCallsTo

TweenLite.killDelayedCallsTo(function:Function);

Description: Provides an easy way to kill all delayed calls to a particular function (ones that were instantiated using the TweenLite.delayedCall() method). Parameters:

• function: Any/All delayed calls to this function will be killed.

Examples

As a simple example, you could tween the alpha to 50% (0.5) and move the x position of a MovieClip named "clip_mc" to 120 and fade the volume to 0 over the course of 1.5 seconds like so:

import gs.TweenLite;
TweenLite.to(clip_mc, 1.5, {alpha:0.5, x:120, volume:0});

If you want to get more advanced and tween the clip_mc MovieClip over 5 seconds, changing the alpha to 50% (0.5), the x coordinate to 120 using the Back.easeOut easing function, delay starting the whole tween by 2 seconds, and then call a function named "onFinishTween" when it has completed and pass in a few parameters to that function (a value of 5 and a reference to the clip_mc), you'd do so like:

import gs.TweenLite;
import fl.motion.easing.Back;
TweenLite.to(clip_mc, 5, {alpha:0.5, x:120, ease:Back.easeOut,
          delay:2, onComplete:onFinishTween, onCompleteParams:[5, clip_mc]});
function onFinishTween(parameter1_num:Number, parameter2_mc:MovieClip):void {
 trace("The tween has finished! parameters: " + parameter1_num + ", and " + parameter2_mc);
  }

If you have a MovieClip on the stage that is already in its end position and you just want to animate it into place over 5 seconds (drop it into place by changing its y property to 100 pixels higher on the screen and dropping it from there), you could:

import gs.TweenLite;
import fl.motion.easing.Elastic;
TweenLite.from(clip_mc, 5, {y:"-100", ease:Elastic.easeOut});

Sequence of tweens so that they occur one after the other. Just use the delay property and make sure you set the overwrite property to false (otherwise tweens of the same object will always overwrite each other to avoid conflicts). Here's an example where we colorize a MovieClip red over the course of 2 seconds, and then move it to a _y coordinate of 300 over the course of 1 second:

import gs.TweenLite;
TweenLite.to(clip_mc, 2, {mcColor:0xFF0000});
TweenLite.to(clip_mc, 1, {y:300, delay:2, overwrite:false});