Packagecom.greensock
Classpublic class TweenNano
InheritanceTweenNano Inheritance Object

[AS3/AS2 only] TweenNano is a super-lightweight (2k in AS3 and 2.6k in AS2) version of TweenLite and is only recommended for situations where you absolutely cannot afford the extra 4.7k that the normal TweenLite engine would cost and your project doesn't require any plugins. Normally, it is much better to use TweenLite because of the additional flexibility it provides via plugins and its compatibility with TimelineLite and TimelineMax. TweenNano can do everything TweenLite can do with the following exceptions:

USAGE

The most common type of tween is a to() tween which allows you to define the destination values:

TweenNano.to(myObject, 2, {x:100, y:200});

The above code will tween myObject.x from whatever it currently is to 100 and myObject.y property to 200 over the course of 2 seconds. Notice the x and y values are defined inside a generic object (between curly braces). Put as many properties there as you want.

Tweens begin immediately.

The target can also be an array of objects. For example, the following tween will tween the alpha property to 0.5 and y property to 100 for obj1, obj2, and obj3:

TweenNano.to([obj1, obj2, obj3], 1, {alpha:0.5, y:100});

You can also use a from() tween if you want to define the starting values instead of the ending values so that the target tweens from the defined values to wherever they currently are.

Although the to() and from() static methods are popular because they're quick and can avoid some garbage collection hassles, you can also use the more object-oriented syntax like this:

var tween = new TweenNano(myObject, 2, {x:100, y:200});

or even:

var tween = TweenNano.to(myObject, 2, {x:100, y:200});

EXAMPLES:

Please see http://www.greensock.com/tweennano/ for examples, tutorials, and interactive demos.

SPECIAL PROPERTIES:

Typically the vars parameter is used to define ending values for tweening properties of the target (or beginning values for from() tweens) like {x:100, y:200, alpha:0}, but the following optional special properties serve other purposes:

NOTES:

Copyright 2008-2013, GreenSock. All rights reserved. This work is subject to the terms in http://www.greensock.com/terms_of_use.html or for Club GreenSock members, the software agreement that was issued with the membership.



Public Properties
 PropertyDefined By
  defaultEase : Object
[static] Provides An easy way to change the default easing equation.
TweenNano
  target : Object
Target object whose properties this tween affects.
TweenNano
  ticker : Shape
[static] The object that dispatches a "tick" event each time the engine updates, making it easy for you to add your own listener(s) to run custom logic after each update (great for game developers).
TweenNano
  vars : Object
Stores variables (things like "alpha", "y" or whatever we're tweening, as well as special properties like "onComplete").
TweenNano
Public Methods
 MethodDefined By
  
TweenNano(target:Object, duration:Number, vars:Object)
Constructor
TweenNano
  
delayedCall(delay:Number, callback:Function, params:Array = null, useFrames:Boolean = false):TweenNano
[static] Provides a simple way to call a function after a set amount of time (or frames).
TweenNano
  
from(target:Object, duration:Number, vars:Object):TweenNano
[static] Static method for creating a TweenNano instance that tweens backwards - you define the BEGINNING values and the current values are used as the destination values which is great for doing things like animating objects onto the screen because you can set them up initially the way you want them to look at the end of the tween and then animate in from elsewhere.
TweenNano
  
kill(target:* = null):void
Kills the tween, stopping it immediately.
TweenNano
  
killTweensOf(target:Object):void
[static] Kills all the tweens of a particular object or the delayedCalls to a particular function.
TweenNano
  
to(target:Object, duration:Number, vars:Object):TweenNano
[static] Static method for creating a TweenNano instance that animates to the specified destination values (from the current values).
TweenNano
Property Detail
defaultEaseproperty
public static var defaultEase:Object

Provides An easy way to change the default easing equation. Choose from any of the GreenSock eases in the com.greensock.easing package or any standard easing function like the ones in Adobe's fl.motion.easing package.

The default value is QuadOut.ease.

targetproperty 
public var target:Object

Target object whose properties this tween affects. This can be ANY object or even an array.

tickerproperty 
public static var ticker:Shape

The object that dispatches a "tick" event each time the engine updates, making it easy for you to add your own listener(s) to run custom logic after each update (great for game developers). Add as many listeners as you want. The basic syntax is the same for all versions (AS2, AS3, and Javascript):

Basic example (AS2, AS3, and Javascript):

//add listener
TweenNano.ticker.addEventListener("tick", myFunction);
 
function myFunction(event) {
     //executes on every tick after the core engine updates
}
 
//to remove the listener later...
TweenNano.ticker.removeEventListener("tick", myFunction);

Due to differences in the core languages (and to maximize efficiency), the advanced syntax is slightly different for the AS3 version compared to AS2 and Javascript. The parameters beyond the first 2 in the addEventListener() method are outlined below:

Javascript and AS2

addEventListener(type, callback, scope, useParam, priority)

Parameters:

  1. type : String - type of listener, should always be "tick"
  2. callback : Function - the function to call when the event occurs
  3. scope : Object - binds the scope to a particular object (scope is basically what "this" refers to in your function). This can be very useful in Javascript and AS2 because scope isn't generally maintained.
  4. useParam : Boolean - if true, an event object will be generated and fed to the callback each time the event occurs. The event is a generic object and has two properties: type (always "tick") and target which refers to the ticker instance. The default for useParam is false because it improves performance.
  5. priority : Integer - influences the order in which the listeners are called. Listeners with lower priorities are called after ones with higher priorities.

Advanced example (Javascript and AS2):

//add listener that requests an event object parameter, binds scope to the current scope (this), and sets priority to 1 so that it is called before any other listeners that had a priority lower than 1...
TweenNano.ticker.addEventListener("tick", myFunction, this, true, 1);
 
function myFunction(event) {
    //executes on every tick after the core engine updates
}
 
//to remove the listener later...
TweenNano.ticker.removeEventListener("tick", myFunction);

AS3

The AS3 version uses the standard EventDispatcher.addEventListener() syntax which basically allows you to define a priority and whether or not to use weak references (see Adobe's docs for details).

Advanced example [AS3 only]:

import flash.events.Event;
         
//add listener with weak reference (standard syntax - notice the 5th parameter is true)
TweenNano.ticker.addEventListener("tick", myFunction, false, 0, true);
         
function myFunction(event:Event):void {
    //executes on every tick after the core engine updates
}
         
//to remove the listener later...
TweenNano.ticker.removeEventListener("tick", myFunction);

varsproperty 
public var vars:Object

Stores variables (things like "alpha", "y" or whatever we're tweening, as well as special properties like "onComplete").

Constructor Detail
TweenNano()Constructor
public function TweenNano(target:Object, duration:Number, vars:Object)

Constructor

Parameters
target:Object — Target object (or array of objects) whose properties this tween affects
 
duration:Number — Duration in seconds (or frames if useFrames:true is set in the vars parameter)
 
vars:Object — An object defining the end value for each property that should be tweened as well as any special properties like onComplete, ease, etc. For example, to tween mc.x to 100 and mc.y to 200 and then call myFunction, do this: new TweenNano(mc, 1, {x:100, y:200, onComplete:myFunction}).
Method Detail
delayedCall()method
public static function delayedCall(delay:Number, callback:Function, params:Array = null, useFrames:Boolean = false):TweenNano

Provides a simple way to call a function after a set amount of time (or frames). You can optionally pass any number of parameters to the function too.

Javascript and AS2 note: - Due to the way Javascript and AS2 don't maintain scope (what "this" refers to, or the context) in function calls, it can be useful to define the scope specifically. Therefore, in the Javascript and AS2 versions the 4th parameter is scope, bumping useFrames back to the 5th parameter:

TweenNano.delayedCall(delay, callback, params, scope, useFrames) [Javascript and AS2 only]

//calls myFunction after 1 second and passes 2 parameters:
TweenNano.delayedCall(1, myFunction, ["param1", 2]);
         
function myFunction(param1, param2) {
    //do stuff
}

Parameters

delay:Number — Delay in seconds (or frames if useFrames is true) before the function should be called
 
callback:Function — Function to call
 
params:Array (default = null) — An Array of parameters to pass the function (optional).
 
useFrames:Boolean (default = false) — If the delay should be measured in frames instead of seconds, set useFrames to true (default is false)

Returns
TweenNano — TweenNano instance

See also

from()method 
public static function from(target:Object, duration:Number, vars:Object):TweenNano

Static method for creating a TweenNano instance that tweens backwards - you define the BEGINNING values and the current values are used as the destination values which is great for doing things like animating objects onto the screen because you can set them up initially the way you want them to look at the end of the tween and then animate in from elsewhere.

NOTE: By default, immediateRender is true in from() tweens, meaning that they immediately render their starting state regardless of any delay that is specified. You can override this behavior by passing immediateRender:false in the vars parameter so that it will wait to render until the tween actually begins. To illustrate the default behavior, the following code will immediately set the alpha of mc to 0 and then wait 2 seconds before tweening the alpha back to 1 over the course of 1.5 seconds:

TweenNano.from(mc, 1.5, {alpha:0, delay:2});

Since the target parameter can also be an array of objects, the following code will tween the alpha property of mc1, mc2, and mc3 from a value of 0 simultaneously:

TweenNano.from([mc1, mc2, mc3], 1.5, {alpha:0});

Even though 3 objects are animating, there is still only one tween created.

For simple sequencing, you can use the delay special property (like TweenNano.from(mc, 1, {alpha:0, delay:0.5})), but it is highly recommended that you consider using TimelineLite (or TimelineMax) for all but the simplest sequencing tasks. It has an identical from() method that allows you to append tweens one-after-the-other and then control the entire sequence as a whole. You can even have the tweens overlap as much as you want.

Parameters

target:Object — Target object (or array of objects) whose properties this tween affects.
 
duration:Number — Duration in seconds (or frames if useFrames:true is set in the vars parameter)
 
vars:Object — An object defining the starting value for each property that should be tweened as well as any special properties like onComplete, ease, etc. For example, to tween mc.x from 100 and mc.y from 200 and then call myFunction, do this: TweenNano.from(mc, 1, {x:100, y:200, onComplete:myFunction});

Returns
TweenNano — TweenNano instance

See also

kill()method 
public function kill(target:* = null):void

Kills the tween, stopping it immediately. You can optionally define a particular target to isolate (or an array of targets) which is only useful in tweens whose target is an array. For example, let's say we have a tween like this:

var tween = TweenNan.to([mc1, mc2, mc3], 2, {x:100});

Later, we could kill only the mc2 portion of the tween like this:

tween.kill(mc2);

To kill the entire tween, simply omit the target parameter, like tween.kill()

Parameters

target:* (default = null) — [optional] To kill only aspects of the animation related to a particular target (or targets), reference it here. It can be an array or a single object. For example, to kill only parts having to do with myObject, do kill(myObject) or to kill only parts having to do with myObject1 and myObject2, do kill([myObject1, myObject2]). If no target is defined, ALL targets will be affected.

killTweensOf()method 
public static function killTweensOf(target:Object):void

Kills all the tweens of a particular object or the delayedCalls to a particular function. If, for example, you want to kill all tweens of myObject, you'd do this:

TweenNano.killTweensOf(myObject);

To kill all the delayedCalls that were created like TweenNano.delayedCall(5, myFunction);, you can simply call TweenNano.killTweensOf(myFunction); because delayedCalls are simply tweens that have their target and onComplete set to the same function (as well as a delay of course).

killTweensOf() affects tweens that haven't begun yet too. If, for example, a tween of myObject has a delay of 5 seconds and TweenNano.killTweensOf(mc) is called 2 seconds after the tween was created, it will still be killed even though it hasn't started yet.

Parameters

target:Object — Object whose tweens should be killed immediately

to()method 
public static function to(target:Object, duration:Number, vars:Object):TweenNano

Static method for creating a TweenNano instance that animates to the specified destination values (from the current values). The following lines of code all produce identical results:

TweenNano.to(mc, 1, {x:100});
var myTween = new TweenNano(mc, 1, {x:100});
var myTween = TweenNano.to(mc, 1, {x:100});

Each line above will tween the "x" property of the mc object to a value of 100 over the coarse of 1 second. They each use a slightly different syntax, all of which are valid. If you don't need to store a reference of the tween, just use the static TweenNano.to( ) call.

Since the target parameter can also be an array of objects, the following code will tween the x property of mc1, mc2, and mc3 to a value of 100 simultaneously:

TweenNano.to([mc1, mc2, mc3], 1, {x:100});

Even though 3 objects are animating, there is still only one tween created.

For simple sequencing, you can use the delay special property (like TweenNano.to(mc, 1, {x:100, delay:0.5})), but it is highly recommended that you consider using TimelineLite (or TimelineMax) for all but the simplest sequencing tasks. It has an identical to() method that allows you to append tweens one-after-the-other and then control the entire sequence as a whole. You can even have the tweens overlap as much as you want.

Parameters

target:Object — Target object (or array of objects) whose properties this tween affects.
 
duration:Number — Duration in seconds (or frames if useFrames:true is set in the vars parameter)
 
vars:Object — An object defining the end value for each property that should be tweened as well as any special properties like onComplete, ease, etc. For example, to tween mc.x to 100 and mc.y to 200 and then call myFunction, do this: TweenNano.to(mc, 1, {x:100, y:200, onComplete:myFunction});

Returns
TweenNano — TweenNano instance

See also