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+

13 Responses to “Using Caurina Tweener Class AS3”

|
  1. […] the example post:  Using Caurina Tweener Class AS3 | Flash User Posted in Uncategorized | Tags: animations-with, create-complex, elegant-and, flash, […]

  2. […] DIRECT LINK » Go to SourceSubmit this to Script & StyleShare this on BlinklistShare this on del.icio.usDigg this!Post this on DiigoShare this on RedditBuzz up!Stumble upon something good? Share it on StumbleUponShare this on TechnoratiShare this on MixxPost this to MySpaceSubmit this to DesignFloatShare this on FacebookTweet This!Subscribe to the comments for this post?Share this on LinkedinSeed this on NewsvineShare this on DevmarksAdd this to Google BookmarksAdd this to Mister WongAdd this to IzebyShare this on TipdShare this on PFBuzzShare this on FriendFeedMark this on BlogMarksSubmit this to TwittleyShare this on FwispMoo this on DesignMoo!Share this on BobrDobrAdd this to Yandex.BookmarksAdd this to Memory.ruAdd this to 100 bookmarksAdd this to MyPlaceSubmit this to Hacker NewsSend this page to Print FriendlyBump this on DesignBumpAdd this to NingPost this to IdenticaIf you enjoyed this post, make sure you subscribe to my RSS feed! Tags: animations, caurina, link, Performance, transition, tween, Use […]

  3. […] This post was mentioned on Twitter by flashuser and jrgarou, dsaportfolio. dsaportfolio said: Using Caurina Tweener Class AS3 – http://tinyurl.com/ygewtog […]

  4. Social comments and analytics for this post…

    This post was mentioned on Twitter by dsaportfolio: Using Caurina Tweener Class AS3 – http://tinyurl.com/ygewtog

  5. john leigh says:

    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!

  6. Rodrigo says:

    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…

  7. […] back to my Flash days in first year of Advance Diploma. This is the first flash project i used Caurina Tweener which lead to a my love of jQuery syntax. I experiment with the UI of a video player to create […]

  8. Anonymous says:

    […] – alle sollen sich zum neuen y hin bewegen ? Dann musst Du stufe tweenen: Using Caurina Tweener Class AS3 | Flash User __________________ _______ Actionscript ist grauenhaft. Dennoch hat es auch seine Vorteile. Man […]

  9. Rob says:

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

  10. FortalezaPraia says:

    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!

|

Leave a Reply