GreenSock


TweenFilterLite (AS3 Version) - Easily Tween Filters & Image Effects

Posted in Tweening by jack on the October 18th, 2007
Version 9.29, Updated 11/12/2008

Download Now
 
Donate

Join Club GreenSock to get bonus classes, updates, and much more

RECENT VERSION HIGHLIGHTS

  • TweenGroup - TweenGroup is a very powerful, flexible tool for managing groups of TweenLite/FilterLite/Max tweens. I believe it'll quickly become a must-have class for your tweening toolkit. TweenFilterLite is fully compatible with TweenGroup.
  • auto overwriting - You may never have to type "overwrite:false" again! Optionally use the new OverwriteManager class for advanced overwriting features. It costs about 1k and with one call to OverwriteManager.init(), all your tweens instantly get auto overwriting so that only overlapping properties in other tweens of the same object are overwritten. There are actually 4 options for overwriting now.
  • roundProps - Define individual properties that should be rounded to the nearest integer when tweening. This can be helpful for preventing non anti-aliased text or non-smoothed images from getting "fuzzy" when tweening position.
  • timeScale - Slow down or speed up a tween anytime. Half-speed would be 0.5, double-speed would be 2, etc.
  • globalTimeScale - Slow down or speed up ALL TweenMax and TweenFilterLite tweens anytime. Heck, you could even tween this value with TweenLite (which isn't affected by globalTimeScale) so that the change is gradual, like: TweenLite.to(TweenFilterLite, 1, {globalTimeScale:0.5});
  • visible - To set a DisplayObject's "visible" property at the end of a tween, just use this special property, like TweenLite.to(my_mc, 2, {x:300, visible:false});
  • removeTint - Previously, to remove the tint from a DisplayObject, you'd set tint:null, but the new way is to set removeTint:true.
  • CustomEase - Build your own custom easing equation with this interactive tool.

DESCRIPTION

TweenFilterLite extends the extremely lightweight (about 3k), powerful TweenLite class, adding the ability to tween filters (like blurs, glows, drop shadows, bevels, etc.) as well as advanced effects like contrast, colorization, brightness, saturation, hue, and threshold (combined size: 6k). The syntax is identical to the TweenLite class. If you're unfamiliar with TweenLite, I'd highly recommend checking it out. It provides easy way to tween multiple object properties over time including a DisplayObject's position, alpha, volume, color, etc. Just like the TweenLite class, TweenFilterLite allows you to build in a delay, call any function when the tween starts or has completed (even passing any number of parameters you define), automatically kill other tweens that are affecting the same object (to avoid conflicts), tween numeric Arrays, etc. One of the big benefits of this class (and the reason "Lite" is in the name) is that it was carefully built to minimize file size. There are several other tweening engines out there, but in my experience, they required more than triple the file size which was unacceptable when dealing with strict file size requirements (like banner ads). I haven't been able to find a faster tween engine either with similar features. The syntax is simple and the class doesn't rely on complicated prototype alterations that can cause problems with certain compilers. TweenFilterLite is simple, very fast, and more lightweight (about 6k) than any other popular tweening engine.

And if you want even more features and don't mind a few extra kb, check out the new TweenMax class which adds bezier tweening, pause/resume, easier sequencing, and MUCH more. It can do everything TweenFilterLite does, plus more.

Other links: AS2 version | Forums | TweenGroup | CustomEase

FEATURE COMPARISON

  TweenLite TweenFilterLite TweenMax
File size
3k 6k 9k-11k
AS2 and AS3 versions with identical syntax
X X X
X X X
Tween ANY numeric property of any object
X X X
Tween multiple properties with a single line of code
X X X
Syncronized tweens
X X X
Use any standard easing equation
X X X
onComplete, onStart, and onUpdate callbacks, including the ability to pass any number of parameters to those functions (onCompleteParams, onStartParams, onUpdateParams)
X X X
Delay a tween's start time (good for sequencing)
X X X
Automatic garbage collection
X X X
Tween frames of a MovieClip
X X X
Tween tint of a MovieClip/DisplayObject
X X X
autoAlpha (toggles visibility of an object off when the alpha hits zero)
X X X
Tween the volume of any MovieClip/SoundChannel
X X X
Unique "from()" call that allows you to use the current properties as the end values
X X X
Use relative values
X X X
Tween Arrays of numeric values with a single call
X X X
Pass extra parameters to easing equations (like Elastic.easeOut or Back.easeOut) for added control
X X X
Call any function after a set amount of time with the delayedCall() method. Even pass any number of parameters to the function.
X X X
Round values to the nearest integer while tweening (NEW!)
  X X
Speed up or slow down a tween anytime with the timeScale property (NEW!)
  X X
Speed up or slow down ALL TweenMax and TweenFilterLite tweens anytime with the static globalTimeScale property. (NEW!)
  X X
Advanced management of overwriting (AUTO, NONE, ALL, or CONCURRENT) with OverwriteManager (NEW!)
optional optional X
Tween filters like Blur, Glow, DropShadow, Bevel, and ColorMatrix
  X X
Simple controls for tweening a MovieClip's/DisplayObject's saturation, hue, brightness, contrast, threshold, and colorization
  X X
Bezier tweening
    X
Bezier "through" tweening (define points to hit instead of just control points)
    X
Automatically orient an object's rotation to a Bezier path
    X
Pause/Resume capability
with
TweenGroup
with
TweenGroup
X
reverse() and/or restart() (NEW!)
with
TweenGroup
with
TweenGroup
X
Grouping and Sequencing (NEW!)
with
TweenGroup
with
TweenGroup
with
TweenGroup
Tween multiple objects with a single call, including a special "stagger" property that staggers the starting time of each tween
with
TweenGroup
with
TweenGroup
with
TweenGroup
yoyo (NEW!)
with
TweenGroup
with
TweenGroup
X
loop (NEW!)
with
TweenGroup
with
TweenGroup
X
shortRotation (NEW!) - automatically rotates in the shortest direction
    X
Change destination values anytime with setDestination()(NEW!)
    X
killProperties() - selectively kill properties of a particular tween (NEW!)
    X
Jump to any point in the tween using the "progress" property
    X
Tween unlimited hex color properties
    X
AS3 Event listeners (NEW!)
    X
isTweening() function for easily determining if an object is currently tweening
    X
Get an Array of all TweenMax (and TweenLite and TweenFilterLite) instances that are currently affecting a particular target object.
    X
Price:
FREE (supported by donations)

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:

  1. import gs.*;
  2. TweenFilterLite.to(mc, 1, {x:200}); //automatically garbage collects
  3. 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)
  4. 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:
    1. target : Object - Target object whose properties we're tweening
    2. duration : Number - Duration (in seconds) of the tween
    3. 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 DisplayObject's "visible" property at the end of the tween, use this special property.
      • volume : Number - Tweens the volume of any object with a soundTransform property (like MovieClips, NetStreams, etc.)
      • tint : Number - To change a DisplayObject's tint, set this to the hex value of the color you'd like the DisplayObject 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 DisplayObject, 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.
      • 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)
      • 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)
      • 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:
        1. 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.
        2. 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
        3. 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
        4. 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.
      • 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.
    1. var myTween:TweenFilterLite = new TweenFilterLite(mc, 1, {x:300});
    2. 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):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:
    1. delay : Number - Number of seconds before the function should be called.
    2. onComplete : Function - The function to call
    3. onCompleteParams : Array - [optional] An array of parameters to pass the onComplete function when it's called.
TweenFilterLite.killTweensOf(target:Object, complete:Boolean):Void
  • Description: Provides an easy way to kill all tweens of a particular Object/DisplayObject. You can optionally force it to immediately complete (which will also call the onComplete function if you defined one)
  • Parameters:
    1. target : Object - Any/All tweens of this Object will be killed.
    2. 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:
    1. 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:
    1. 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:

  1. import gs.TweenFilterLite;
  2. 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:

  1. import gs.*;
  2. import gs.easing.*;
  3. TweenFilterLite.to(clip_mc, 5, {colorMatrixFilter:{saturation:0}, delay:2, onComplete:onFinishTween, onCompleteParams:[5, clip_mc]});
  4. function onFinishTween(argument1:Number, argument2:MovieClip):Void {
  5.     trace("The tween has finished! argument1 = " + argument1 + ", and argument2 = " + argument2);
  6. }

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:

  1. import gs.*;
  2. TweenFilterLite.from(clip_mc, 5, {colorMatrixFilter:{colorize:0xFF0000}});

FAQ

  1. How do I install the class? Do I have to import it on every frame?
    Just make sure the "gs" folder from the download is in the same folder as your FLA file. Keep the class files in the "gs" folder (don't remove them). That's it. And, yes, just like any Class, you need to import TweenFilterLite at the top of any frame that contains code referencing it. This does NOT add extra Kb to your file size very time you import it. Flash is smart enough to embed it once and all the other import statements just act as a "pointer" to the embedded Class.
  2. Why doesn't the tweening engine selectively overwrite ONLY tweens that are affecting the same property? How can I achieve this effect?
    By default, when you create a tween, TweenLite looks for all tweens of the same object that already exist and kills them immediately. However, you can add advanced management of overwriting (including AUTO overwriting of only overlapping properties) using the OverwriteManager class.
  3. 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 blur it over the course of 1 second:

    1. import gs.*;
    2. TweenFilterLite.to(clip_mc, 2, {colorMatrixFilter:{colorize:0xFF0000, amount:1}});
    3. TweenFilterLite.to(clip_mc, 1, {blurFilter:{blurX:20, blurY:20}, delay:2, overwrite:0});

  4. Why aren't my filters working?
    If you're using a filter that has an alpha property, try setting it to 1. The default alpha value is zero, so the filter may be working just fine, but you're not seeing it.
  5. 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 TweenFilterLite.to(clip_mc, 1, {colorMatrixFilter:{colorize:0xFF0000, amount:1}}) is the same as TweenFilterLite.to(clip_mc, 1, {colorMatrixFilter:{amount:1, colorize:0xFF0000}});
  6. Can I use TweenFilterLite to tween things other than filters?
    Sure. It extends TweenLite, so you can tween any property you want. TweenFilterLite.to(my_mc, 1, {x:200}) gives you the same result as TweenLite.to(my_mc, 1, {x:200}). However, I'd recommend using TweenLite to tween properties other than filters because in order to accommodate the specialized nature of filters, TweenFilterLite's code is a bit lengthier which translates into more work for the processor. It's doubtful that anyone would notice a performance hit unless you're tweening hundreds or thousands of instances simultaneously, but I'm a bit of an efficiency freak.
  7. Why are TweenLite and TweenFilterLite and TweenMax split into 3 classes instead of building all the functionality into one class?
    1. File size. Only a portion of projects out there require tweening of filters, beziers, hex colors, etc. TweenLite is 3k whereas TweenFilterLite is 6k and TweenMax is about 9k. Again, one of the stated purposes of TweenLite is to minimize file size & code bloat. If someone only wants to use TweenFilterLite or TweenMax, great. 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)
  8. Do I have to purchase a license to use this code? Can I use it for commercial purposes?
    If you use it in a commercial project, I'd strongly encourage you to at least join Club GreenSock which gets you some bonus classes (only available to club members), update notifications, and more. Your donations keep this project going. However, donations are not mandatory. TweenFilterLite is free for virtually all uses including commercial projects. The only exception is inclusion in commercial products for which you sell licenses to end users. If you don't charge licensing fees for your product, you don't get charged a licensing fee for TweenFilterLite. If you do license your product to end users and would like to use my code, please e-mail me at info@greensock.com and we can determine a reasonable licensing fee. Don't hesitate to inquire or assume the licensing fee would be too much - you may be surprised. Many large companies as well as single developers have obtained licenses because in their view, it ultimately saved them time and gave them a better, more reliable end product.

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.

Author: Jack Doyle, (e-mail: jack -at- greensock.com)
Copyright 2008, GreenSock (This work is subject to the terms here.)

To download the code, you must agree to the following license:

Copyright 2008, GreenSock, Inc.

"NO CHARGE" NON-EXCLUSIVE SOFTWARE LICENSE AGREEMENT

-----------------------------------------------------------------------------
PLAIN ENGLISH SUMMARY:

  1. You may use the code at no charge in web sites, games, components, applications, and other software as long as end users are not charged a fee of any kind to use your product or gain access to it. It doesn’t matter if you are paid to create the site/product. If you charge end users a fee, you must sign up for a corporate Club GreenSock membership which comes with a commercial license granting you permission to do so. See http://blog.greensock.com/club/ for details.
  2. Since the code is updated frequently and developers are best served by having the latest version, please avoid (or at least minimize) distributing the source code outside your organization.
  3. Use at your own risk. I offer no warranties.
  4. Please respect the copyright.

-----------------------------------------------------------------------------

LEGALESE:

This is a legal agreement between you (either an individual or a single entity) and GreenSock, Inc. ("GREENSOCK") for the proprietary GreenSock ActionScript code known as TweenLite, TweenFilterLite, TweenMax, TweenGroup, OverwriteManager, and other code that is freely available for download at http://blog.greensock.com or http://www.greensock.com (this code and documentation, as well as any updates which may at GREENSOCK's sole discretion be provided to you from time to time, are referred to in this Agreement as "PROGRAM") By installing, copying, or otherwise using the PROGRAM, you agree to the terms and conditions of this Agreement. If you do not agree to the terms and conditions of this Agreement, please do not install or use the PROGRAM.

I. LICENSE
A. Subject to the terms and conditions of this Agreement, GREENSOCK hereby grants you a non-exclusive, worldwide, non-transferable right to use the PROGRAM in web sites, games, applications, components and other software for which the end user is NOT charged any fees. If you would like to use the code in a commercially licensed software product for which end users are charged a fee (either for usage or access), simply sign up for a corporate Club GreenSock membership at http://blog.greensock.com/club/.

II. LIMITATION OF LICENSE AND RESTRICTIONS
A. You agree that you will not disclose, sell, rent, license, or otherwise distribute the PROGRAM's source code or any derivative works thereof to any third party without the prior written consent of GREENSOCK. Derivative works are defined as modifications that add substantive functionality to the PROGRAM and do not include bug fixes or other minor modifications required to operate the PROGRAM as originally intended. Limited distribution of the source code to vendors as part of your Work Product is acceptable so long as they agree to the terms of this Agreement. You agree not to modify or delete GreenSock's existing copyright notice located in the source code.

B. You may use, duplicate, and distribute the compiled object code solely as embedded in a Work Product created by you, either for your own use or for distribution to a third party so long as end users of the Work Product are not charged a fee for usage. Please see http://blog.greensock.com/licensing/ for descriptions of Work Products that qualify for the "No Charge" license.

III. CONSIDERATION
A. The license rights granted to you under this Agreement are at no charge, but only in the following circumstances: If, either on your own behalf or on behalf of a third party, you incorporate the Software into a web site, software application, program or any component thereof (collectively, “Work Product”), which in the case of a web site, must be accessible to internet users without payment of a fee of any kind by a user, and in the case of a software application, program or component, neither you nor anyone to whom you distribute the Work Product charges a user a fee of any kind to use such Work Product or application, program or component into which such Work Product is embedded. The foregoing shall apply regardless of whether you are paid to create such Work Product and, under any circumstances, shall be subject to the prohibition against distribution of Source Code set forth in Section II.

B. In the event your intended use of the Software does not meet the criteria for the “no charge” license rights set forth in the immediately preceding paragraph, then you are not licensed to use the PROGRAM under this Agreement and must license the PROGRAM under GreenSock’s separate fee-based Software License Agreement which is granted to corporate Club GreenSock members (see http://blog.greensock.com/club/ for details).

IV. TITLE AND OWNERSHIP
A. The PROGRAM is licensed, not sold, and is protected by copyright laws and international treaty provisions. You acknowledge that no title to the intellectual property in the Software is transferred to you. You further acknowledge that title and full ownership rights to the PROGRAM, including all intellectual property rights therein, will remain the exclusive property of GreenSock and you will not acquire any rights to the PROGRAM except as expressly set forth in this Agreement. You agree that any copies of the PROGRAM you make will contain the same proprietary notices which appear on and in the PROGRAM.

V. DISCLAIMER OF WARRANTY AND LIMITATION OF LIABILITY
A. THE PROGRAM IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. GREENSOCK DOES NOT WARRANT THAT THE FUNCTIONS CONTAINED IN THE PROGRAM WILL MEET YOUR REQUIREMENTS OR THAT OPERATION WILL BE UNINTERRUPTED OR ERROR FREE. GREENSOCK shall not be liable for special, indirect, incidental, or consequential damages with respect to any claim on account of or arising from this Agreement or use of the PROGRAM, even if GREENSOCK has been or is hereafter advised of the possibility of such damages. Because some states do not allow certain exclusions or limitations on implied warranties or of liability for consequential or incidental damages, the above exclusions may not apply to you. In no event, however, will GREENSOCK be liable to you, under any theory of recovery, in an amount in excess of the license fee paid by you under this Agreement. Notwithstanding anything else in this agreement, you agree to indemnify GREENSOCK, its assignees, and licensees, and hold each of them harmless from and against any and all claims, demands, losses, damages, liabilities, costs, and expenses, including legal fees.

B. GREENSOCK may, at its sole discretion, provide support services related to the PROGRAM, but has no obligation to do so.

VI. TERMINATION
GreenSock may terminate this Agreement at any time if you fail to comply with the terms and conditions of this Agreement.

VII. MISCELLANEOUS
A. This Agreement shall be construed in accordance with the laws of the State of Illinois. Should you for any reason bring a claim, demand, or other action against GREENSOCK, its agents or employees, arising out of this Agreement or the PROGRAM licensed herein, you agree to bring said claim only in the Illinois Court of Claims.

B. THIS AGREEMENT REPRESENTS THE COMPLETE AND EXCLUSIVE STATEMENT OF THE AGREEMENT BETWEEN GREENSOCK AND YOU AND SUPERSEDES ALL PRIOR AGREEMENTS, PROPOSALS, REPRESENTATIONS AND OTHER COMMUNICATIONS, VERBAL OR WRITTEN, BETWEEN THEM WITH RESPECT TO USE OF THE PROGRAM. THIS AGREEMENT MAY BE MODIFIED ONLY WITH THE MUTUAL WRITTEN APPROVAL OF AUTHORIZED REPRESENTATIVES OF THE PARTIES.

C. The terms and conditions of this Agreement shall prevail notwithstanding any different, conflicting, or additional terms or conditions which may appear in any purchase order or other document submitted by you. You agree that such additional or inconsistent terms are deemed rejected by GREENSOCK.

D. GREENSOCK and you agree that any xerographically or electronically reproduced copy of this Agreement shall have the same legal force and effect as any copy bearing original signatures of the parties.

I'd like to donate & get bonus classes, update notifications, SVN access, and more.

28 Responses to 'TweenFilterLite (AS3 Version) - Easily Tween Filters & Image Effects'

Subscribe to comments with RSS

  1. Robert said,

    on May 30th, 2007 at 8:29 pm

    Jack

    many thanks for sharing your hard work. Having found the MC Tween class to be hugely timesaving and extremely useful I was looking for somthing that could product similar effects on color and brightness properties.

    I’m sure it will become a key tool in future development

    Regards

    Robert

  2. Bryan Bartow said,

    on June 2nd, 2007 at 3:14 am

    Jack, thanks for creating this handy class. I can already tell that it will save me a fair amount of time. I’ll be sure to let you know if I publish anything that uses the class.

  3. Zsotl Popa said,

    on June 14th, 2007 at 2:08 am

    Hello Jack, i just want to say a “thank you” here too, because i’m really amazed about your work and your helpfull mentality, love your tween, its a big help to me.

    regards
    Zsolt

  4. Nate said,

    on July 31st, 2007 at 10:04 am

    Much thanks for this great little package. I’ve been looking for a solid animation package to accompany AS3 projects and I think I’ve finally found it. Kudos on your work!

  5. Stephen Koch said,

    on August 3rd, 2007 at 11:53 am

    Nice work. Thanks.

  6. ghis_le_fou said,

    on August 21st, 2007 at 2:02 pm

    Thanksa lot for your class … but i have a problem …

    is it possible to initialize a movieclip with a tween effect in 0 second like this :

    TweenFilterLite.to(mc, 0, {colorMatrixFilter:{contrast:3, brightness:3}});

    According to me, it doesn’t work …. :-(

    is there a trick ?

    Thanks a lot again …

    Very nice work !!!

  7. jack said,

    on August 21st, 2007 at 2:58 pm

    Good news ghis_le_fou - I JUST updated the class to allow for durations of 0! Version 4.5 and later should work great for you.

  8. Sean said,

    on August 30th, 2007 at 10:12 am

    For those of you who want to use this class in Flex … ITS EASY.
    Flex does not allow you to add to the Application stage a MovieClip and this class uses a MovieClip for all of its methods ….

    Solution:

    Simply subclass any class you want ( for example ) and than continue by implementing two public methods in this class as follows:

    public function set quality(i:int):void {}

    public function get quality():int {
    return 1;
    }

    That’s it …

    Now use your class instead of MC.

    Enjoy.

    Sean - HeliHobby.com

  9. Sean said,

    on September 13th, 2007 at 1:22 pm

    Hi Jack,
    How can I kill the running tweens in TweenFilterLite .

    The TweenFilterLite.killTweensOf(target:Object) does not seem to be implemented in the SubClasses TweenFilterLite.

    Regards,

    Sean.

  10. jack said,

    on September 14th, 2007 at 9:59 am

    Sean, great catch. Looks like Adobe changed the way inheritance is handled in AS3 which made the killTweensOf() and delayedCall() and killDelayedCallsTo() unavailable when called as static methods of TweenFilterLite. As of version 4.8, that’s fixed.

  11. blogk said,

    on November 26th, 2007 at 9:45 am

    great class and all, it’s the best in terms of filesize and simplicity, BUT:

    sometimes (and it really is _essentially_ random) it throws an error

    TypeError: Error #1010: A term is undefined and has no properties.
    at gs::TweenFilterLite/render()
    at gs::TweenLite$/executeAll()

    when trying to tween blur filter. it stops execution of the tween and usually occurs when tweening blur filter of more than 40 instances at once.

    and this has been a real pain in the ass!!

  12. jack said,

    on November 26th, 2007 at 4:09 pm

    blogk, after many hours of banging my head against the screen and trying to chase down the rare (and apparently completely random) 1010 error that TweenFilterLite throws from time to time in specific scenarios, I think I’ve figured it out. Actually, I’m almost positive it was caused by a bug in Flash but I whipped together a workaround and implemented it in version 5.5 of the class.

    Thanks for the feedback.

  13. Felixz said,

    on December 23rd, 2007 at 1:24 pm

    I have a problem using TweenFilterLite with textFields…
    TweenFilterLite.to(someTextField,2,{type:”glow”,color:0×0000FF,blurX:20,blurY:10,strength:100});
    I constantly get:
    ArgumentError: Error #2008: Parameter type must be one of the accepted values.
    at flash.text::TextField/set type()
    at gs::TweenFilterLite/render()
    at gs::TweenLite$/executeAll()

  14. jack said,

    on December 26th, 2007 at 1:48 pm

    Felixz, great catch. As of version 5.84, the error is fixed and you can now tween filters on TextFields.

  15. Tony said,

    on March 7th, 2008 at 7:39 pm

    Another quickie, Jack:
    Could you post a quick tut on sound tweening of loaded mp3s (with other tweens running as well)? I’ve messed around with both the loaded sound as well as a SoundChannel, but a desired volume tween doesn’t seem to work. Or is this only possible with the newest version?

    Thanks again.

    – Tony

  16. jack said,

    on March 7th, 2008 at 11:11 pm

    Tony, tweening audio volume can be done two ways:

    1) On a MovieClip that contains audio. This is as simple as:
    TweenLite.to(myMovieClip, 2, {volume:0});

    2) On a SoundChannel object.This is likely what you’d do with the MP3s you loaded in. When you play() your audio, it returns a SoundChannel object, so once you’ve loaded your MP3, it should be as easy as:

    var myChannel = mySound.play();
    TweenLite.to(myChannel, 2, {volume:0});

    Keep in mind, you’re NOT tweening the Sound object - you’re tweening the SoundChannel object.

  17. John said,

    on March 10th, 2008 at 11:32 pm

    How can I set it to loop and change colors ramdonly or using an aray of colors?

    Awesome work.

  18. jack said,

    on March 11th, 2008 at 10:05 am

    John, you could accomplish what you’re after with something like:

    var myColors:Array = [0xFF0000, 0x00FF00, 0x0000FF];
    function tweenColor():void {
    var randomColor = myColors[Math.floor(Math.random() * myColors.length)];
    TweenFilterLite.to(my_mc, 2, {colorMatrixFilter:{colorize:randomColor, amount:2}, onComplete:tweenColor});
    }
    tweenColor();

  19. Biffer said,

    on March 11th, 2008 at 11:07 am

    Hi there i have added an additional class for those who wish to use Events. This is a seperate class - so just use this instead of TweenLite.

    A data object is dispatched with the Event so you can still pass around onStartParams etc in the usual way but just pick them up from the event listener.

    hope this is some good to you event loving types.

    http://biffcom.com/resource/tweenLiteEventMod/TweenLiteEventModExample.zip

    Thanks,

    Biffer Rowley

  20. Tony said,

    on March 13th, 2008 at 2:32 am

    John:
    Or you could just randomize the “hue” color parameter which is handily a 0-360 scale in TweenFilterLite:

    theHue = (Math.round(Math.random() * 360)) ;
    TweenFilterLite.to(my_mc, 2, {colorMatrixFilter:{amount:1, hue:theHue}});

    You can enhance the effect with the brightness parameter as well (-1 to 1 scale). Very cool result with sky images.
    –Tony

  21. Nicolas said,

    on April 3rd, 2008 at 5:11 am

    How i can dublicate effect like flash bulb. It is simple in Tweener.
    Tweener.addTween(_loader,{_color_rb:255, _color_gb:255, _color_bb:255, time:1, transition:”easeOutQuad”});

    I try use brightness with param 3 but result is poor for me.

  22. jack said,

    on April 3rd, 2008 at 11:36 pm

    Nicolas, you can definitely create the effect you’re looking for using the ColorTransformProxy utility class I created for use in conjunction with TweenLite for tweening all the various ColorTransform-related properties, including redOffset, greenOffset, blueOffset, redMultiplier, greenMultiplier, blueMultiplier, tint, and even tintPercent and brightness!. Sign up for Club GreenSock and you’ll get that class as a bonus (as well as a TrasnformMatrixProxy class). See http://blog.greensock.com/club/ for details.

  23. Lauren said,

    on April 20th, 2008 at 3:31 pm

    Thanks for providing this! Fantastic tool.

  24. Erich said,

    on May 8th, 2008 at 12:46 pm

    Jack, thanks for creating these great classes. You’ve saved me hours of time. If you’re ever in Chicago, I owe you a beer.

  25. brroy said,

    on May 12th, 2008 at 10:25 am

    I’ve been looking for a solid animation package to accompany AS3 projects and I think I’ve finally found it. Kudos on your work!

    helipross.com

  26. Cardigan said,

    on May 19th, 2008 at 9:01 am

    Thanks very much for this tool. Is it possible to remove a filter applied with tweenFilterLite?

  27. jack said,

    on May 19th, 2008 at 9:31 am

    Cardigan, there isn’t currently a built-in way to automatically kill a filter after tweening it, but I may add that feature in a future version. Right now, though, you can just use an onComplete function to kill your filter(s). To remove all filters from a DisplayObject, just set its filters property to an empty Array in your custom onComplete function, like:

    my_mc.filters = [];

    Or to kill a specific kind of filter, you could set up an onComplete function like:

    function removeFilterType($object:DisplayObject, $filterType:BitmapFilter):void {
    var f:Array = $object.filters;
    var a:Array = []; //remaining filters
    for (var i:int = f.length - 1; i > -1; i–) {
    if (!(f[i] is $filterType)) {
    a.push(f[i]);
    }
    }
    $object.filters = a;
    }

    and then in your tween, you’d do something like:

    TweenFilterLite.to(my_mc, 1, {blurFilter:{blurX:20}, onComplete:removeFilterType, onCompleteParams:[my_mc, BlurFilter]});

    (don’t forget to import the flash.filters.BlurFilter class)

  28. Jay said,

    on September 25th, 2008 at 6:51 pm

    Thank you so much for sharing that, you are truly a hero of the flash dev world… I feel a donation will be imminent…

Leave a Reply