Using Caurina Tweener Class AS3

I enjoy to use in my flash projects the caurina tweener class, because it’s simple, elegant and flexible. You can use multiple properties in one transition without having problems, create complex animations with a few lines of code. If you’ll use the caurina tween you’ll have a better performance on the transitions relative to the built-in Adobe Flash transitions.

I’ll explain to you how the Actionscript 3 Tweener works, illustrating that with examples.

Visit the official page of the project if you want to know more.

First of all download the latest version of the tweener. The download section (“Featured downloades”) is on the right side of the site.

Important: The caurina folder must be in the same directory as your Flash project.

This line of code will import the caurina tweener class:

import caurina.transitions.Tweener;

Lets see how the code for a basic transition look like:

Tweener.addTween(circle, {x:390, time:1, transition:"linear"});

where:

circle – is the DisplayObject
first parameter is the circle attribute
time – how long a transition will take in seconds
transition – the type of transition to use; to experiment with other transitions have a look at the Transition Cheet Sheets
for other parameters check out the documentation

1. Simple Tween:
Move the circle MovieClip instance from the initial position x = 10 to x = 390 in a linear transition.

import caurina.transitions.Tweener;

circle.x = 10;

Tweener.addTween(circle, {x:390, time:1, transition:"linear"});

2. Multiple MovieClip attributes:
Move the circle MovieClip instance from the initial position x = 10 y = 75 and alpha = 0 to x = 350 y = 150 and alpha = 1 in a linear transition.

import caurina.transitions.Tweener;

circle.x = 10;

circle.y = 75;

circle.alpha = 0;

Tweener.addTween(circle, {x:350, y:150, alpha:1, time:1, transition:"linear"});

3. Two transitions:
The first one will move the circle on the x axis,the second one will change the y axis, different transitions.

import caurina.transitions.Tweener;

circle.x = 10;

circle.y = 75;

Tweener.addTween(circle, {x:350, time:0.5, transition:"easeInQuart"});

Tweener.addTween(circle, {y:150, time:1, transition:"easeOutBounce"});

4. Delay parameter:
After the first transition is finished there will be a 1 seconds delay ( how it’s calculated: second transition delay – first transition time ) for the next transition to start.

import caurina.transitions.Tweener;

circle.x = 10;

circle.y = 75;

Tweener.addTween(circle, {x:350, time:0.5, transition:"easeInQuart"});

Tweener.addTween(circle, {y:150, time:1,transition:"easeOutBounce", delay:1.5});

5. onComplete parameter:
After the transition is finished you can do something else.

import caurina.transitions.Tweener;

tF.alpha = 0;

circle.x = 10;

rcle.y = 75;

Tweener.addTween(circle, {x:350, time:0.5, transition:"easeInQuart", onComplete:func});

function func() {

tF.alpha = 1;

}

6. onCompleteParams parameter:
If you want your onComplete function to have parameters you can do that using onCompleteParams.

import caurina.transitions.Tweener;

tF.alpha = 0;

circle.x = 10;

circle.y = 75;

Tweener.addTween(circle, {x:350, time:0.5, transition:"easeInQuart", onComplete:func, onCompleteParams:["Using onCompleteParams"]});

function func(t:String) {

tF.txt.text = t;

tF.alpha = 1;

}

7. Special Properties – Color:
This special class helps you to apply easy color transformation to your objects.

import caurina.transitions.Tweener;

import caurina.transitions.properties.ColorShortcuts;

ColorShortcuts.init();

circle.x = 10;

circle.y = 75;

Tweener.addTween(circle, {x:200, _color:0xFF0000, time:1, transition:"easeOutElastic"});

}

Experiment with various parameters and you’ll create amazing animations with just a few lines of code. You can go deep by using the Special Properties, see the online documentation for more.

Tutorial by Flashuser.

This entry was posted on Sunday, November 15th, 2009 at 9:45 am and is filed under ActionScript, Flash, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Tweener Class Tips! I've been using Tweener for almost an year now, and I thought I'd share a few quick and useful tips. Delayed...

Software SWF Encrypt for locking flash Do not use! Agency code and the lock on Flash ActionScript and especially relevant to the group of developers always flash...

printf function for ActionScript3 Function for doing string variable substitutions in AS3. Inspired by python's print and strtime. This is...

New Design & Features in FlashBannerOnline Hello New features and outline a new online flash banner and added some small error on your behalf to send us...

FlashBannerOnline