杜增强.COM-TweenLite (AS3) - A Lightweight (2K) Yet Powerful

TweenLite (AS3) - A Lightweight (2K) Yet Powerful

TweenLite (AS3) - A Lightweight (2K) Yet Powerful Tweening Engine

Posted in Tweening by jack on the September 11th, 2007

Version 4.8, Updated 9/13/2007

Compatibility: Flash Player 9 and later (ActionScript 3.0) (click here for the ActionScript 2.0 version)
File Size added to published SWF: About 2Kb

> DOWNLOAD CLASS FILE AND SAMPLES NOW <

Tweening. We all do it. Most of us have learned to avoid Adobe's Tween class in favor of a more powerful, less code-heavy engine (Tweener, Fuse, MC Tween, etc.). Each has its own strengths & weaknesses. A few years back, I created TweenLite because I needed a very compact tweening engine that was fast and efficient (I couldn't afford the file size bloat that came with the other tweening engines). It quickly became integral to my work flow. I figured others might be able to benefit from it, so I released it publicly. Over the past few years, I received a lot of positive feedback.

Since then, I've added new capabilities while trying to keep file size way down (2K). TweenFilterLite extends TweenLite and adds the ability to tween filters including ColorMatrixFilter effects like saturation, contrast, brightness, hue, and even colorization but it only adds about 3k to the file size. Same syntax as TweenLite. There are AS2 and AS3 versions of both of the classes ready for download.

I know what you're thinking - "if it's so 'lightweight', it's probably missing a lot of features which makes me nervous about using it as my main tweening engine." It is true that it doesn't have the same feature set as the other tweening engines, but I can honestly say that after using it on almost every project I've worked on over the last few years (many award-winning flash apps for fortune-500 companies), it has never let me down. I never found myself needing some other functionality. You can tween any property (including a MovieClip's volume and color), use any easing function, build in delays, callback functions, pass arguments to that callback function, and even tween arrays all with one line of code. You very well may require a feature that TweenLite (or TweenFilterLite) doesn't have, but I think most developers will use the built-in features to accomplish whatever they need and appreciate the streamlined nature of the class(es).

Just the other week (a few years after I created the original TweenLite), I stumbled upon the Tweener class from Zeh Fernando, Nate Chatellier, and others (they did a great job by the way) which is remarkably similar syntax-wise, so if you're a Tweener user, it should be very easy to get your brain around using TweenLite.

I haven't been able to find a faster tween engine either. The syntax is simple and the class doesn't rely on complicated prototype alterations that can cause problems with certain compilers. TweenLite is simple, very fast, and more lightweight than any other popular tweening engine.

Click here for the ActionScript 2.0 version

Minimize file size
Minimize the amount of code required to initiate a tween
Tween multiple properties with a single call (including a MovieClip's volume and color)
Maximize performance
Build in the ability to call any function when a tween has completed and pass any number of parameters to that function
Build in the ability to call any function when a tween starts and pass any number of parameters to that function
Allow the user to set a delay before the tween takes effect (useful when looping through an array and you want to have tweens activate in a sequential way)

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). For example:
  - 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()).
  Special Properties:
  - delay: The number of seconds you'd like to delay before the tween begins. This is very useful when sequencing tweens
  - 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
  - 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.
  - 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(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(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(target:Object);

Description: Provides an easy way to kill all tweens of a particular Object/MovieClip.
Parameters:
1. target: Any/All tweens of this Object/MovieClip will be killed.

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:
1. function: Any/All delayed calls to this function will be killed.

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:clip_mc.y - 100, ease:Elastic.easeOut});

Can I set up a sequence of tweens so that they occur one after the other?
Of course! 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:
1. import gs.TweenLite;
2. TweenLite.to(clip_mc, 2, {mcColor:0xFF0000});
3. TweenLite.to(clip_mc, 1, {y:300, delay:2, overwrite:false});
Do the properties have to be in a specific order?
Nope. The only thing that matters is that the first parameter is the object you're tweening, the second parameter is the time (in seconds), and the third parameter contains all the properties you want to tween (in any order). So TweenLite.to(clip_mc, 1, {scaleX:120, y:200, x:1}) is the same as TweenLite.to(clip_mc, 1, {x:1, y:200, scaleX:120});
Why are TweenLite and TweenFilterLite split into 2 classes instead of building all the functionality into one class?
1. File size. Only a portion of projects out there require tweening of filters. Almost every project I work on uses TweenLite, but only a few require tweening filters (TweenFilterLite). TweenLite is 2k whereas TweenFilterLite is 5k. Again, one of the stated purposes of TweenLite is to minimize file size & code bloat. If someone only wants to use TweenFilterLite, fine. But I think many people appreciate being able to use the most lightweight option for their needs and shave off the 3k when possible.
2. Speed. Tweening filters is a more complex task. There are additional if/else statements and calculations in the rendering loop inside TweenFilterLite which could potentially slow things down a bit, even for non-filter tweens (I doubt anyone would notice a difference unless they’re running hundreds or thousands of simultaneous tweens, but I’m a big fan of keeping things as efficient & fast as possible)
Do I have to pay for a license to use this code? Can I use it for commercial purposes?
Feel free to take the code and use it as you wish, even for commercial purposes. Some people have requested the ability to donate money to reward the work I put into the class(es), so i put a PayPal "donate now" button at the top and bottom of the page, but you certainly don't need to donate anything. I'm just glad to help the Flash community.
Are TweenLite and TweenFilterLite better than Tweener, Fuse, MC Tween, and all the other tweening engines out there?
Maybe, maybe not. It all depends on your objectives, coding style, etc. I certainly don't claim that TweenLite & TweenFilterLite are superior to all other tweening engines, but in terms of the power-to-file-size ratio, I certainly haven't seen anything that comes close. Feedback has been overwhelmingly positive. I've used TweenLite for many years and it has never let me down. I've never found myself needing features that are available in another tweening engine. But hey, to each his own.

I'm happy to share this class with whoever can put it to good use. I don't even mind if it's used in commercial projects. I'd love it if you dropped me a line to let me know it helped you in some way, and maybe even send me a link to the site in which it was used. If you're eager to reward the time & effort I put into this, I have a PayPal account that you can contribute to, but it isn't necessary.