Tweens are a way to create smooth movements. We have all learned how to create motion tweens and shape tweens in the timeline. Well now you can do them with actionscript too. You can even easily incorporate easing functions into these tweens. There is the undocumented Tween class in MX 2004 that will let us do this.
Why would we want to use a tween? Well for a lot of the same reasons you would in an animation. If you know where a point is going to start and end and how long it should take to get from one place to another, its a good time to use a tween. These work well for mouse over events to add a professional look to your menus, but thats only one example of how they can be used.
Constructor:
myTween = new mx.transitions.Tween(object, property, function, begin, finish, duration, useSeconds);
The parameters one by one:
object: The reference to (read: pathname for) the object on which the tween will act.
property: A string specifying the property of the object that you want to tween. Example: "_x", "_alpha" or "_yscale".
function: Reference to which tween / easing function to use (more below).
begin: The starting value of the property.
finish: The ending value of the property.
duration: The length of time of the motion. This will be in either frames or seconds depending on the next parameter.
useSeconds Is a boolean value. If set to true the duration will be in seconds, if set to false or left out duration will be in frames.
Easing Functions
I will explain the types of easing in terms of movement because it is the easiest to visualize but they are essentially the same regardless of what property you are tweening. There are three basic types of easing: easeIn, easeOut, and easeInOut. These are the same as you can select from the tween properties panel in Flash. easeIn eases into the tween meaning it starts out slower and finishes quicker. easeOut eases out of the tween meaning it starts out quick and fishes slower. easeInOut eases both into and out of the tween meaning its going the quickest in the middle.
There are also five types of eases you can use: Back, Bounce, Elastic, Regular and Strong.
Back: The object either eases into the tween by going the opposite direction of the target to create a sling shot effect or eases out of the tween by going just beyond the target and comming back to it or both.
Bounce: The object bounces. When used with easeIn the object bounces against the first point, when using easeOut the object bounces against the second point and when using both it bounces against both.
Elastic: This is a combonation of the Back and Bounce eases. The object goes just beyond and behind the begin and end point before launching itself to the opposite point.
Regular: This is just your standard run of the mill go from one point to the other tween. easeIn and easeOut will act as described above.
Strong: This is similar to regular except it uses a quadratic curve instead of a linear curve to do the movement. This means the easing will be much more dramatic.
There is also one final easing equation that doesn't fit into any of the above categories and that is: None.easeNone. It is a basic motion tween that does not use any sort of easing equation and is called the same way as the above equations.
You can use each of these like: Back.easeOut or Bounce.easeIn or Regular.easeInOut except be sure to call it with its full path name: mx.transitions.easing.Back.easeOut or mx.transitions.easing.Bounce.easeIn!
Basic Tween Use
Onto creating our first actionscripted tween! Draw a circle on your stage convert it to a movie clip and give it the instance name circle.
myTween = new mx.transitions.Tween(_root.circle, "_x", mx.transitions.easing.Regular.easeInOut, _root.circle._x, _root._xmouse, 10);
This will move the circle from its current x location to the location of the mouse's x using a regular ease in and out ease in 10 frames. Phew. Now Flash needs to know when to call it so add this code to your circle:
onClipEvent(mouseDown) {
myXTween = new mx.transitions.Tween(_root.circle, "_x", mx.transitions.easing.Regular.easeInOut, _root.circle._x, _root._xmouse, 10);
myYTween = new mx.transitions.Tween(_root.circle, "_y", mx.transitions.easing.Regular.easeInOut, _root.circle._y, _root._ymouse, 10);
}
Now if you test the movie each time you click it should make the circle move from wherever it is to the x,y point of the mouse. Play around with it, change the properties and practice with it a little to get a feel for how it works.
Continued in the next post ...
