Mar
10
Intro to ActionScript 3.0 Tweening
I am going to talk about how to animate using Tween objects in ActionScript. Tween objects are enormously useful. They can change any numeric property of any object over time.
For example one of the most common uses of Tween objects in ActionScript is to fade an image out as another fades in. The advantage of using a Tween object to do this instead of any of your other options is
- 1.) it is easy to understand
- 2.) it is the easiest to code
- 3.) it generally looks the best.
It’s fairly easy to write a bit of code that will change the X position of a movieClip by 2 every frame, but that will be very linear and boring. Also when does it stop? and how? You would have to create a lot of if() statements that just take forever to think through and would make your code harder to read. (VQ: lots of nested if statements are usually a thing to avoid)
With a Tween object you can use Easing methods. In the example that follows I used the Easing method Regular.easeInOut to start the motion with a little acceleration and then bring it to a stop in the same way.
If the motion of the dot gets annoying you can stop or start it again at any time by clicking on the Flash movie.
Notice how the motion is almost natural at the ends. It doesn’t just stop and turn around. The code used to create this motion is simple and short:
import flash.display.MovieClip;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*; //I like to import them all so it’s easy to play with later.
public class Oscillator extends MovieClip{
/*These constants allow me to change the tween without
digging through my code to find it. It’s just good practice*/
private const ANCHOR1:Number = 5;
private const ANCHOR2:Number = 565;
private const TIME:Number = 1.5;
private var myTweenX:Tween; //ALWAYS declare tweens as globals or properties
public function Oscillator() {
myTweenX = new Tween(this, "x", Regular.easeInOut, ANCHOR1, ANCHOR2, TIME, true);
myTweenX.start();
myTweenX.addEventListener(TweenEvent.MOTION_FINISH, yoyoTween);
}
//Yoyo simply runs the Tween in reverse. And then reverse of the reverse (forward).
private function yoyoTween(event:TweenEvent):void {
event.currentTarget.yoyo();
}
}
}
I would recommend downloading the source code for this movie at the bottom of the post and playing with some of the other Easing methods such as, Elastic, Strong, Bounce, Back, and None.
Alright! Before you go off and try to use Tweens all over the place I need to tell you about the most common mistake people make when using Tween objects. You must ALWAYS declare you Tween variables as globals (outside of any function) or properties (outside of any method).
If ever I see someone complaining about their Tween being buggy and cutting out halfway through the animation (and I see that complaint a LOT) it’s because they declared and ran their Tween from within a function or method. What happens (and this doesn’t ALWAYS happen, but it will eventually) is that the function finishes running before the Tween does. Then the Flash Run-Time Environment cleans up the memory (called garbage collecting) and your tween gets deleted! before it finishes. This might not happen while you are testing it yourself, but it will happen eventually while someone else is using it.
If you have Adobe Flash CS3 then you should type the word “Tween” in the ‘action’ panel then right click it and pick the bottom option on the drop down menu ‘View Help’. That will show you the EXCELLENT help files on tweens that come along with Flash. I’m just trying to introduce you to an incredibly useful tool… there really isn’t too much to teach about how to use it. You just need to play and experiment with it yourself.
You can also download my code for the Flash movie example earlier here: Oscillator Source
Tags: 3.0, ActionScript, Beginner, Tween
March 11th, 2008 at 3:36
Intro to ActionScript 3.0 Tweening…
I am going to talk about how to animate using Tween objects in ActionScript. Tween objects are enormously useful. They can change any numeric property of any object over time….
March 18th, 2008 at 19:41
hi
very well explained, I am looking for ways to improve the transition between the sections of one website I’m working on… can I apply the tween classes to the swf files that load to the main site as the different sections, or do I need some other script?
March 18th, 2008 at 22:38
Actually when you load external content, such as SWF files or images, they act very much like MovieClips (they are DisplayObjects which is the parent class to MovieClip). So, yes you can use tweens to fade or slide in new swf movies within your main movie once they are fully loaded.
Just set yourPageDO:DisplayObject = loader.content;
Then you can re-use your loader and tween yourPageDO however you want.
March 24th, 2008 at 10:46
i am gonna show this to my friend, brother