TweenFilterLite (AS2 Version) – Easily Tween Filters & Image Effects
IMPORTANT: TweenFilterLite has been rendered obsolete by the new plugin architecture in TweenLite and TweenMax! Read all about the exciting update and watch a video demonstration at the official announcement page.
USAGE
Every call to TweenFilterLite.to() or TweenFilterLite.from() returns a TweenFilterLite instance which you can optionally keep track of in order to have more control. Here are a few examples of how to create instances:
Actionscript:
-
import gs.*;
-
TweenFilterLite.to(mc, 1, {_x:200}); //automatically garbage collects
-
var myTween:TweenFilterLite = TweenFilterLite.to(mc, 1, {_x:200}); //stores a reference to the TweenFilterLite instance, but you're responsible for making sure it becomes eligible for garbage collection when you're finished with it (you can simply set your variable to null, or if it is still in progress, call TweenFilterLite.removeTween(myTween) first)
-
var myTween:TweenFilterLite = new TweenFilterLite(mc, 1, {_x:200}); //identical to the previous line - it just looks more object-oriented.
Each TweenFilterLite instance has the following properties:
- target : Object (changing target after the tween begins has no effect on the tween)
- duration : Number
- timeScale : Number - Multiplier for controlling the speed of the tween. 0.5 = half speed, 1 = normal speed, 2 = double speed, etc. (This value is combined with the globalTimeScale to give you lots of control)
INSTANCE METHODS
TweenFilterLite(target:Object, duration:Number, variables:Object):TweenFilterLite
- Description: Constructor. Property values are tweened from whatever they are at the time the tween begins to whatever you define in the variables parameter. (unless you use "runBackwards:true" which is the same as using TweenFilterLite.from())
- Parameters:
- target : Object - Target object whose properties we're tweening
- duration : Number - Duration (in seconds) of the tween
- variables : Object - An object containing the end values of all the properties you'd like to have tweened (or if you're using the TweenFilterLite.from() method, these variables would define the BEGINNING values). Pass in one object for each filter (named appropriately, like blurFilter, glowFilter, colorMatrixFilter, etc.) Filter objects can contain any number of properties specific to that filter, like blurX, blurY, contrast, color, distance, colorize, brightness, highlightAlpha, etc.
Special Properties:- delay : Number - The number of seconds you'd like to delay before the tween begins. This is very useful when sequencing tweens
- ease : Function - You can specify a function to use for the easing with this variable. For example, gs.easing.Elastic.easeOut. The Default is Regular.easeOut. To build a custom ease, check out the GreenSock CustomEase Builder tool.
- easeParams : Array - An Array of extra parameter values to feed the easing equation. This can be useful when you use an equation like Elastic and want to control extra parameters like the amplitude and period. Most easing equations, however, don't require extra parameters so you won't need to pass in any easeParams.
- autoAlpha : Number - Use it instead of the _alpha property to gain the additional feature of toggling the _visible property to false when _alpha reaches 0. It will also toggle _visible to true before the tween starts if the value of autoAlpha is greater than zero.
- visible : Boolean - To set a MovieClip's "_visible" property at the end of the tween, use this special property.
- volume : Number - Tweens the volume of any MovieClip
- tint : Number - To change a MovieClip's tint, 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.
- removeTint : Boolean - If you'd like to remove the tint that's applied to a MovieClip, pass true for this special property.
- frame : Number - Use this to tween a MovieClip to a particular frame.
- timeScale : Number - Multiplier for controlling the speed of the tween. 0.5 = half speed, 1 = normal speed, 2 = double speed, etc. (hint: if you want to gradually speed up or slow down a tween, you could get fancy and use another tween to tween the timeScale propety!) NOTE: There is also a static TweenMax.globalTimeScale property that affects ALL TweenMax and TweenFilterLite tweens (not TweenLite though)
- roundProps : Array - If you'd like the inbetween values in a tween to always get rounded to the nearest integer, use the roundProps special property. Just pass in an Array containing the property names that you'd like rounded. For example, if you're tweening the _x, _y, and _alpha properties of mc and you want to round the _x and _y values (not _alpha) every time the tween is rendered, you'd do: TweenFilterLite.to(mc, 2, {_x:300, _y:200, _alpha:0.5, roundProps:["_x","_y"]});
- onStart : Function - 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 : Array - An array of parameters to pass the onStart function.
- onStartScope : Object - Use this to define the scope of the onStart function.
- onUpdate : Function - 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 : Array - An array of parameters to pass the onUpdate function (this is optional)
- onUpdateScope : Object - Use this to define the scope of the onUpdate function.
- onComplete : Function - If you'd like to call a function when the tween has finished, use this.
- onCompleteParams : Array - An array of parameters to pass the onComplete function (this is optional)
- onCompleteScope : Object - Use this to define the scope of the onComplete function.
- persist : Boolean - if true, the TweenFilterLite instance will NOT automatically be removed from the rendering queue and made eligible for garbage collector when it is complete. However, it is still eligible to be overwritten by new tweens even if persist is true. By default, it is false.
- renderOnStart : Boolean - If you're using TweenFilterLite.from() (or runBackwards:true) with a delay and want to prevent the tween from rendering until it actually begins, set this special property to true. By default, it's false which causes TweenFilterLite.from() to render its values immediately, even before the delay has expired.
- runBackwards : Boolean - Flips the start and end values in a tween. The from() method automatically sets this value to true.
- overwrite : Number - Controls how other tweens of the same object are handled when this tween is created. You can set a default value to be used with ALL tweens in your SWF using the OverwriteManager's init() method, or control them individually with this overwrite property. Here are the options:
- 0 (NONE): No tweens are overwritten. This is the fastest mode, but you need to be careful not to create any
tweens with overlapping properties, otherwise they'll conflict with each other. - 1 (ALL): (this is the default unless OverwriteManager.init() has been called) All tweens of the same object are completely overwritten immediately when the tween is created.
TweenFilterLite.to(mc, 1, {x:100, y:200});
TweenFilterLite.to(mc, 1, {_x:300, delay:2, overwrite:1}); //immediately overwrites the previous tween - 2 (AUTO): (used by default if OverwriteManager.init() has been called) Searches for and overwrites only individual overlapping properties in tweens that are active when the tween begins.
TweenFilterLite.to(mc, 1, {_x:100, _y:200});
TweenFilterLite.to(mc, 1, {_x:300, overwrite:2}); //only overwrites the "_x" property in the previous tween - 3 (CONCURRENT): Overwrites all tweens of the same object that are active when the tween begins.
TweenFilterLite.to(mc, 1, {_x:100, y:200});
TweenFilterLite.to(mc, 1, {_x:300, delay:2, overwrite:3}); //does NOT overwrite the previous tween because the first tween will have finished by the time this one begins.
- 0 (NONE): No tweens are overwritten. This is the fastest mode, but you need to be careful not to create any
- blurFilter : Object - To apply a BlurFilter, pass an object with one or more of the following properties:
- blurX
- blurY
- quality
- glowFilter : Object - To apply a GlowFilter, pass an object with one or more of the following properties:
- alpha
- blurX
- blurY
- color
- strength
- quality
- inner
- knockout
- colorMatrixFilter : Object - To apply a ColorMatrixFilter, pass an object with one or more of the following properties:
- colorize
- amount
- contrast
- brightness
- saturation
- hue
- threshold
- relative
- matrix
- dropShadowFilter : Object - To apply a DropShadowFilter, pass an object with one or more of the following properties:
- alpha
- angle
- blurX
- blurY
- color
- distance
- strength
- quality
- bevelFilter : Object - To apply a BevelFilter, pass an object with one or more of the following properties:
- angle
- blurX
- blurY
- distance
- highlightAlpha
- highlightColor
- shadowAlpha
- shadowColor
- strength
- quality
STATIC METHODS
TweenFilterLite.to(target:Object, duration:Number, variables:Object):TweenFilterLite
- Description:Creates a new TweenFilterLite instance for you, but shields you from having to create a variable to store it in which can make garbage collection more difficult.
Actionscript:
-
var myTween:TweenFilterLite = new TweenFilterLite(mc, 1, {_x:300});
-
TweenFilterLite.to(mc, 1, {_x:300}); //exactly the same as the previous line, but handles garbage collection automatically.
-
- Parameters: Same as Constructor (see above)
TweenFilterLite.from(target:Object, duration:Number, variables:Object):TweenFilterLite
- Description: Exactly the same as TweenFilterLite.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 the way the should end up and you just want to tween them to where they are.
- Parameters: Same as TweenFilterLite.to(). (see above)
TweenFilterLite.delayedCall(delay:Number, onComplete:Function, onCompleteParams:Array, scope:Object):TweenLite
- 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:
- delay : Number - Number of seconds before the function should be called.
- onComplete : Function - The function to call
- onCompleteParams : Array - [optional] An array of parameters to pass the onComplete function when it's called.
- scope : Object - [optional] Defines the scope of the function.
TweenFilterLite.killTweensOf(target:Object, complete:Boolean):Void
- Description: Provides an easy way to kill all tweens of a particular Object/MovieClip. You can optionally force it to immediately complete (which will also call the onComplete function if you defined one)
- Parameters:
- target : Object - Any/All tweens of this Object will be killed.
- complete : Function - If true, the tweens for this object will immediately complete (go to the ending values and call the onComplete function if you defined one).
TweenFilterLite.killDelayedCallsTo(function:Function):Void
- Description: Provides an easy way to kill all delayed calls to a particular function (ones that were instantiated using the TweenFilterLite.delayedCall() method).
- Parameters:
- function : Function - Any/All delayed calls to this function will be killed.
TweenFilterLite.setGlobalTimeScale(scale:Number):void
- Description: Speed up or slow down ALL TweenMax and TweenFilterLite tweens. Each tween's timeScale property and the TweenFilterLite.globalTimeScale are cumulative, giving you lots of control. So, for example, if an individual tween has a timeScale of 0.5 and you set the globalTimeScale to 0.5 as well, the tween will appear to run at 0.25 speed. If you want the globalTimeScale to gradually change, you can even tween it using TweenLite (which isn't affected by globalTimeScale), like this: TweenLite.to(TweenFilterLite, 1, {globalTimeScale:0.5});
- Parameters:
- scale : Number - Multiplier for controlling the speed of the tweens. 0.5 = half speed, 1 = normal speed, 2 = double speed, etc.
EXAMPLES
As a simple example, you could tween the blur of clip_mc from where it's at now to 20 over the course of 1.5 seconds by:
Actionscript:
-
import gs.TweenFilterLite;
-
TweenFilterLite.to(clip_mc, 1.5, {blurFilter:{blurX:20, blurY:20}});
If you want to get more advanced and tween the clip_mc MovieClip over 5 seconds, changing the saturation to 0, delay starting the whole tween by 2 seconds, and then call a function named "onFinishTween" when it has completed and pass in a few arguments to that function (a value of 5 and a reference to the clip_mc), you'd do so like:
Actionscript:
-
import gs.*;
-
import gs.easing.*;
-
TweenFilterLite.to(clip_mc, 5, {colorMatrixFilter:{saturation:0}, delay:2, onComplete:onFinishTween, onCompleteParams:[5, clip_mc]});
-
function onFinishTween(argument1:Number, argument2:MovieClip):Void {
-
trace("The tween has finished! argument1 = " + argument1 + ", and argument2 = " + argument2);
-
}
If you have a MovieClip on the stage that already has the properties you'd like to end at, and you'd like to start with a colorized version (red: 0xFF0000) and tween to the current properties, you could:
Actionscript:
-
import gs.*;
-
TweenFilterLite.from(clip_mc, 5, {colorMatrixFilter:{colorize:0xFF0000}});
Need Help?
Feel free to post your question on the forums. You'll increase your chances of getting a prompt answer if you include a simplified FLA file (and any class files) that clearly demonstrates the problem and provide a brief explanation.
on May 26th, 2007 at 3:44 am
Jack,
I can only say that I wish you designed and developed vehicles, were in charge of the deficit, and ran an organically based fast food restaurant chain. Because if you did, by now, we would all be flying around in our government issued hover cars that ran on raw sewage and emitted nothing but water vapor while consuming conveniently prepared, organic gourmet meals, which contributed to each of us becoming the healthy, happy, active centurions God intended us to be.
Yes, these classes are that idealistically good. Adobe(Macromedia) should give you millions. I wish that I could, but perhaps a pittance of 10$ will help set a precedence.
This new class seems every bit as brilliant and compact as TweenLite (which I love). Can’t wait to start playing with it. Thank you, thank you, and thank you.
on May 26th, 2007 at 3:47 am
P.S.
Make it easy for people to give you money. Put up a direct PayPal link . Genorosity and laziness aren’t mutually exclusive traits :)
on June 7th, 2007 at 4:39 pm
Great class. I was about to write a function to do this and thought I’d give google a try. Excellent!
on July 3rd, 2007 at 8:23 am
Wow!!! You got my fully respect!! D@mn you know something! :D It’s working great!! The only thing I don’t know is how to apply a color and a shadow modify at once. Cool though!
on July 3rd, 2007 at 8:53 am
Actually, Eagle, it’s pretty simple to apply a colorize filter tween and also a drop shadow tween (or any filter) – just use two tweens and make sure the second one sets the overwrite property to false, like:
TweenFilterLite.to(my_mc, 2, {colorMatrixFilter:{colorize:0xFF0000}});
TweenFilterLite.to(my_mc, 2, {dropShadowFilter:{blurX:5, blurY:5, color:0×00FF00}, overwrite:false});
on September 3rd, 2007 at 1:20 pm
I’ve been teaching myself as2 & as3, as well as everything else that goes with interactive design… and there’s just some things that take a bit more than understanding the logic to figure out. I’ve been trying to understand the blurs and other filters for DAYS. It’s highly pertinent to a website i’m strying to create. You sir, are a miracle man in my book. Every question I’ve had with this project, you answered in entirety with this one blog alone.
You’re a life saver… more importantly so, a sanity saver ;)
Thank you VERY much for taking the time with this,
C. W. Calabrese
on January 21st, 2008 at 7:59 am
I have been using TweenLite for about a month now and all I can say is that your classes are absolutely brilliant! Thanks a lot!
One thing I’m curious about is how you apply several filters at the same time to an object, lets say you want to move it while adding some glow and removing a drop shadow.
on January 21st, 2008 at 8:41 am
Alex, you should be able to do that without a problem – just remember that unless you set the “overwrite” property to false, TweenLite (and TweenFilterLite) will always overwrite existing tweens of the same object. So to move a MovieClip while adding a glow and removing a drop shadow, you could do something like:
TweenFilterLite.to(my_mc, 2, {glowFilter:{color:0xFF0000, strength:2, blurX:10, blurY:10}, _x:100, _y:300});
TweenFilterLite.to(my_mc, 2, {dropShadowFilter:{alpha:0}, overwrite:false});
on January 23rd, 2008 at 10:17 am
I can think of just two more major functions. One would be the ability to pause (all) tweens. This would be wildly useful in some cases. Right now I’m making a video banner which uses vector animations, but people are going to be pausing and playing the video.
Another possibility would be the ability to tween through a timeline animation. I once made an animation of a sunrise which used several motion tweens; the entire animation timeline was then tweened from start to end in a certain time, using a standard quadratic equation. It looked great, and works really well if the animation is long enough (to provide enough frames for low-movement parts of the equation).
on January 23rd, 2008 at 10:53 am
Michiel, I have avoiding adding pause/resume functionality to TweenLite in order to keep file size way down, but TweenMax is now officially released and it includes that feature (and many more). Check it out at http://www.TweenMax.com
Also, it’s very easy to do the frame tween you’re talking about. As of version 6, frame tweening is built into TweenLite!
on February 24th, 2008 at 4:31 am
dude.
I’ve been tweening tings for years…I’ve been too complacent with the ol’ lmc_tween.as because you could write two tweens on the one movieclip without the first overwriting the second which I found no other tweener did…I just noticed you’re little snippet of code: overwrite:false in your tweener…You’re a F*&king legend!! I am a better deviner after visiting your website tonight.
Radical
on April 3rd, 2008 at 4:20 pm
Hey – very cool! One question – is there an easy translation between the numbers you use for the color matrix and the numbers used in flash’s CS3’s built in filter tweener. I have some tweens I want to make to a color, and I have their exact values in flash (example: HUE: -63, SATURATION: 70) – but this doesn’t really translate over to Tweenfilter lite. How best to approximate those values? Nice work!
on April 3rd, 2008 at 7:56 pm
heaversm, here’s an easy way to match exactly what you created in the Flash CS3 (or Flash 8) authoring environment in terms of the ColorMatrixFilter. All you need to do is get the necessary values in the matrix array and pass it to the new version of TweenFilterLite (7.04). Here’s some code that grabs those values, traces them to your output window (in case you want to copy/paste), clears the filter, and tweens it back into place after a 1 second delay:
import gs.*;
import flash.filters.*;
function getCurrentMatrix($mc:MovieClip):Array {
var filters:Array = $mc.filters;
for (var i:Number = 0; i < filters.length; i++) {
if (filters[i] instanceof ColorMatrixFilter) {
return filters[i].matrix;
}
}
}
var curMatrix:Array = getCurrentMatrix(mc);
trace(”TweenFilterLite.to(mc, 3, {colorMatrixFilter:{matrix:[" + curMatrix + "]}})”);
mc.filters = []; //clears filters;
TweenFilterLite.to(mc, 3, {colorMatrixFilter:{matrix:curMatrix}, delay:1});
on July 9th, 2008 at 11:17 am
Hey Jack,
Thanks a bunch for TweenLite // TweenFilterLite. They’re both so easy to work with it’s saving me hours of work.
Great Job! Keep it up!
Regards,
The Enemy.