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.
With its unique combination of advantages, the motion tween is the animator’s friend. Motion tweens offer numerous benefits:
- Power
You can animate changes in position, overall color effect (brightness, tint, and alpha), and transformation (scale, distort, skew, etc.). Moreover, you can animate these in any combination at once.
- Ease of use
Flash does all the work for you, after you specify the beginning and ending states of the animation.
- Flexibility
You can customize the tween in several ways to create more compelling effects. With a motion tween, you can animate along motion guides, add acceleration and deceleration, adjust the duration of an animation, and add rotation. You can even orient animated elements to the motion path, on a motion-guided tween.
- File size
Because motion tweens use efficient symbols, they result in relatively compact .swf files.
To create a motion tween in Flash, complete the following steps:
Create or convert an existing element to a graphic, button, or movie clip symbol.
If you haven’t done so already, create a layer for the animation. Also, if you are starting the tween on a frame other than frame 1, you should create a keyframe at the appropriate point on the timeline. Only one element can be placed within a keyframe if you plan to add a motion tween to it. Adding more than one element to a keyframe to which you apply a motion tween will likely cause the tween to work incorrectly.
Drag an instance of the symbol from the library to the stage. Ensure that you are placing the instance within the correct keyframe.
Define the instance’s starting state: specify its location, color effect, transformation state (skewed, scaled, distorted, and/or rotated), and so on.
Create a new keyframe later in the same layer. The instance in its starting state is copied into the new keyframe.
Modify the new instance to indicate its ending state. That is, move it to a new location, transform it to a new size or degree of rotation, and/or adjust its opacity, brightness, and tint (using the Color drop-down menu in the Property inspector). When finished, you’ve defined the beginning and ending states of the element.
To insert the motion tween, click the keyframe containing the first state (or any frame in its frame span). Select Insert → Timeline → Create Motion Tween from the main menu. You can also add the motion tween by right-clicking or Command-clicking on the starting keyframe and selecting Create Motion Tween, or by selecting the starting keyframe and then selecting Motion Tween from the Tween menu in the Property inspector.
After you have defined the tween, the frame span in the timeline turns indigo, and an arrow points from the first keyframe to the ending keyframe.
If you are motion tweening a change in location, the element animates in a straight line from the starting state to the ending state, at a constant rate. You can control both the motion path and the rate of motion in a tween. You can also cause the element to rotate in the course of the tween, or remain oriented to the path as it animates. These controls are discussed in the next several recipes.
Although motion tweens become second nature after a while, it is quite easy to make mistakes at first. These are a few common mistakes:
Accidentally forgetting to convert the elements you want to tween to a symbol before applying the motion tween, which can cause unexpected results. If you forget to convert the elements to a symbol, one of two things might occur, depending on the context—either the elements will remain as they are, or Flash will automatically convert the elements to a graphic symbol with a name such as Tween 26. In either case, chances are good that the tween won’t work. So make sure whatever you try to tween is already an instance of a symbol. You can tell when a tween will not work, because the horizontal line between the keyframes will be a dashed line instead of a solid line. The dashed line indicates that something seems to be amiss with the tween.
If you have more than one symbol instance on the keyframe to which you are applying the motion tween, the tween will not work. This is a very common mistake. If the instance merely jumps from one state to the next state without any of the tween states, check to make sure you don’t have any other instances or elements on the same keyframe. This is why it is recommended that you place each element on its own layer.
Get Flash 8 Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
