Flash User

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;
circle.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.