Recipe 4.15. Animating Runtime Location Changes with ActionScript

Problem

You want to animate using ActionScript.

Solution

Use the mx.transitions.Tween class.

Discussion

All forms of animation discussed thus far in the chapter are created at authoring time and are effectively hardcoded. After playback begins, the animations can play back only in the way that you specified at authoring time. Because they are hardcoded in this way, these kinds of animation cannot respond to the user.

You may want to create animations that respond to user activity. For example, you may want to make an object move to the location of the mouse when the user clicks it. You must use ActionScript if you want to make such an animation.

There are several ways in which you can approach animating objects with Action-Script, but each has the same basic principleupdating the values of the property or properties over time. It's possible to use event handler methods such as onEnterFrame( ) or to use an interval function with setInterval( ) to accomplish the task. However, both of those approaches are slightly more complex (and require more ActionScript) than using the mx.transitions.Tween class to accomplish the task.

The mx.transitions.Tween class enables you to animate a change in a property with just one line of code. However, to make referencing the class a little simpler, it's generally recommended that you first use an import statement. The following line of code tells Flash to look for the Tween class in a package called mx.transitions. That way you don't have to refer to the class by its full name each time. It's recommended that if you want to use the Tween class, you add the following import statement at the top of the code:

 import mx.transitions.Tween; 

After that import statement, you can simply refer to the class as Tween rather than mx.transitions.Tween.

In order to animate a property of an object using the Tween class, you must construct a new Tween object using a new statement. The basic syntax is as follows:

 new Tween(objectToAnimate, property, easingFunction, startingValue, stoppingValue, duration, useSeconds); 

To start, we'll specify null for the third parameter. That means that the animation will occur linearly. (The alternative would be to use an easing function, which creates the illusion of acceleration and deceleration.) The following example tells Flash to move mCircle so that the x-coordinate starts at 0 and stops at 100. It tells Flash that the animation ought to span 10 frames.

 new Tween(mCircle, "_x", null, 0, 100, 10, false); 

Notice that the property name appears in quotes. If you forget the quotes, it will not work. If you want to move mCircle in both the x and y directions, you can add a second Tween object as follows:

 new Tween(mCircle, "_y", null, 0, 200, 10, false); 

The preceding example tells Flash to move mCircle in the y direction from 0 to 200 over the span of 10 frames. If you use both Tween objects, the movie clip will move in a diagonal line from 0,0 to 100,200 over the span of 10 frames.

The Tween class enables you to add listener objects that get notified each time the property is incremented. Therefore, it's possible to animate more than one property at a time using just one Tween object with a listener object updating the additional property or properties. However, it is generally simpler to use additional Tween objects, as in the examples.

If you set the last parameter to false, the duration is in frames. You may also specify the duration in seconds simply by setting the last parameter to true. For example, if you set the last parameter to true in the preceding examples, the animation would span 10 seconds.

You can apply easing to the animation by specifying an easing function reference for the third parameter of the Tween constructor. Although you can write your own custom easing functions, it is beyond the scope of this book to discuss how to do that. However, you'll likely find that the easing functions that ship with Flash are appropriate for most projects. You can find the easing functions grouped in classes in the mx.transitions.easing package. The classes are called Regular, Strong, Bounce, and Elastic. Each of the classes has the following methods: easeIn, easeOut, and easeInOut. That may sound like a like of technical jargon. It's really simpler than it might sound. In practical terms, it means that for the third parameter you can specify something such as mx.transitions.easing.Regular.easeIn or mx.transitions.easing.Elastic.easeOut. As with the Tween class, you are likely to find it simpler to use an import statement so that you can reference the easing class in the shortened form. For example, if you want to use the mx.transitions.easing.Elastic.easeOut method, you can use the following import statement at the beginning of the code:

 import mx.transitions.easing.Elastic; 

You can simply refer to the class as Elastic from that point forward. For example, a Tween constructor might then look like the following:

 new Tween(mCircle, "_x", Elastic.easeOut, 0, 100, 10, false);