Tutorials
In this tutorial, we're going to learn how to use the Flash AS3 Tween Class. The tween class lets you create tween animation using code.
Step 1
Let's first create a movie clip that we will use with our ActionScript 3 tween.
Draw a small circle and convert it into a movie clip symbol. Don't forget to give this circle an instance name. Let's name it circle_mc.
Step 2
Create a new layer for the ActionScript. Select the first frame of this layer, and then open up the Actions panel.
Step 3
We first need to import the Flash AS3 Tween class so that we will be able to use it. On the first line, type:
Aside from the tween class, we also need to import the easing classes. So in the next line, type:
The easing classes allow us to specify different kinds of tween effects. There are 6 easing classes in the AS3 easing package. These are:
Each easing type will apply a different effect to your tween animation.
And now that we've imported the necessary classes, let's create a tween using code.
Step 4
To create an AS3 tween object, type new Tween() and assign in to a variable. Let's name this tween tweenX. After the import statements, type:
This creates a new tween object named tweenX. Let's use this tween object to make our circle on the stage move from the left to the right. To do that, we'll need to pass a few arguments to the Tween() constructor.
The Tween() constructor needs 7 arguments. First, we need to specify the object that we want to tween. In this case, that would be circle_mc. So type in circle_mc inside the parentheses of the Tween() constructor.
After that, we need to specify the name of the property of the object that we would like to tween. If you wanted to create a fading animation, then you can specify the alpha property. If you wanted to create a scaling animation then you can specify the width, height, scaleX or scaleY properties. But since we want to make the circle move horizontally, then we can use the x property. So let's pass that to the Tween() constructor as well:
The property name is a string so it should be in quotation marks.
The third argument we need to pass is the easing type that we want to use. The easing type will apply an effect to the movement in the tween. Let's try using Bounce.easeOut for this tween. This will create a bouncing effect when the circle reaches the end of the animation.
The fourth argument we need to pass is for the starting value of the object's property that we are tweening. So since we are using the x property, this next argument that we pass will be for the starting x position of the circle. Let's specify a value of 100.
So when the tween starts, circle_mc will have a starting x position of 100.
The fifth argument we need to pass is for the ending value of the object's property. Let's specify a value of 400.
So this means that at the end of the tween, our circle will be positioned at x = 400.
The sixth argument we need to pass is for the duration of the tween. You can specify the duration in frames or in seconds. Let's specify a duration of 3 seconds.
The seventh and last argument we need to specify is a boolean - true or false. If we specify true, then this means that the duration will be in seconds. If we specify false, then the duration will be in frames. Since we want our tween to play over a period of 3 seconds, then we should specify a value of true.
And now our tween is complete. Test the movie to preview the animation.
Step 5
Here is a list of all the other easing functions that you can use. Try them out to see how they look like. Simply replace the third argument in the Tween() constructor with a new easing function of your choice.
Step 6
If you want to tween other movie clips, then you'll have to create new tween objects for each movie clip that you want to tween. Even if you want to tween different properties of the same movie clip instance, you'll still need new tween objects for each. So if we also wanted to tween the scaleX and scaleY properties of circle_mc, then we'll need to create two more tween objects for each property.
Here, aside from moving horizontally, the circle will also grow. We're starting out with a scaleX and scaleY of 1, and moving up to a value of 2 within 3 seconds. This means that the circle will grow from 100% to 200% both horizontally and vertically within that period.
We don't need to use the same easing functions, starting values, ending values, and durations for all our tweens. Try playing around with different values, and see what you can come up with.
And that concludes this Flash AS3 Tween Class tutorial.
- Sample Code From Today's Class On As3 Tweens (2011-02-17)
I talked about the AS3 Tween class today and how it can be used to create motion tweens using AS3 code. For the example discussed in class, I used a for loop to create multiple sprite instances, and multiple tween objects to animate those sprites. The...
- Flash 8 Masking Effect | How To Create A Mask In Flash 8 Video Tutorials
In this series of Macromedia Flash 8 video tutorial clips, we'll show you how to create a Flash 8 Masking effect. A Flash 8 mask layer can be used to hide some portions of a layer underneath it, revealing only select areas. It's pretty simple...
- Flash Actionscript 3 Tutorials - Beginners
ActionScript is a programming language used to develop applications that will run on the Adobe Flash Player platform. In this page, you'll find a list of beginner's level ActionScript 3 tutorials that will help you understand how to use the ActionScript...
- Flash 8 Motion Tween Video Tutorials | The Basics Of Motion Tweening - Animating Position, Color, Size And Using The Easing Property
In this set of Macromedia Flash tutorial online video training clips, we'll show you the basics of Motion Tweens in Macromedia Flash 8. In these tutorials, you'll learn how to animate the following properties of an object: position - make an object...
- Flash 8 Motion Guide Animation Tutorial Video Series
This tutorial was made for Flash 8. For Flash CS5 users, check out adding a motion guide in Flash CS5. In this Macromedia Flash 8 tutorial video training series, we'll teach you how to use the Flash 8 Motion Guide. When creating motion tween movements...
Tutorials
The Flash AS3 Tween Class
In this tutorial, we're going to learn how to use the Flash AS3 Tween Class. The tween class lets you create tween animation using code.
Step 1
Let's first create a movie clip that we will use with our ActionScript 3 tween.
Draw a small circle and convert it into a movie clip symbol. Don't forget to give this circle an instance name. Let's name it circle_mc.
Step 2
Create a new layer for the ActionScript. Select the first frame of this layer, and then open up the Actions panel.
Step 3
We first need to import the Flash AS3 Tween class so that we will be able to use it. On the first line, type:
import fl.transitions.Tween;Aside from the tween class, we also need to import the easing classes. So in the next line, type:
import fl.transitions.easing.*;The easing classes allow us to specify different kinds of tween effects. There are 6 easing classes in the AS3 easing package. These are:
- Back
- Bounce
- Elastic
- None
- Regular
- Strong
Each easing type will apply a different effect to your tween animation.
And now that we've imported the necessary classes, let's create a tween using code.
Step 4
To create an AS3 tween object, type new Tween() and assign in to a variable. Let's name this tween tweenX. After the import statements, type:
var tweenX:Tween = new Tween();This creates a new tween object named tweenX. Let's use this tween object to make our circle on the stage move from the left to the right. To do that, we'll need to pass a few arguments to the Tween() constructor.
The Tween() constructor needs 7 arguments. First, we need to specify the object that we want to tween. In this case, that would be circle_mc. So type in circle_mc inside the parentheses of the Tween() constructor.
var tweenX:Tween = new Tween(circle_mc);After that, we need to specify the name of the property of the object that we would like to tween. If you wanted to create a fading animation, then you can specify the alpha property. If you wanted to create a scaling animation then you can specify the width, height, scaleX or scaleY properties. But since we want to make the circle move horizontally, then we can use the x property. So let's pass that to the Tween() constructor as well:
var tweenX:Tween = new Tween(circle_mc, "x");The property name is a string so it should be in quotation marks.
The third argument we need to pass is the easing type that we want to use. The easing type will apply an effect to the movement in the tween. Let's try using Bounce.easeOut for this tween. This will create a bouncing effect when the circle reaches the end of the animation.
var tweenX:Tween = new Tween(circle_mc, "x", Bounce.easeOut);The fourth argument we need to pass is for the starting value of the object's property that we are tweening. So since we are using the x property, this next argument that we pass will be for the starting x position of the circle. Let's specify a value of 100.
var tweenX:Tween = new Tween(circle_mc, "x", Bounce.easeOut, 100);So when the tween starts, circle_mc will have a starting x position of 100.
The fifth argument we need to pass is for the ending value of the object's property. Let's specify a value of 400.
var tweenX:Tween = new Tween(circle_mc, "x", Bounce.easeOut, 100, 400);So this means that at the end of the tween, our circle will be positioned at x = 400.
The sixth argument we need to pass is for the duration of the tween. You can specify the duration in frames or in seconds. Let's specify a duration of 3 seconds.
var tweenX:Tween = new Tween(circle_mc, "x", Bounce.easeOut, 100, 400, 3);The seventh and last argument we need to specify is a boolean - true or false. If we specify true, then this means that the duration will be in seconds. If we specify false, then the duration will be in frames. Since we want our tween to play over a period of 3 seconds, then we should specify a value of true.
var tweenX:Tween = new Tween(circle_mc, "x", Bounce.easeOut, 100, 400, 3, true);And now our tween is complete. Test the movie to preview the animation.
Step 5
Here is a list of all the other easing functions that you can use. Try them out to see how they look like. Simply replace the third argument in the Tween() constructor with a new easing function of your choice.
| Back | Bounce | Elastic |
| Back.easeIn Back.easeOut Back.easeInOut | Bounce.easeIn Bounce.easeOut Bounce.easeInOut | Elastic.easeIn Elastic.easeOut Elastic.easeInOut |
| None | Regular | Strong |
| None.easeNone | Regular.easeIn Regular.easeOut Regular.easeInOut | Strong.easeIn Strong.easeOut Strong.easeInOut |
Step 6
If you want to tween other movie clips, then you'll have to create new tween objects for each movie clip that you want to tween. Even if you want to tween different properties of the same movie clip instance, you'll still need new tween objects for each. So if we also wanted to tween the scaleX and scaleY properties of circle_mc, then we'll need to create two more tween objects for each property.
import fl.transitions.Tween;
import fl.transitions.easing.*;
var tweenX:Tween = new Tween(circle_mc, "x", Bounce.easeOut, 100, 400, 3, true);
var tweenScaleX:Tween = new Tween(circle_mc, "scaleX", Bounce.easeOut, 1, 2, 3, true);
var tweenScaleY:Tween = new Tween(circle_mc, "scaleY", Bounce.easeOut, 1, 2, 3, true);Here, aside from moving horizontally, the circle will also grow. We're starting out with a scaleX and scaleY of 1, and moving up to a value of 2 within 3 seconds. This means that the circle will grow from 100% to 200% both horizontally and vertically within that period.
We don't need to use the same easing functions, starting values, ending values, and durations for all our tweens. Try playing around with different values, and see what you can come up with.
And that concludes this Flash AS3 Tween Class tutorial.
- Sample Code From Today's Class On As3 Tweens (2011-02-17)
I talked about the AS3 Tween class today and how it can be used to create motion tweens using AS3 code. For the example discussed in class, I used a for loop to create multiple sprite instances, and multiple tween objects to animate those sprites. The...
- Flash 8 Masking Effect | How To Create A Mask In Flash 8 Video Tutorials
In this series of Macromedia Flash 8 video tutorial clips, we'll show you how to create a Flash 8 Masking effect. A Flash 8 mask layer can be used to hide some portions of a layer underneath it, revealing only select areas. It's pretty simple...
- Flash Actionscript 3 Tutorials - Beginners
ActionScript is a programming language used to develop applications that will run on the Adobe Flash Player platform. In this page, you'll find a list of beginner's level ActionScript 3 tutorials that will help you understand how to use the ActionScript...
- Flash 8 Motion Tween Video Tutorials | The Basics Of Motion Tweening - Animating Position, Color, Size And Using The Easing Property
In this set of Macromedia Flash tutorial online video training clips, we'll show you the basics of Motion Tweens in Macromedia Flash 8. In these tutorials, you'll learn how to animate the following properties of an object: position - make an object...
- Flash 8 Motion Guide Animation Tutorial Video Series
This tutorial was made for Flash 8. For Flash CS5 users, check out adding a motion guide in Flash CS5. In this Macromedia Flash 8 tutorial video training series, we'll teach you how to use the Flash 8 Motion Guide. When creating motion tween movements...