Caurina Tweener by Zeh Fernando - tutorial 1

[Flep]

Hi!

You certainly have realised that more then once, I used some Tweeners which are not implemented by default in Flash CS3.
For this reason, I would like to introduce you this: caurina di Zeh Fernando.

Personally, I find it very useful and well done.
Manageable, easy to use and with very elegant effects.
In this first tutorial of the serial, I will explain how to import the Tweener and how to apply the first most simple effect.
It is very useful and often can save time for those who do not want to write entire code to create effect such as inertia, acceleration, spring"

Let us look at some examples"

You can find the technical characteristics of this class to the following url:
Tweener Documentation and Language Reference
And download the files from this link:
http://tweener.googlecode....62_as3.zip

To use this Tweener, we need to keep the folder "caurina" in the same folder as the main FLA.
Next, we import the Tweener Class the following way:

import caurina.transitions.Tweener;

Example 1 - simple tween

I create a FLA and I save it as "main_1.fla".
Into which I have a MovieClip placed on stage with an instance name "clip_mc".
I open the action panel and I write:

import caurina.transitions.Tweener;

Tweener.addTween(clip_mc,{x:500,time:1,transition:"easeOutBounce"});

After having imported the class, we can simply add a tween calling it as follow:
Tweener.addTween(clip_mc,{x:500,time:1,transition:"easeOutBounce"});

Briefly:
I call Tweener.addTween passing to it as a first value the MovieClip to which I want to apply the tween and then an object (in the square brackets) with the parameters that I wish to use.
In this case, I pass the x with a value equal to 500 (the x coordinate of clip_mc)
I pass 1 as the duration of the tween in second
I pass transition as a string that defines the type of transition I wish (you can find a complete list of transition at this url: Tweener Documentation and Language Reference.)



Example 2 - multi tween

I create a FLA and I save it as "main_2.fla".
I open the action panel and I write:

import caurina.transitions.Tweener;
var my_array:Array=new Array();
var timer:Timer;

for(var i:int=0;i<10;i++)
{
	var clip:MovieClip=new MovieClip();
	clip.graphics.beginFill(0x33FFFF,1);
	clip.graphics.drawRect(0,0,35,35);
	clip.graphics.endFill();
	addChild(clip);
	my_array.push(clip);
	clip.x=35+clip.width*i+10*i;
	clip.y=10;
}

timer=new Timer(300,my_array.length);
timer.addEventListener(TimerEvent.TIMER,cambiaColore);
timer.start();

function cambiaColore(evt:TimerEvent):void
{
	Tweener.addTween(my_array[evt.target.currentCount-1],{_color:0x333333,time:1,transition:"easeInBounce"});
	Tweener.addTween(my_array[evt.target.currentCount-1],{y:100,time:1,transition:"easeInBounce"});
}

I create 10 MovieClip with a cycle and I add them to an Array.
I start a Timer that will a function into which I apply 2 tweens ( one on the colour and one on the y ) to the MovieClip retrieved from the index of the Array with a value equal to currentCount of Timer at that precise moment.



Example 3 - how to intercept when the tween is finished

Sometimes, it is needed to know when the tween animation that we have applied to a MovieClip is finished.
This way, we can call other functions and carry out other codes in our Flash project.
To intercept the event that is initiated by Tweener at the end of the animation, we need to pass a parameter named onComplete to the method addTween the following way:

import caurina.transitions.Tweener;

Tweener.addTween(clip_mc,{x:500,time:1,transition:"easeOutBounce",onComplete:ItsDone});

Together with onComplete, I pass the name of the function that I want to be carried out at the end of the tween (in this case, I named it ItsDone).



Se you soon !

[sinewaver]

Hi Flep,
I'm sorry for my blindness but I can't see where I am going wrong. I follow your instructions exactly ( I believe) - I have even copied and pasted the code to ensure no errors there - but I continue to get 3 compiler errors, telling me that there are:
Incorrect number of arguments
on various lines in Tweener.as. (190,883, 908) That can't be right, can it?
Can you please tell me where I am making the error?

[Flep]

Hi sinewaver and welcome

Let me see the code of your Tweens please

[sinewaver]

Hi Flep,
Thanks for getting back so quickly.
For instance:
The fla. is called Box.fla and has a movieclip called box in the library.
import caurina.transitions.*;

Tweener.addTween(Box,{x:300,time:2,alpha:100,trans ition:"easeOutBounce"});

[sinewaver]

Sorry! That should be:
import caurina.transitions.*;

Tweener.addTween(box,{x:500,time:2,alpha:100,trans ition:"easeOutBounce"});

Not sure how that hiccup arrived in the middle of trransitions, but it's not in my original code.

[Flep]

You need a MovieClip with instance name ( not library name ) box

[sinewaver]

Hi Flep,

Thanks for the reply - but I'm afraid that didn't solve things. box already had an instance name...
As I said, even when I copy and paste your exact actionscript from example1 and example 2 in the tutorial, I still get the same 3 compiler errors. On line 190, 883 and 908 of Tweener.as. '1137: Incorrect number of arguments'.
Do you have any further clues or hints as to what may be causing this?

sinewaver

[Flep]

Download the source, hope it helps:

http://www.flepstudio.org/sharing/sample_caurina_1.zip

[sinewaver]

Thank you. Something was up with the SVN version of caurina I had brought in... because when I put the caurina folder you sent into my com directory, everything worked.