Chapter 4. Creating Animation

Before it was known as a platform for rich Internet applications, with its capacities for interactivity, XML, database integration, video, and real-time communications features, Flash was an animation tool. And in spite of its incredible growth in other directions, Flash remains an excellent tool for creating animations.

Animations simulate motion by playing back a series of related images, usually at a higher rate of speed than the eye and brain can process. Instead of processing each image individually, the brain connects the different images, causing the perception of motion. The effectiveness of this illusion of motion depends on numerous factors, ranging from the subjective and aesthetic to the objective, as in the case of frame rate.

Because animations usually depend on the rapid playback of many images, they are often time-consuming and painstaking to create. Drawing a single image can take hours; drawing hundreds or thousands of images to be played back at 12 frames per second or higher can be a daunting project indeed.

You can use a number of different techniques and tools in Flash to expedite and, in many cases, automate the process of creating animation, from Flash's ability to store separate discrete elements in symbols and layers to its ability to automate the animation of changes in properties, such as location and opacity. Features such as automatic acceleration and deceleration controls, rotation, and motion paths provide further control over the creation of animations. Thanks to onion skinning, or the ability to see multiple contiguous frames at once, Flash also simplifies positioning and modifying multiple frames simultaneously.

To build an animation, you can employ any combination of four different kinds of animation in Flash, as detailed in the following list. Each has its own strengths and limitations, so choosing the correct kind is a paramount consideration.

Frame-by-frame

Using this approach, the animator creates a succession of keyframes and manually changes the contents of each keyframe. This is the most painstaking and manual form of animation and results in the largest files. A last resort, this form of animation should be used only to create movements or effects that are impossible with the other forms of animation.

Motion tweens

The animator defines a beginning and ending state of a given element, and Flash generates a smooth transition from one to the other. Motion tweens excel with changes in position, angle/rotation, opacity, size, and other attributes of a given element.

Shape tweens

Also called morphing, shape tweens automate the transition of an element from one shape to another.

Tweens with custom easing

Though not strictly distinct from basic tweens, tweens with custom easing do stand out, because they enable much more sophisticated effects than standard tweens. The Custom Ease In/Ease Out panel is new to Flash 8 and is discussed in Recipe 4.4.

Scripted animation

When scripting animation, developers write ActionScript code that controls properties of a given object over time. These properties may include size, location, rotation, opacity, and so on. Moreover, the values of these properties can be changed in response to user interaction.

This chapter discusses numerous strategies for creating animation. In addition to showing the mechanics of creating certain kinds of animation, this chapter sheds light on the decision processes animators should go through to optimize the process of developing animations; there are often multiple ways to achieve the same effect, but some ways are intrinsically better than others in a given situation.

In all cases, one primary goal in developing Flash animations is to separate elements into discrete units and animate them individually. For example, rather than animating a character's face, you might animate the mouth, nose, and each eye separately. In fact, you might go even further, animating the eyelid separately from the pupil, for example. By dividing elements in this way, you simplify the movements you have to capture and, in so doing, make it more likely you can use one of the automated techniques, such as motion tweens.