Animating in Flash

     

Animation is the illusion of movement created by a progressive sequence of still images. The emphasis is on the sequence . In producing the illusion of movement, the quality of the sequence is the crucial ingredient, and is more important than the quality of the images. This is true because animation is not the art of moving objects and drawings, but instead is the art of drawing and capturing motion. The art is in the action.

Macromedia Flash is uniquely equipped to produce animation. The vector format is perfectly suited for cartoon-like animation. Vector graphics produce shapes that can be easily and precisely transformed while maintaining small file sizes. Vector graphics offer the capability to zoom in and out on shapes , which helps to create convincing animation. Bitmaps can also be animated in Flash. Flash's symbol system is also ideal for animation. Symbols allow you to break animations into component parts and create complex animations using nested symbols.

Flash MX 2004 brings one major new feature in the area of animation: Timeline Effects. This feature allows you to create effects, most of them animated, just by setting parameters on configuration screens. Effects include fade-ins, fade-outs, wipes, drop shadows and blurs; simple position-rotation-scale animations; and just for good measure, fragmenting and "exploding" objects!

Frames and Keyframes

The Timeline is divided horizontally into frames ”discrete units of time. The Timeline is also divided into layers , which simulate depth ”whether objects are "in front of" or "behind" other objects.

The playhead displays a single frame at a time, and a nearly unlimited number of layers within each frame. Within a single timeline, you have to put content on different layers to animate objects individually using the techniques described in this chapter. (With ActionScript, separation on different layers is not a requirement for animating objects individually.) For instance, you might have a stationary background and several layers with content that animate at different points in your movie.

The Magic Number: 16,000

Have you ever wondered how big a Flash movie can be? Well, 16,000 is something of a magic number in Flash. It's the maximum number of frames (any more and playback will stop), symbol instances, layers, and loaded movies.

For more on Flash size limits, see "How big can a Flash movie be?," http://www.macromedia.com/support/flash/ts/documents/bigflash.htm.

A frame is a static slice of time ”the contents of the Stage at a particular moment. Keyframes are critical junctures where you define how you want the contents of the Stage to change. Flash creates animation by tracking change: where the contents of the Stage change ”keyframes ”and between frames in which the contents either remain the same (in frame-to-frame animation) or gradually approach the states defined in the next keyframe (in animations that use tweening ).

Adding, Editing, Deleting, and Copying Frames

When you create a new document, Flash provides a single layer with one frame. You add frames to define when the contents of a layer are visible. The overall length of a movie is determined by the highest frame number that occurs in any layer. Adding frames to a layer keeps content on the Stage longer. Deleting frames reduces the time that content is visible.

To add frames to a layer, click to select a frame in the Timeline and then press F5 to insert frames.

When content is added to the Stage, Flash converts the current frame to a keyframe, because the new content represents a change. Ordinary frames display the content of the keyframe that precedes them. Content remains static between keyframes unless a tween has been added.

Tweening

"Tween" comes from the term " inbetweening ." In classic animation, senior artists would sketch frames where crucial action occurs, and junior artists would fill in the intermediate frames, or "inbetweens." Similarly, when you create a tween in Flash, Flash acts as your junior artist, interpolating the changes between keyframes.

To add a keyframe, click to select a frame in the Timeline; then press F6 to insert a keyframe, which is displayed as a hollow circle, as shown in Figure 18.15.

Figure 18.15. Blank keyframes are displayed as hollow circles, and keyframes with content are shown as filled circles.

To delete frames or keyframes, select the frame or frames you want to delete, Ctrl-click (Mac) or right-click (Windows), and select Remove Frames from the context menu. To change a keyframe to an ordinary frame, removing the changes that occur in that keyframe without deleting the frame, select a keyframe, Ctrl-click (Mac) or right-click (Windows), and choose Clear Keyframe from the context menu.

To select multiple frames, click and drag across frames. You also can copy and paste frames. Select frames and/or keyframes, Ctrl-click (Mac) or right-click (Windows), and select Copy Frames from the context menu. Select another frame in the Timeline, and Ctrl-click (Mac) or right-click (Windows) and select Paste Frames from the context menu. You can copy and paste frames across layers. If you copy frames from multiple layers, they will paste into multiple layers.

Manipulating Keyframes

Keyframes can be added anywhere within a layer. Flash inserts frames, if necessary, to fill the distance between an existing keyframe and a new keyframe. A keyframe newly created with F6 displays the content of the preceding keyframe and allows that content to be changed. To clear the contents of the Stage on a particular layer, add a blank keyframe by selecting a frame and pressing F7.

Adding a keyframe extends the Timeline by one or more frames. You can also convert existing frames to keyframes or blank keyframes. Select one or more frames, Ctrl-click (Mac) or right-click (Windows), and select Convert to Keyframes or Convert to Blank Keyframes.

To move keyframes in the Timeline, select one or more keyframes, release, and click and drag the keyframe(s) to a new position, even to a new layer.

Frame Rate

The speed of motion is determined by your movie's frame rate and the number of frames over which the motion takes place. Flash allows you to set the frame rate, in number of frames per second, for your movie. It's best to set the frame rate for a document as soon as you open it, or you may have to tweak the length of your animations later if you change the rate. The easiest way to set the frame rate is as follows :

1. Click an unoccupied portion of the Stage. The document properties appear in the Property inspector, as shown in Figure 18.16.
   
   

   Figure 18.16. The frame rate of a movie is accessed in the document settings displayed in the Property inspector.

   
   
2. Click in the Frame Rate field and enter a number. The default fps (frames per second) is 12. Anything between 8 and 18 is acceptable for the Web. If you set higher rates, insufficient bandwidth and/or a processing- intensive movie may make the configured rate only intermittently achievable, resulting in random variations in the actual rate.
   
   

The higher the frame rate, the smoother the animation, and the larger the SWF. If you know your audience has higher bandwidth and faster computers, you have the luxury of using higher frame rates. In most cases, however, it's best to err on the side of caution and use lower frame rates. If a download takes too long, your audience may leave in frustration and never see your animation.

With the frame rate set, you can focus on the timing of your animations. Animations that unfold over a greater number of frames appear slower, whereas those that take place over few frames appear rapid.

Tweening

There are two types of animation in Flash: frame-by-frame and tweened . Frame-by-frame animation changes the contents of the stage in keyframes only. Frame-by-frame animation is both labor and file-size intensive but gives you complete control at every moment. Tweened animation consists of keyframes for critical changes, with Flash creating the intermediate steps between keyframes.

There are two types of tweens : motion and shape . Motion tweens interpolate changes in position, scale, rotation, color , and transparency of a single shape. Shape tweens interpolate differences between two shapes on a single layer, allowing you to morph or change one into the other.

Tweened objects must be symbols or groups on a single layer. If you attempt to tween simple shapes without converting them to symbols, a dotted line appears between keyframes and a caution symbol appears in the Property inspector, as shown in Figure 18.17.

Figure 18.17. A dashed line in the Timeline and a caution symbol in the Property inspector indicate incomplete tweens.

These symbols indicate that the tween is incomplete, and if you preview your animation, you'll see that your intended tween does not occur.

Motion Tweening

To create a simple motion tweened animation of a ball falling, follow these steps:

1. Open a new document by choosing File, New or by pressing Cmd-N (Mac) or Ctrl+N (Windows).
   
   
2. Select the Oval tool, and choose a fill color with no stroke.
   
   

   Different Strokes

   When animating solid shapes, use strokes only when necessary, that is, when the stroke is a different color than the fill. A stroke that is the same color as the fill is indistinguishable from the fill and requires Flash to perform unnecessary calculations that increase rendering time and file size.

   
   
3. Shift+drag with the Oval tool near the top of the Stage to draw a circle.
   
   
4. Select the circle and convert it to a symbol by pressing F8. Name the symbol ball , choose Graphic for the behavior, and click the center square in the registration grid. Click OK to close the Convert to Symbol dialog box.
   
   
5. Go to frame 12 and press F6 to insert a keyframe. Notice that nothing on the Stage has changed yet.
   
   
6. Using the Selection tool, click and drag the ball to move it to the bottom of the Stage, as shown in Figure 18.18.
   
   

   Figure 18.18. Insert a keyframe in frame 12 and use the Selection tool to move the ball to the bottom of the Stage.

   
   
7. Play your movie within the work area by pressing Return (Mac) or Enter (Windows). Notice that the ball is positioned at the top of the Stage for 11 frames and jumps to the bottom of the Stage only in frame 12. Without tweening, frames 2 “11 just display the content of the keyframe in frame 1.
   
   
8. To make your ball appear to gradually fall to the bottom of the Stage, select any frame between frames 1 and 12. Ctrl-click (Mac) or right-click (Windows) to access the context menu. Select Create Motion Tween. (Alternatively, you can select Motion from the Tween drop-down menu in the Property inspector.)
   
   
9. Play your movie again by pressing Return (Mac) or Enter (Windows). The ball now gradually falls over the course of all 12 frames.
   
   
10. Save your animation as ball.fla. You will be using it again later in this section.
    
    

You could have created the ball animation using frame-by-frame animation, but given the simple path of the animation, tweening works fine, reducing both effort and file size.

Motion Guides

When you create a motion tween, Flash follows the shortest path between positions in keyframes. This saves file size but isn't always desirable. For instance, suppose you want the ball in the previous example to bounce rather than merely fall. You can accomplish this with the help of a motion guide, by following these steps:

1. Open ball.fla.
   
   
2. Select frame 12.
   
   
3. Use the Selection tool to drag the ball instance to the right on the Stage.
   
   
4. Play your animation by pressing Return (Mac) or Enter (Windows). The ball travels at an unnatural angle from the top of the Stage to the lower right, as shown in Figure 18.19. You need to create a motion guide to overcome this problem.
   
   

   Figure 18.19. With motion tweens, Flash follows the shortest path between positions in keyframes, as revealed in Onion Skin mode.

   
   
5. Select the ball layer and choose Insert, Timeline, Motion Guide. A motion guide layer is added above the selected layer, as shown in Figure 18.20.
   
   

   Figure 18.20. To create a motion guide, select a layer and choose Insert, Motion Guide.

   
   
6. In the guide layer, use the Pencil or Pen tool to draw the path along which you want the ball to bounce. (Refer to the V-shaped line in Figure 18.20.)
   
   
7. Select frame 1 in the ball layer and check the Property inspector to ensure that Snap is checked, as shown in Figure 18.21. When Snap is selected, the registration point of a tweened object is snapped to the path of the motion guide. Your ball should appear snapped to the end of the motion guide.
   
   

   Figure 18.21. Select Snap in the Property inspector to snap the registration point of a tweened object to a motion guide.

   
   
8. Select frame 12 in the ball layer and, using the Selection tool, click and drag the ball to the end of the motion guide path until it snaps to the end.
   
   
9. Save your file as ball2.fla. Play your animation by pressing Return (Mac) or Enter (Windows). Your ball should follow the arc of your motion guide.
   
   

A motion guide works only if objects are snapped to the beginning and end of the motion guide path. The path is not visible in your published movie, so feel free to draw it in a color that contrasts with your tweened object to facilitate the snapping process.

For more information about motion guides, see the "Troubleshooting" section at the end of this chapter, page 439 .

Easing

When Flash creates a motion tween, it spaces the movements evenly over the frames between keyframes. To create gradual acceleration and deceleration, which often appears more natural, you can adjust easing in your tweens. Positive easing values (between 1 and 100) cause motion tweens to start quickly and decelerate near the end. This is known as easing out . Negative easing values (between -1 and -100) create tweens that speed up as they progress, known as easing in .

To change the Ease settings in the bouncing ball animation, follow these steps:

1. Open ball2.fla.
   
   
2. Click in the ball layer to select a frame in the motion tween.
   
   
3. Click the Onion Skin button in the Timeline so you can preview your animation, and click the Onion Marker button and select Onion All from the pop-up menu, as shown in Figure 18.22.
   
   

   Figure 18.22. Onion skinning options enable you to preview your animations by showing the contents of multiple frames simultaneously .

   
   
4. In the Property inspector, click on the Ease slider and drag it upward until the animation on the Stage appears slower near the end, as shown in Figure 18.23. With onion skinning turned on, you'll notice changes in speed represented by varying distances between objects in different frames.
   
   

   Figure 18.23. Onion skinning reveals changes in easing as varying distances between objects in different frames.

   
   
5. Save your file as ball3.fla and play or test your movie by hitting Enter or choosing Control, Test Movie.
   
   

Onion Skinning

Normally only one frame at a time is visible on the Stage. Onion skinning, however, allows you to see many frames simultaneously, as you saw in the preceding exercise. This ability to see frames in context is invaluable when you're creating animations. Turn on onion skins frequently as you create tweens to check alignment and easing.

Onion skins are also helpful in perfecting the timing of animations. When onion skins show no overlap in objects across frames, the animation is so rapid that it appears to jump, and detecting the continuity of movement is difficult.

Shape Tweens

Flash can interpolate dramatic changes in the shapes of objects. Shape tweens create the illusion of one shape morphing into another. Unlike motion tweens, shape tweens work only with simple shapes. You have to break apart a symbol instance, group , or bitmap to apply a shape tween to it.

To create a simple shape tween, follow these steps:

1. Open a new document by pressing Cmd-N (Mac) or Ctrl+N (Windows).
   
   
2. Click on the Stage and change the movie dimensions to 400x200 in the Property inspector.
   
   
3. Select the Rectangle tool, and choose a fill color and no stroke. Click and drag on the Stage to draw a large rectangle.
   
   
4. Press Cmd-K (Mac) or Ctrl+K (Windows) to open the Align panel. Select the rectangle on the Stage, and in the Align panel, select To Stage and center the rectangle horizontally and vertically, as shown in Figure 18.24, by clicking the second and fifth buttons in the Align row.
   
   

   Figure 18.24. Select To Stage in the Align panel and center the rectangle vertically and horizontally.

   
   
5. Select frame 15 in the Timeline and press F7 to insert a blank keyframe.
   
   
6. Select the Text tool, and choose a bold typeface and a large point size, such as 72, in the Property inspector. Click with the Text tool on the Stage and type your name.
   
   
7. Click the text with the Selection tool to select it. Use the Align panel to center it horizontally and vertically as you did in step 4.
   
   
8. With the text selected, choose Modify, Break Apart to break the text block into letters .
   
   
9. Choose Modify, Break Apart a second time to break letters apart into shapes.
   
   
10. Select a frame between keyframes, and in the Property inspector, choose Shape from the Tween pop-up menu, as shown in Figure 18.25.
    
    

    Figure 18.25. Select a frame between keyframes and choose Shape from the Tween pop-up menu in the Property inspector.

    
    
11. Save your movie and test it by choosing Control, Test Movie. The rectangle morphs into your name.
    
    

Easing can be applied to shape tweens. There is an additional option for blending , as shown in Figure 18.26. Blending is either distributive, which smoothes shapes during interpolation, or angular, which preserves the hard edges of shapes. Angular is appropriate for shapes with pronounced edges and angles.

Figure 18.26. Shape tweens have a blending option, which either smoothes shapes or preserves angles during tweening.

Shape tweens can inflate file sizes, so don't use them indiscriminately.

Shape Hints

In shape tweens as in motion tweens, Flash creates the simplest interpolation between shapes. This can produce strange and sometimes undesirable effects. For instance, parts of shapes can turn inside out during interpolation. You may be able to correct problems by identifying shape hints ”points that should correspond in the beginning and ending shapes.

To use shape hints, follow these steps:

1. Select the first shape in a shape tween sequence.
   
   
2. Choose Modify, Shape, Add Shape Hint. The beginning shape hint appears as a red circle containing the letter a .
   
   
3. Click on the shape hint with the Selection tool and drag it to the point you want to mark.
   
   
4. Click in the final frame of the shape tween. The corresponding shape hint appears in a similar position on the final shape.
   
   
5. Test your movie again to see how the shape hint affects the tween.
   
   

You can add as many as 26 shape hints.

Timeline Effects

Timeline effects, new in Flash MX 2004, allow you to manipulate graphics or symbols by setting parameters ”no ActionScript, Toolbox tools or tweening required. The preview window shows what the effect will look like with your new settings, before you commit to the effect.

To add a Timeline effect, follow this procedure:

1. With the Selection tool, click the object on the Stage.
   
   
2. Either select Insert, Timeline Effects, and then choose an effect; or else right-click (Windows) or Control-click (Macintosh) and select Timeline Effects, and then choose an effect from the context menu.
   
   
3. Select parameters.
   
   
4. If you change parameters, click Update Preview to view the effect with the new settings.
   
   
5. When you are satisfied with your effect, click OK.
   
   
6. Choose Control, Test Movie to test.
   
   

There are limitations to how far you can go with this approach. For instance, if you combine effects, only the most recent effect is editable via its configuration screen. You have to adjust other effects on the Timeline.

Table 18.1 shows all the Timeline Effects and their parameters.

Table 18.1. Timeline Effect Settings

Effect	Description	Settings
Copy to grid	Duplicates selected object in a grid.	Number of rows
		Number of columns
		Distance between rows, in pixels
		Distance between columns, in pixels
Distributed duplication	Duplicates a selected object with gradual transforms, and with the final copy reflects the parameters entered in the settings.	Number of copies
		Offset distance, x position, in pixels
		Offset distance, y position, in pixels
		Offset rotation, in degrees
		Offset start frame, in frames across Timeline
		Exponential scaling by x, y scale, in delta percentage
		Linear scaling by x, y scale, in delta percentage
		Final alpha, a percentage
		Change color, select/deselect
		Final color, in RGB hex value (final copy has this color value; intermediate copies gradually transition to it)
		Duplication delay, in frames (results in pause between copies)
Blur	Creates a motion blur effect by changing the alpha value, position, or scale of an object over time.	Effect duration, in frames
		Allow horizontal blur
		Allow vertical blur
		Direction of blur
		Number of steps
		Starting scale
Drop shadow	Creates a shadow below the selected element.	Color, in hex RGB value
		Alpha transparency, a percentage
		Shadow offset, in x, y offset in pixels
Expand	Expands, contracts, or expands and contracts objects over time. Groups objects or text in a movie clip or graphic symbol.	Expand duration, in frames
		Expand, squeeze, both
		Expand direction, to left, from center, to right
		Fragment offset, in pixels
		Shift group center by, x, y offset, in pixels
		Change fragment size by, height, width, in pixels
Explode	Fragments and "explodes" object.	Effect duration, in frames
		Direction of explosion, upward to left, center, or right, downward to left, center, or right
		Arc size, x, y offset in pixels
		Rotate fragments by, in degrees
		Change fragments size by, in degrees
		Final alpha, a percentage
Transform	Changes position, scale, rotation, alpha, and tint of the selected objects. Used for Fade In/Out, Fly In/Out, Grow/Shrink, and Spin Left/Right effects.	Effect duration, in frames
		Move to position, x, y offset, in pixels
		Change position by, x, y offset, in pixels
		Scale, lock to equally apply change, a percentage, unlock to apply x and/or y axis change separately, a percentage
		Rotate, in degrees
		Spin, number of times
		Times, counterclockwise, clockwise
		Change color, select/deselect
		Final color, in RGB hex value
		Final alpha, a percentage
		Motion ease
Transition	Wipes In, Wipes Out, Fades In, Fades Out selected objects.	Effect duration, in frames
		Direction, toggle between in (e.g. Fade In) and out (e.g. Fade Out), select up, down, left, or right
		Fade, select/deselect
		Wipe, select/deselect
		Motion ease

Scrubbing Through the Timeline

Previewing your animations in motion as you work is essential. Scrubbing refers to manually moving the playhead back and forth within the Timeline, allowing you to preview the progression of a movie. Simply click and drag the playhead (the red rectangle just above the top layer in the Timeline) and move it across frames to preview them. You can move as quickly or as slowly as you want. A red line extends from the playhead down through frames in the Timeline to indicate the current frame.

You can use the Control menu options or keyboard shortcuts to preview your movie. For instance, you can choose Play or press Return (Mac) or Enter (Windows), to play the movie Timeline once. You can choose Test Movie or Cmd-Return (Mac) or Ctrl+Enter (Windows) to play the movie continuously. You can step through a movie a frame at a time, using the period key to go forward and comma key to go backward.

Cartoon Animation in Flash: Panning

Flash's vector format is ideally suited to cartoon animation. Vector graphics resemble cartoon-style drawings and can be easily and accurately transformed in Flash. Many traditional cartooning techniques can be translated into Flash.

A classic animation strategy that can be translated to the Web is panning. Panning creates the illusion of depth of field and a continuous background. In film this would be achieved by panning the camera, or moving the camera across a scene at a fixed height to capture the full sweep of a distant background. In animation, this effect is simulated by moving the background across the fixed Stage.

The secret to creating a convincing pan is to create background elements that are animated at different rates. The most distant element should move at the slowest rate. Objects in the foreground appear to move relative to the scene behind them, creating the illusion of depth.

To produce a pan effect, follow these steps:

1. Create a background element that is wider than the Stage. Ideally, the left and right edges of the background should match up so that the background appears seamless when it loops while in motion.
   
   
2. Tween the background element across the Stage so that in the first keyframe the right edge of the background is flush with the right edge of the Stage. In the final keyframe, the left edge of the background should be flush with the left edge of the Stage. This effect creates the illusion of continuous motion and a sprawling, vast backdrop.
   
   

Nesting Symbols

The easiest way to create complex character animation is to use nested symbols. Isolate each moving part into a separate symbol that can be assembled in the master symbol.

The human walk cycle is one of the most difficult animations to achieve realistically . With care, you can construct it in nested symbols for maximum efficiency and realism . Start by dissecting the movements of a person walking in profile. The highest level is a movie clip symbol for the walking cycle. It contains layers for the head, torso, and legs. The head could be a single graphic. The torso movie clip contains two animated instances of an arm symbol, and the legs movie clip consists of two animated instances of a leg symbol. Collectively, the symbols that comprise the walking cycle make up a complete stride that repeats continuously and automatically.

Animation Guidelines

Any style of animation ”from classic cartoon-style characters to scripted physics-based movement ”can benefit from some classic animation principles:

• Timing and Motion ” Timing gives meaning to movement. The speed at which a movement happens can imbue the same motion with different meaning. Think of a punch. If it is delivered rapidly , with the person on the receiving end snapping back, it is a painful event. The same motion, delivered more slowly with a minimal reaction from the receiver, could be seen as playful.

  You can manipulate timing to give objects life and convey their attributes: For instance, heavy objects are difficult to move and take longer to accelerate and decelerate.

  Pacing is also crucial. There is a delicate balance between anticipation, action, and reaction. If the pace is too slow, the viewer will lose interest, but if it is too fast, the action may be confusing and open to misinterpretation. Also, experiment with the length of each stage ”they should not be of equal lengths or carry the same emphasis. Action typically is the focus, but you can confound that expectation to great effect. Lengthy anticipation followed by quick action and reaction can produce comic or dramatic effect.

• Anticipation ” Movement is most dynamic and realistic if it is anticipated. Runners rock backward slightly before hurtling themselves forward. Try adding slight movement in the opposite direction at the beginning of a motion.

• Follow-through ” Movement does not stop instantaneously. Runners do not stop as soon as they cross the finish line, but continue on as they decelerate. Think of the follow-through of a pitcher's arm after a ball is released. Whenever you initiate a movement, try to follow it through slightly beyond the "goal" of the movement.

• Squash and Stretch ” Few objects are completely rigid while in motion. Most objects are slightly deformed by motion and collision. To make our ball bounce even more realistic, we could scale the ball (as part of the motion tween) so that it stretches as it falls and squashes on impact.

• Overlapping Action ” Avoid beginning or ending different actions simultaneously. Stagger movement: Have a second object begin to move before the first object has stopped , when possible.

• Secondary Motion ” Animation is most effective if it produces a ripple effect; movement should rarely happen in isolation. Secondary motion results directly from primary action, echoing and reinforcing the main action. For example, if an ant character turns its head suddenly, its antennae may oscillate slightly.

• "Un-perfecting" animation ” The mathematical precision of Flash's vector graphics can become impersonal and therefore less interesting. In the natural world, shapes have imperfections and movement is often irregular. To create the most compelling animations with Flash, tweak shapes to make them slightly irregular; use easing to create variety in pacing; and introduce intermediate keyframes in tweens and combine frame-by-frame and tweened animations for more realistic effects. Above all, take inspiration from the imperfect world around you.