Using Tween Class in Flash AS3
Using Tween Class, we can animate, fade or move any specific movieclip to animate over a specified period of time.
import fl.transitions.Tween; import fl.transitions.easing.*; var myTweenX:Tween=new Tween(_mc,"x",Elastic.easeOut,36,260,3,true);
We can use different Easing mechanisms to perform this animation. We have following differnet Easing methods:
- Back : the animation will go beyond the end position before bouncing back into it
- Bounce: the animation will bounce back a few steps when it reaches the end position before settling at it
- Elastic: a mixture of Bounce and Back effects combined
- None: no special tweening, the object movement will not speed up along the path
- Regular: the animation will gradually increase or decrease in speed as specified by the easing method
- Strong: a more emphasised Regular effect
Each of the Easing Classes have following three defined funtions with different easing mechanisms:
- easeIn: Tween effect is appied at the start of the tween
- easeOut: Tween effect is appied at the endof the tween
- easeInOut: Tween effect is appied at the start and end of the tween
Inorder to use Tween Class, we need to import Tween Class and easing package into Flash.
import fl.transitions.Tween; import fl.transitions.easing.*;
Once importing is done, we need to do is to instantiate a new Tween object and apply your desired easing mechanism to any of the properties of a movieclip.
Here is the syntax for Tween:
var TweenObject:Tween = new Tween(Object:Object, property:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean = false)
For example, we are going to create a new Flash AS3 document in Flash and create a movieClip with instance name _mc. So, we have movieClip with name _mc. This is how we are going to create a new Tween Object using new operator.
var myTween:Tween = new Tween(_mc, "x", Elastic.easeOut, 36, 260, 3, true);
Here we are Tweening the "x" property of movieClip "_mc" from position "36" to position "260" in a time of 3 seconds. This is how it looks:
Tween Class has following events to perform actions at a specific instant:
-
motionChange - Indicates that the Tween has changed and the screen has been updated
-
motionFinish - Indicates that the Tween has reached the end and finished
-
motionLoop - Indicates that the Tween has restarted playing from the beginning in looping mode
-
motionResume - Indicates that the Tween has resumed playing after being paused
-
motionStart - Indicates that the motion has started playing
-
motionStop - Indicates that the Tween has been stopped with an explicit call to Tween.stop().
Using the above events, we can link differnt Tween together or we can play many Tweens one after the other etc. For example, if we want to complete the above animation by reversing the animation and to play continuously, we can use TweenEvent.MOTION_FINISH event to get the point where this Tween will end. Once the Tween reaches the end point, we can call a method Tween.yoyo() in the motionFinish eventHandler to reverse the Tween.
Tween.yoyo() basically reverses the Tween Animation in the opposite direction to complete the Tween.
Now our example will look something like this after using Tween.yoyo() in the eventHandler.
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
var myTweenX:Tween=new Tween(_mc,"x",Elastic.easeOut,36,260,3,true);
myTweenX.addEventListener(TweenEvent.MOTION_FINISH,setSecondTween);
function setSecondTween(e:TweenEvent):void{
myTweenX.yoyo();
}
And the resulting SWF wil be:
Using TweenEvent.MOTION_FINISH eventHandler, we chain up different Tweens one after the look like a chain-effect of different Tweens. For that you just need to instantiate a new Tween in TweenEvent.MOTION_FINISH eventHandler of the first Tween.
Similarly we can make use of different Tween EventHandlers to make out a Tween Effects.
We can use Tween on all the properties associated with a movieClip like position, opacity and now with 3D elements implemented in Flash, we can use Tween to make nice rotating animations. Here is a simple example:
import fl.transitions.Tween;
import fl.transitions.easing.*;
rotateX_btn.addEventListener(MouseEvent.CLICK, rotateX);
rotateY_btn.addEventListener(MouseEvent.CLICK, rotateY);
rotateZ_btn.addEventListener(MouseEvent.CLICK, rotateZ);
function rotateX(event:MouseEvent):void{
var myTweenX:Tween = new Tween(_mc, "rotationX", Elastic.easeOut, 0, 360, 3, true);
}
function rotateY(event:MouseEvent):void{
var myTweenY:Tween = new Tween(_mc, "rotationY", Elastic.easeOut, 0, 360, 3, true);
}
function rotateZ(event:MouseEvent):void{
var myTweenZ:Tween = new Tween(_mc, "rotationZ", Elastic.easeOut, 0, 360, 3, true);
}
Source Files for this Example are here.
Happy Tweening 
September 14th, 2009 - 11:28
Nice one swami…
But in the last section (3D), when I rotate X, the pivot or axis is on the left of the rectangle so you can see the left border of the rectangle not distorting in perspective. Does this pivot point mean the registration point of the rectangle mc? or is there something else adjustable to that?
September 15th, 2009 - 00:06
Hemanth,
The pivot or axis of rotation depends on the registration point of the reactangle movieClip. In this example here, i have set the registration point to be at the center of the movieClip.
September 15th, 2009 - 02:36
Adding more to above query…
You have an option to change the Perspective Angle view to 3D objects on the stage.
You can find it under PROPERTIES-> 3D POSITION AND VIEW-> Perspective Angle (Camera Icon).
It can take values from 1 to 180. The deafult value is 55. Check by changing this perspective angle for the movieClip.
October 18th, 2009 - 07:37
Is there a tutorial or a download of FLA and .as files for it as i wish to do the tutorial ….
Thank You
October 18th, 2009 - 10:33
Mr. Patel,
The best tutorial i can suggest you is Flash Professional Help. It has everything.
You can get many Tutorials online as well…
Thanks
Swami
October 20th, 2009 - 11:21
Is this in Flash 9 AS3 ????
if so is there a word doc. tutorial for it???
As i am learning how to use Flash 9 ACS…..
Could you post it up…please
Thak You your great
October 20th, 2009 - 22:19
Mr H,
This Tween Class is part of Flash AS3. The whole documentation is present in Flash Help.
Thanks
October 21st, 2009 - 02:54
Its doent work the second one…. as the buttons click but the movie clip doesnt do anything???
i have named the instances exact and the same code no joy?? what am i doing wrong??
October 21st, 2009 - 02:58
when u had a button from the componets you name the instance rotateX_btn…i dont know whats going wrong
October 21st, 2009 - 03:01
Make sure you give the instance name for MovieClip corrently. Here i gave the instance name as ‘_mc’.
Did u give the correct instance name for MovieClip?
October 21st, 2009 - 03:09
yes _mc …………..it could ne done to the buttons…….i dragged the button component onto the stage and named the instances correctly…….what else could it be
October 21st, 2009 - 03:16
1. Made a square – created it as a movie clip (named -mc) and the instance the same.
2. added 3 buttons from the components list and names rotateX_btn…etc….(However its set as movie clip in the properties)
3. pasted the code??
October 21st, 2009 - 03:18
This should work. This is all need to be done to make it work.
Did u import all the Tween and easing classes in the beginning?
October 21st, 2009 - 03:21
import fl.transitions.Tween;
import fl.transitions.easing.*;
rotateX_btn.addEventListener(MouseEvent.CLICK, rotateX);
rotateY_btn.addEventListener(MouseEvent.CLICK, rotateY);
rotateZ_btn.addEventListener(MouseEvent.CLICK, rotateZ);
function rotateX(event:MouseEvent):void{
var myTweenX:Tween = new Tween(_mc, “rotationX”, Elastic.easeOut, 0, 360, 3, true);
}
function rotateY(event:MouseEvent):void{
var myTweenY:Tween = new Tween(_mc, “rotationY”, Elastic.easeOut, 0, 360, 3, true);
}
function rotateZ(event:MouseEvent):void{
var myTweenZ:Tween = new Tween(_mc, “rotationZ”, Elastic.easeOut, 0, 360, 3, true);
}
October 21st, 2009 - 03:22
I copied the source above??? is that right
October 21st, 2009 - 03:24
Yes, this should work.
Please again make sure if you gave the MovieClip’s Instance name correctly on the Stage.
October 21st, 2009 - 03:34
There are no action script errors…..
and the swf file opens up with no errors…….
it could be the buttons …not sure if i have done it right ….??
could u explain it from when u drag it to the stage please….
October 21st, 2009 - 03:40
To place buttons on the stage
1. Goto Components Panel (Ctrl+F7).
2. Drag button onto Stage.
3. Select button on stage and in Propeties panel, give the instance name as ‘rotateX_btn’ etc.
4. Similarly do the same for remaining 2 buttons.
5. Draw a square.
6. Select it, pres F8 to convert it to MovieClip Symbol.
7. Once its a movieClip, select that movieclip on the stage, goto Properties panel. Give the instance name as ‘_mc’.
8. Give the same code in Actions.
Make sure you follow these steps…
Let me if this works…
October 21st, 2009 - 03:48
did exactly what u have said……buttons click the movie clip is there
but doesnt rotate up, down and sidways???
is there a file that i could look at or u can zip send me
October 21st, 2009 - 04:05
Marc,
I have updated the post with a link to the source files. Check them out…
-Swami
October 21st, 2009 - 04:28
Hi Swami
In the swf file the movie clip doesnt move
the Fla file comes up with an “unexpected error”…and black stage and swf…
(i’M USING FLASH 9 , CS3, AC3)
October 21st, 2009 - 04:47
Marc,
The 3D Rotation is implemented only in Flash Player 10. These files are created using Flash CS4. Flash CS3 cannot simulate the 3D rotation. You need to have CS4 to get 3D rotation working.
Run this Swf on a browser which has Flash Player 10, you can see the rotation.
October 21st, 2009 - 04:48
Is there a version of CS3 Flash 9????
October 21st, 2009 - 04:50
Flash CS3 was released with Flash Player 9.
Inorder for this to work, you need to have Flash Player 10. You can have Flash Player 10 on your browser, just drag the swf into browser and you can see that it works.
Flash CS4 was released with Flash Player 10. This 3D was implemented in Flash Player 10, so you cant see the rotation in Flash Player 9.
October 21st, 2009 - 04:52
Is there a exercise like this using Flash 9 CS3????? that you have …
October 21st, 2009 - 04:58
In Flash CS3, we cannot implement 3D rotation as shown above. But the Tween will work for the remaining properties of a movieclip like x,y,alpha etc.
If you the second example in this post, it will work for Flash CS3 also.
Stil if you want to get the same effect of 3D rotation, you need to manully create such an animation youself.
October 22nd, 2009 - 09:46
do you know how to skin a combo box in AS3…FLASH 9….CS3 …by any chance dynamically ….
October 25th, 2009 - 12:40
Mr. H,
I have made a new post on Skinning Flash Components in Flash CS3. Check it out and let me know if you were looking for the same.
If not, please let me know about your queries…
Thanks
February 9th, 2010 - 07:38
really good tutorial Swami Charan ….
do you know how to do a quiz in flash CS3 as3 with a timer and maybe a database to store the results……
i need some sort of video tutorial or practice….i have been told to use php or xml ..??
but unsure
many regards
adam
February 10th, 2010 - 00:13
Hi Adam,
We can do such Quiz programs in using Flash. But we cannot directly communicate to database from Flash. We need to take support of Server-side scripting like PHP etc.
Adobe AIR has a local database SQLLite. If you use it, you can directly do database operations using AIR.
I think there are many tutorials on how to deal with PHP from Flash…
Please let me know for further info…
Thanks
Swami
March 12th, 2010 - 06:44
Hi Swami Charan
There are no tutorials as helpful as yours……..
At the moment I’am trying to create a flash quiz in As3 cs3 dynmically with the 10 qustions which is random from xml ……however its not working
on top of that i am trying to get a time limit for the questions and the show a report after the test with the score….
its not looking good……..do you know how to do it????
March 12th, 2010 - 06:54
Hi Swami Charan
Do you know anything about Flash AS3 in CS3 API mashups…???
or any good tutorials of how to create it????
March 12th, 2010 - 21:23
Hi Marco,
There are not many tutorials on Mashups with Flash, but you can just do research on your desired area. What do you want to create exactly???
Thanks
Swami
March 12th, 2010 - 21:25
Hey Adam,
Using Flash, you can make nice Quiz kind of applications. Reading data from XML is not that difficult. You can get much info about parsing XML on net.
Regading Timing, you can use Timer Class or setInterval() method to do any actions after a specified time.
Just try it out…
Thanks
March 13th, 2010 - 08:21
Hi Swami
Just a google map that has curosors and when u click on it it shows details of the place…….basicallu like google maps but in Flash as3
March 13th, 2010 - 08:39
Plotting markers on maps . with complexity of with muliple data sources: maps + photos + bookmarks +..
March 22nd, 2010 - 13:11
Hi Charan
I have 5 link buttons when i click the home button the moveclip has to easein from right and when i click other button for ex: contact_us button then the home moveclip has to easeout to left. Like wise as many button links the related buttons’ movieclip has to easein from right and when other buttons are click the current movieclip has to easeout towards left. Please help me
March 24th, 2010 - 05:10
Hi Amrita,
I will try to write a post on your query in a day…
Thanks
April 5th, 2010 - 12:12
Hi Charan
I have 5 link buttons when i click the home button the moveclip has to easein from right and when i click other button for ex: contact_us button then the home moveclip has to easeout to left. Like wise as many button links the related buttons’ movieclip has to easein from right and when other buttons are click the current movieclip has to easeout towards left. Please help me
i am desperately waiting for you suggestion
April 5th, 2010 - 12:16
Hi Charan
This is the example
http://www.dndexecutive.com/tweentest/Tweener_Test.html
but when the other button is clicked, the active movie clip has to go towards its opposite side
Thanks in advance
April 8th, 2010 - 02:39
Hi Amrita,
I have made a simple post on creating a menu in Flash AS3, check it out.
http://www.swamicharan.com/blog/flash/764/
Hope this will help you, let me know if there are any more queries…
Thanks