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:
Code:
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:
Code:
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:
Code:
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:
Code:
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 !