Flashuser

  • Pin It

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

Author: Alin

Passionate about web and graphic design, photography and climbing. Follow me at Twitter , Facebook and Google+

  • Pingback: Using Caurina Tweener Class AS3 | Flash User | Class update today()

  • Pingback: Using Caurina Tweener Class AS3 | Programming Blog()

  • Pingback: Tweets that mention Using Caurina Tweener Class AS3 | Flash User -- Topsy.com()

  • Pingback: uberVU - social comments()

  • Pingback: 55+ Fresh Community Links for Designers and Developers | Programming Blog()

  • Pingback: 55+ Fresh Community Links for Designers and Developers | Master Design()

  • john leigh

    Nice little walkthrough. I have only recently been looking into Tween classes as had expected the built in Flash tween classes were fine to use. And in fact they are, the built in Flash tween class can do most the stuff Tweener does though Tweener gives a little extra ease of use, flexibility and access to a few things like _frame that usual Flash doesnt.

    many thanks again for the tutorial!

  • Rodrigo

    How do you reuse tweener with multiple objects doing the same thing for example:

    Is it possible to make this in 1 frame instead of jumping and declaring a new function?

    Frame 1:
    stop();
    import caurina.transitions.*;

    baker.scaleX = 0;
    baker.scaleY = 0;
    baker.alpha = 0;

    Tweener.addTween(baker, {scaleX:1, scaleY:1, alpha:1, time:0.7,delay:0.4, transition:”easeOutExpo”});

    var myTimer2:Timer = new Timer(6000,1);
    myTimer2.addEventListener(TimerEvent.TIMER, timerListener2);

    function timerListener2 (e:TimerEvent):void{
    Tweener.addTween(baker, {scaleX:0, scaleY:0, alpha:0, time:0.4,delay:0, transition:”easeOutExpo”});
    nextFrame();
    }
    myTimer2.start();

    Frame 2:
    stop();
    import caurina.transitions.*;

    city.scaleX = 0;
    city.scaleY = 0;
    city.alpha = 0;

    Tweener.addTween(city, {scaleX:1, scaleY:1, alpha:1, time:0.7,delay:0.8, transition:”easeOutExpo”});

    var myTimer3:Timer = new Timer(6000,1);
    myTimer3.addEventListener(TimerEvent.TIMER, timerListener3);

    function timerListener3 (e:TimerEvent):void{
    Tweener.addTween(city, {scaleX:0, scaleY:0, alpha:0, time:0.4,delay:0, transition:”easeOutExpo”});
    nextFrame();
    }
    myTimer3.start();
    myTimer2.stop();
    myTimer2.reset();

    and so on…

  • Pingback: 22 Great Free ActionScript 3.0 Learning Resources | Upside Learning Blog()

  • Pingback: Flash video player – Splat Labs()

  • Pingback: Anonymous()

  • Rob

    Thanks! I was looking for this, and it was the best walk through I’ve found. (So I clicked on some ads lol)

  • FortalezaPraia

    Hello there, I found your site via Google while searching for a related topic and your site came up, it looks great. I have bookmarked it and will be back. Time to head back to this amazing beach!