ActionScript 3 Tweens Tutorial
Since I think it’s something people want, I am going to do a tutorial about using ActionScript 3 to do animations. I recently made a new tutorial about using Tweener instead of the Tween classes, or even better, how to use TweenLite (TweenLite is smaller and faster than Tweener). I think it is better to use Tweener or TweenLite because it is easier to understand and it takes way less lines of code.
In this tutorial I’ll be using the Tween Classes already bundled in Flash Cs3. There are other ways to do this but I find it’s the easiest. You could do the same using onEnterFrames or Timers or the Zigo Engine (but it’s not yet AS3).
Ok first thing you will need to do is to draw a rectangle on the stage and then convert that shape to a movie clip. After that, give it an identifier name in the property inspector. Let’s name it “rectangle”. Now open the actionScript Window by pressing F9. Create a new layer on the timeline, name it actions, and start writing your actionscript there. The first thing we will need is to import the actual classes for tweening. Add these to line of code at the start.
import fl.transitions.Tween; import fl.transitions.easing.*;
The first line is to import the Tween, the second one is to import the Easing classes. I’ll explain what easing is later on.
Now all we need to do is add one line of code to make the rectangle move.
var myTween:Tween = new Tween(rectangle, "x", Strong.easeOut, 0, 300, 3, true);
This create a new tween object with its properties in the parenthesis. The first parameter is the object you want to animate. The second parameter is the property of that object that you want to animate. You can animate a lot of properties for a display object example: x, y, alpha, width, height, xscale, yscale, rotation etc. I’ll give some example later. The third parameter is easing. Fourth and fifth parameters are the starting and ending position of the property you are animating in this case, the rectangle will go from the x position 0 to the x position 300. The sixth parameter is the duration of the tween, in this case 3 seconds. And lastly the last parameter is if you want to use seconds or frames. I’ve always left that to true meaning use seconds, that way if you change the framerate of your movie, it doesn’t change the timing of your animation.
So if you test your movie, your rectangle will go from left to right in three seconds. Pretty boring, but it’s your first animation. What we can do next is affect more than one property at the time. But for that, we have to create a new tween for each property we want to affect.
var myTweenX:Tween = new Tween(rectangle, "x", Strong.easeOut, 0, 300, 3, true); var myTweenAlpha:Tween = new Tween(rectangle, "alpha", Strong.easeOut, 0, 1, 3, true); var myTweenWidth:Tween = new Tween(rectangle, "width", Strong.easeOut, rectangle.width, rectangle.width + 300, 3, true); var myTweenRotation:Tween = new Tween(rectangle, "rotation", Strong.easeOut, 0, 90, 3, true);
So here our rectangle fades in, moves to the left, becomes wider and turns right. Two things to see here. First the alpha property doesn’t work like in actionScript 2. Before, it ranged from 0 to 100; in ActionScript 3, it ranges from 0 to 1. It’s a minor difference, but you have to know it. Also as you can see with the width tween, you can put variables in the fourth and fifth parameters so that you don’t really know the beginning and ending values.
That is it for now, I’m going to bed, but later on I’ll add stuff about easing and how to time animations.
#1 by Jack - February 14th, 2009 at 04:47
This is a very clear tutorial, but three of the variable have the same name. You need to give the tween variables different names for each property. Something like this:
var myTweenX:Tween = new Tween(rectangle, “x”, Strong.easeOut, 0, 300, 3, true);
var myTweenAlpha:Tween = new Tween(rectangle, “alpha”, Strong.easeOut, 0, 1, 3, true);
var myTweenWidth:Tween = new Tween(rectangle, “width”, Strong.easeOut, rectangle.width, rectangle.width + 300, 3, true);
var myTweenRotate:Tween = new Tween(rectangle, “rotation”, Strong.easeOut, 0, 90, 3, true);
#2 by zedia.net - March 4th, 2009 at 11:50
@Jack
True, I made the change, thank you for showing me this.
#3 by alex - March 9th, 2009 at 12:51
You just saved me a lot of time, thanks!
#4 by chuck - March 14th, 2009 at 23:20
does the alpha work with transparent pngs? i’m upgrading a file and pngs could be in a movie with tweens w/ no prob, but now it’s printing anything that’s “semi-transparent” as complete alpha… super weird. Any clue??
Thanks in advance,
C
#5 by eatme - April 23rd, 2009 at 10:29
this is ace. Thanks for the post.. having lots of fun with this.
#6 by Nate Lord - April 29th, 2009 at 23:17
thanks very much.
#7 by fickit - May 12th, 2009 at 18:23
Thanks for the tutorial.
#8 by history of online gambling - May 20th, 2009 at 06:37
I like this a lot, but what happens when there are multiple timelines in several movie clips? And what if the animation doesn’t start in the very first frame of the timeline? How do I execute my instance naming process for animations that don’t start in the very first frame of the timeline?
#9 by Paul - May 30th, 2009 at 16:08
Yeh really good! Im just trying to get the hang of this scripting but still need some pointers! Any chance you can give an example of using a timer with 3 images playing one after the other? Kind of like a simple slide show!
#10 by Steve - June 15th, 2009 at 16:25
For beginners i think http://www.republicofcode.com is a good start.
#11 by Dan - July 14th, 2009 at 11:54
What if I DONT want easing? Every tween tutorial I’ve read puts the Strong.easeOut or Strong.EaseIn in there. I just want a graphic to randomly float across the screen at an even rate.
#12 by zedia.net - July 14th, 2009 at 16:05
@Dan
You can use None.easeNone, if you use TweenLite or TweenMax it’s Linear.easeNone.
#13 by KillerBadger - July 28th, 2009 at 11:14
Why can’t all tutorials be written this clearly? ActionScript is anything but intuitive, so I rely on straightforward, how-to descriptions like this. Thank you.
#14 by Zac - September 15th, 2009 at 11:13
Thank you very much for this!
#15 by Bragadeesh - September 17th, 2009 at 07:20
Buddy,
Neat and Nice tutorial
#16 by Marble127 - September 28th, 2009 at 06:28
Great tutorial, thanks!
One question, though:
Wat if I want the tween to reverse once it reached the max, efectivly creating a bounce..?
Tanks,
Marble
#17 by zedia.net - September 28th, 2009 at 16:08
@Marble127
You could use a Bounce easing by replacing the Strong easing. Like this:
var myTweenWidth:Tween = new Tween(rectangle, “width”, Bounce.easeOut, rectangle.width, rectangle.width + 300, 3, true);
That would give you your desired effect.
#18 by Jenny - September 29th, 2009 at 07:40
My code is currently:
var rotationXEnd:Number = jenny.rotationX + 1046;
addEventListener(Event.ENTER_FRAME, rotate3d);
function rotate3d(e:Event):void {
if(jenny.rotationX < rotationXEnd){
jenny.rotationX += 55;
}else{
// do nothing
}
}
but I want to add ease and I'm trying to use this tutorial, but I don't really know how. Can you use the codes in this tutorial to make a Rotation X ?
#19 by KroooS - October 21st, 2009 at 04:20
#20 by Porter - October 25th, 2009 at 16:26
As I dive deeper and deeper into OOP, flash becomes more and more clear. Even things such as tweens have their own classes, something I never would have saw before OOP. Nice tutorial, thanks for sharing.
#21 by Nukolar - November 25th, 2009 at 13:05
Thx a lot for the nice tutorial
#22 by Magul - December 20th, 2009 at 07:31
hi (new to flex) fl.transitions.Tween is not working for me, after a bit search came to know that for flex sdk guys its import “mx.effects.Tween”; and “import mx.effects.easing.*;” but the tween class does not get the parameters same as in flash Tween class
yeah i did concern the documentation but still i cant do this same thing with mx.effects.Tween… plz any1 help me
#23 by Jose Carlos - December 21st, 2009 at 18:56
I added the code in the exemple but I dont see the animation ….
import fl.transitions.Tween;
import fl.transitions.easing.*;
myButton.addEventListener(MouseEvent.CLICK, myButtonClick);
function myButtonClick(e:MouseEvent):void {
var mc:MyMC = new MyMC();
var myTween:Tween = new Tween(MyMC, “x”, Strong.easeOut, 485, 300, 3, true);
trace(myTween);
myTween.start();
}
I am usgin CS4 and AS3 … pleas help
#24 by Rhonda - December 23rd, 2009 at 14:29
Are you interested in teaching a university night school course (Toronto) in January?
Rhonda
#25 by zedia.net - December 24th, 2009 at 13:39
I’d be really happy too, except for the fact that I live in Montreal… that makes it a far.
#26 by joe - December 25th, 2009 at 17:24
What do the code hints mean after the easing type (I’ve never seen this addressed in any of the Tween class tutorials, nor does the AS3 reference make it clear at all.
I’m referring to the Back.easeOut(t:Number,b:Number,c:Number,d:Number) that pops up when typing the script.
#27 by ranacseruet - December 31st, 2009 at 03:31
I am trying to do the following:
var myTweenAlpha:Tween = new Tween(rectangle, “alpha”, Strong.easeOut, 0, 1, 3, true);
it showing error with as 3.0:
“1067: Implicit coercion of a value of type Boolean to an unrelated type Number.”
can you please let me know its this. the last parameter is boolean as i know. so why this error?
#28 by zedia.net - January 5th, 2010 at 17:32
@joe
I never used parameters when using an easing function. Anyway I believe the Tween is passing those parameters so that you don’t have to wrap your head around this. But it could still be interesting to find out if you can play with them.
@ ranacseruet
Your Tween seems ok I don’t know it is giving you an error
#29 by zedia.net - January 5th, 2010 at 17:48
Yes the fl package is Flash specific as the mx package is Flex specific. I would advise on using TweenLite as it can work both in Flash and Flex and is way faster and easier to use.
#30 by Keith - January 14th, 2010 at 15:48
@fickit
very nice tyvm
Do I have to create a new tween object every time I want to change something, or does the tween object exist and I can manipulate it with some function?
For example, if I want to fade an image in and out based on a mouseover, do I need to run the “new Tween(VARIABLES);” command every time?
#31 by zedia.net - January 14th, 2010 at 16:10
Yes you have to create a new Tween every time.
#32 by Joshua - January 28th, 2010 at 01:47
I agree, the built-in Tween class is pretty poor compared to most libraries out there. I use Actuate, since it is faster than TweenLite and I find it easier to use.
#33 by CheDragon - January 28th, 2010 at 21:21
Nice tutorial, very clear and you saved me a lot of time, thanks!
#34 by h3d0 - January 29th, 2010 at 06:45
Very nice! Thank you a lot. I’ve solved my problem in 5 minutes (it would cost me a couple of hours with my previous methods)
#35 by LukeMack - February 8th, 2010 at 20:02
Great tutorial – this has really cleared up a lot of things for me in terms of script based tweening.
However, I’m starting to do more sophisticated tweens and sequences of tweens, based around your tutorials and for some reason the tweens either never start, stop half way through or never finish quite properly. Do you have any suggestions?
#36 by DavidW - February 10th, 2010 at 16:23
@LukeMack
I had that exact same problem until I came across this site http://www.rgbeffects.com/blog/development/tween-freeze-frustrations-avoid-actionscript-tweens-stalling-out/ if you declare your tween variables outside of the function then you shouldn’t have a problem. It is to due with the garbage cleaner removing the variables before the tween has time to finish. Hope this helps!
#37 by Ej - February 23rd, 2010 at 01:35
I Love this!!!
One thing though…
Every time I click on the button the shape keeps getting bigger and bigger??
Anyway to stop that???
THANKS!
#38 by Ej - February 23rd, 2010 at 01:48
Here I posted the example I am talking about
http://www.dndexecutive.com/tweentest/Tweener_Test.html
If you hit the same button again and again it just keeps getting bigger and bigger.
What do you think?
#39 by atasözleri - February 25th, 2010 at 11:48
THank you wonderful working!