jump to navigation

Using caurina Tweener in AS3 to Move Objects August 15, 2010

Posted by Tournas Dimitrios in Actionscript.

Some of you might be asking why use a third party tweening class when Flash has native code for it. The answers are:

  1. The native one has bugs. For example if you are simultaneously tweening 3 objects with native Tween class, from time to time you notice that one or more Tweens simply stop (at least this happened to me a lot while I was using the native class).
  2. You need 1 tween / tweened property. (If you move an object both on x and y you need two Tweens)
  3. It uses the same event model as everything in AS3(This is not necessarily bad, bit with Caurina Tweener you can not only specify the name of the handling function, you can also specify its parameters)
  4. Also the library is  available as a  SWC component  , thus easy to implement in Your Flex projects

While Caurina Tweener:

  1. Works fine regardless of the Tweened objects.
  2. Gives better performance.
  3. You can tween multiple properties of 1 object with a single line of code
  4. It’s built with static functions, meaning that you don’t need an instance of the class every time you want to make a tween.Just make sure you import it. It will be caurina.transitions.Tweener. So a simple import caurina.transitions.Tweener will do the trick.

Next just add a tween. Here’s the setup:

Tweener.addTween(DisplayObject, {parameter1:value, parameter2:value, time:seconds});

Very simple… let me explain. Whatever object you want to tween is put as the DisplayObject.  The parameters include all the parameters of the object with number values like x, y, scaleX, scaleY, alpha, and rotation. There is also the time parameter which you assign seconds to in order to setup how long you want the Tween to last.   Here’s four examples:

//example 1:

Tweener.addTween(s1, {x: 400, rotation: 720, time: 2} );

//example 2:<br />
Tweener.addTween(s2, {x:400, rotation:90, time: 4, transition:"easeOutBounce"} );

//example 3:<br />
Tweener.addTween(s3, {x:400, rotation:-90, time: 3, delay: 1.5, transition:"easeInOutElastic"});

//example 4:<br />
Tweener.addTween(s4, {x:400, scaleX:1.5, scaleY: 1.5, time: 2, transition:"easeOut"});
  • Tweener.addTween – Tell Tweener to add our tween to the tween list and start tweening.
  • s1, s2, s3, s4 – this is all the instance names of our squares that are getting the tweens applied to them.
  • useable parameters: x, y, scaleX, scaleY, rotation, alpha – or any other numeric value. Tweener will move any numeric value over time to the number it is set to be in the parameters.
  • time parameter – takes a Number in seconds that represents how long you want the tween to take
  • delay parameter – takes a Number in seconds that when used, the Tween will wait those seconds before it starts.
  • transition parameter – takes a String of what type of transition you want to use. The list of transitions and their names can be found here, http://hosted.zeh.com.br/tweener/docs/en-us/.

Animation sequences are also much easer to make, as you no longer need to synchronize your tweens using events, for example.There are practically two tweens one that changes x,y and alpha, it lasts 2 seconds as you can see in the code below, and one that changes the rotation.

The code is:

import caurina.transitions.Tweener;

Tweener.addTween(box,{x:300, y:100, alpha:1, time:2, transition:&quot;linear&quot;});<br />
Tweener.addTween(box,{rotation:50, time:1, transition:"linear",delay:2.5});

No events no nothing just one extra parameter: “delay”. As you can see it’s set to 2.5, the length of the first tween is 2, so practicly the second tween starts 0.5 seconds after the first one finishes.

Still you may want to do something when your tween finishes playing, you accomplished this by ‘addEventListener(Event.COMPLETE)’ with Flash Tween Class .But with Tweener it’s just another parameter as such:

Tweener.addTween(box,{rotation:50, time:1, transition:"linear",delay:2.5, onComplete:doThis});

function doThis()

{<br />
        trace(&quot;here&quot;);<br />

This will be called when tween has completed. As you can see doThis doesn’t have any parameters, wich might be good, but in case you do need parameters, that is easy to acomplish as well:

Tweener.addTween(box,{rotation:50, time:1, transition:"linear",delay:2.5, onComplete:doThis, onCompleteParams:["hello world"]});

function doThis(s:String)

{<br />
        trace(s);<br />

NOTE: “hello world” can be replaced with a variable, or with multiple variables separated with comas. For example:

var nr1:Number=1;

var nr2:Number=2;

var nr3:Number=3;

Tweener.addTween(box,{rotation:50, time:1, transition:"linear",delay:2.5, onComplete:doThis, onCompleteParams:[nr1,nr2,nr3]});

function doThis(n1:Number, n2:Number, n3:Number)

{<br />


You can read the online documentation for Tweener here.

You can download Tweener from here.

Compare the codes that were created by traditional ActionScript and Tweener class.

Using traditional ActionScript:
var myTween:Tween = new Tween(box1, “x”, Elastic.easeOut, -300, 0, 3, true);
var myTweenAlpha:Tween = new Tween(box1, “alpha”, Strong.easeOut, 0, 0.2, 3, true);

Using Tweener class:
Tweener.addTween(box1,{x:0, alpha:0.2, y:0, time:tweenTime, transition:”linear”, delay:0});

The two ways did the same thing. That is, move the “box1” to (0,0), then change property of alpha to 0.2. But using Tweener class is more simple, and you don’t need to create tween object.

Alternative Implementations for the Tweener Class :

Delayed Function call, or a Poor man’s timer 🙂

AS3 has the Timer class which is handy, but sometimes you just need a quick “call this function in x seconds”. No need to instantiate an object, keep its reference, add event listeners, a function and clear up the timer. This is so simple (and great):

Tweener.addTween(this, {time:0.3, onComplete: myFunction});
private function myFunction():void {
trace(&quot;hello &quot;);<br />
<p>//Or, using an anonymous function:<br />
Tweener.addTween(this, {time:0.3, onComplete: function():void{

	// do something here!<br />
	trace(&quot;hello&quot;);<br />
});<br />

Note that you don’t have to tween any property at all for this to work. Just specify any object as the target, the time in seconds you wish to wait until the function is called and which function to call.

Using “base” as a template for Tweens :

Some animations / visual effects are used many times over in the same project. Using the base property you can create a “template” of a tween and specialize it later (like adding an onComplete callback for some runs of the effect). Suppose you have a recurring tween that scale items and does a fade. You can say:

// creates a &;quot;template&quot; to be used more than once:<br />
var scaleFadeIn : Object = {

	alpha:1,<br />
	_scale:1,<br />
	time:0.5,<br />
	transition: &quot;linear&quot;<br />
}<br />
// later in you code you can say:<br />
Tweener.addTween(myMovieClip, {base:scaleFadeIn});

// or you can "enhance it", for example with an onComplete callback:

Tweener.addTween(myMovieClip, {base:scaleFadeIn, onComplete: callHome});

The great thing about this is easier maintenance. If you later on decide that you want to try another transition or time, you only change the template, the “base” for those Tweens.

Note that base is very flexible, as they can be nested:

var scaleAndColorFadeIn : Object = {

	base: scaleFadeIn,

	_color: 0xFF0000<br />
}<br />

In this case, you “add” all settings from the scaleFadeIn and the scaleAndColorFadeIn. More on the base property documentation page.

Using setTimeScale to speed up testing :

This is a real life saver. Tweener uses a sort of internal clock, a value by which all time operations are measured, called timeScale. Sometimes you are coding some section of the website, but to get there you have to see the loading animations, menu transitions and so on. Because you are seeing this over and over again, those precious seconds until you get to the part that really interests you is very boring, so you can “fast forward” them. At the beginning of your website you can just say:

// this will run everything 3 times as fast&lt;br /&gt;<br />Tweener.timeScale(3);&lt;br /&gt;<br />

Once you’ve reached the section / part of the website that you are actually working on, you can just set the speed back to normal:

// this will set the speed back to normal&lt;br /&gt;<br />Tweener.setTimeScale( 1);&lt;br /&gt;<br />

Another use for this is when you want to see your animations in “slow motion”. Setting time scale will allow the rhythm to be the same, you’re just slowing down the tempo, maybe you are interested in looking how a blur really looks or if some items are overlapping.



1. srinivas - December 15, 2011

thanks man Nice article to biggners

tournasdimitrios1 - December 15, 2011


Welcome , I’m glad it was helpful .

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s