FLASH 8 Tutorials TUTORIAL 2 – Layers, masks and animation:

frame by frame or with tweening

Module Name

Module Number

Course

Lecturer

Content

1 Timeline Area ................................................................................................................. 1 2 Layers ............................................................................................................................ 6 3 Animation ..................................................................................................................... 10

3.1 Using Timeline effects ......................................................................................... 10 3.1.1 Adding a Timeline effect .................................................................................. 10 3.1.2 Timeline effect settings .................................................................................... 11 3.1.3 Editing a Timeline effect ................................................................................... 13 3.1.4 Deleting a Timeline effect ................................................................................ 13 3.1.5 About tweened animation ................................................................................ 13 3.1.6 Breaking apart groups and objects................................................................... 14 3.1.7 Breaking text apart ........................................................................................... 14

3.2 About frame-by-frame animation ......................................................................... 15 3.2.1 Editing animation ............................................................................................. 16 3.2.2 Using onion skinning ........................................................................................ 17 3.2.3 Moving an entire animation .............................................................................. 17

3.3 Tween animation ................................................................................................. 18 3.3.1 About layers in animation ................................................................................. 18 3.3.2 About creating keyframes ................................................................................ 18 3.3.3 About representations of animation in the Timeline .......................................... 19 3.3.4 Motion tweening............................................................................................... 19 3.3.5 Tweening shapes ............................................................................................. 22 3.3.6 Using shape hints ............................................................................................ 24 3.3.7 Tweening motion along a path ......................................................................... 25 3.3.8 Using mask layers ........................................................................................... 27 3.3.9 About frame rates ............................................................................................ 29 3.3.10 Extending still images .................................................................................. 29

Hands On ............................................................................................................................ 30 Exercise 1 ....................................................................................................................... 30 Exercise 2 ....................................................................................................................... 30

The Simple Shapes Guy .............................................................................................. 31 Creating an Arm ........................................................................................................... 32 Creating the Legs ......................................................................................................... 32 Make Those Legs Move! .............................................................................................. 33 Positing the Keyframes ................................................................................................ 35 Defining the In-between Positions ................................................................................ 35 Give the Arms Some Rhythm ....................................................................................... 36 A Bounce in Your Step ................................................................................................. 38 Don't Mean a Thing if It Ain't Got That Swing ............................................................... 39 Finish Up the Arm Cycle .............................................................................................. 39 Finish Up the Leg Cycle ............................................................................................... 40 Put That Body in Motion ............................................................................................... 41 Walk into the Sunset .................................................................................................... 41

1

Before being introduced to different ways of creating animations in Flash you will be introduced to the Timeline Area and working with Layers.

1 Timeline Area

The Timeline organizes and controls a document's content over time in layers and frames. Like films, Flash documents divide lengths of time into frames. Layers are like multiple film strips stacked on top of one another, each containing a different image that appears on the Stage. The major components of the Timeline are layers, frames, and the playhead.

Layers in a document are listed in a column on the left side of the Timeline. Frames contained in each layer appear in a row to the right of the layer name. The Timeline header at the top of the Timeline indicates frame numbers. The playhead indicates the current frame displayed on the Stage. As a Flash document plays, the playhead moves from left to right through the Timeline.

The Timeline status display at the bottom of the Timeline indicates the selected frame number, the current frame rate, and the elapsed time to the current frame.

NOTE When an animation is played, the actual frame rate is displayed; this may differ from the document's frame rate setting if the computer can't calculate and display the animation quickly enough.

Timeline area

You can change the way frames appear in the Timeline, as well as display thumbnails of frame content in the Timeline. The Timeline shows where animation occurs in a document, including frame-by-frame animation, tweened animation, and motion paths.

Controls in the layers section of the Timeline let you hide, show, lock, or unlock layers, as well as display layer contents as outlines.

You can insert, delete, select, and move frames in the Timeline. You can also drag frames to a new location on the same layer or to a different layer. For more information, see Working with frames in the Timeline.

2

Changing the appearance of the Timeline

By default, the Timeline appears at the top of the main application window, above the Stage. To change its position, you can dock the Timeline to the bottom or either side of the main application window, or display the Timeline as its own window. You can also hide the Timeline.

You can resize the Timeline to change the number of layers and frames that are visible. When there are more layers than can be displayed in the Timeline, you can view additional layers by using the scroll bars on the right side of the Timeline.

To move the Timeline when it is docked to the application window:

• Drag the gripper at the left of the word Timeline in the panel title bar.

To dock an undocked Timeline:

• Drag the Timeline title bar to an edge of the application window. Press Control and drag to prevent the Timeline from docking.

To lengthen or shorten layer name fields:

• Drag the bar separating the layer names and the frames portions of the Timeline.

To resize the Timeline, do one of the following:

• If the Timeline is docked to the main application window, drag the bar separating the Timeline from the Stage area.

• If the Timeline is not docked to the main application window, drag the lower-right corner (Windows) or the size box in the lower-right corner (Macintosh).

Moving the playhead

The playhead moves through the timeline as a document plays to indicate the current frame displayed on the Stage. The Timeline header shows the frame numbers of the animation. To display a frame on the Stage, you move the playhead to the frame in the Timeline.

When you're working with a large number of frames that can't all be displayed in the Timeline at once, you can move the playhead along the Timeline to easily display a specific frame.

To go to a frame:

3

• Click the frame's location in the Timeline header, or drag the playhead to the desired position.

To centre the Timeline on the current frame:

• Click Center Frame at the bottom of the Timeline.

Changing the display of frames in the Timeline

You can change the size of frames in the Timeline, and add color to sequences of frames to highlight them. You can also include thumbnail previews of frame content in the Timeline. These thumbnails are useful as an overview of the animation, but they require extra screen space.

Frame View pop-up menu

Short and Normal frame view options

To change the display of frames in the Timeline:

• Click Frame View in the upper-right corner of the Timeline to display the Frame View pop-up menu.

• Select from the following options:

To change the width of frame cells, select Tiny, Small, Normal, Medium, or Large. (The Large frame-width setting is useful for viewing the details of sound waveforms.)

To decrease the height of frame cell rows, select Short.

To turn the tinting of frame sequences on or off, select Tinted Frames.

4

To display thumbnails of the content of each frame scaled to fit the Timeline frames, select Preview. This can cause the apparent content size to vary.

To display thumbnails of each full frame (including empty space), select Preview in Context. This is useful for viewing the way elements move within their frames over the course of the animation, but previews are generally smaller than with the Preview option.

Using frames and keyframes

A keyframe is a frame in which you define a change to an object's properties for an animation or include ActionScript code to control some aspect of your document. Flash can tween, or automatically fill in, the frames between keyframes you define in order to produce fluid animations. Because keyframes let you produce animation without drawing each individual frame, they make creating animation easier. You can easily change the length of a tweened animation by dragging a keyframe in the Timeline.

The order in which frames and keyframes appear in the Timeline determines the order in which they are displayed in a Flash application. You can arrange keyframes in the Timeline to edit the sequence of events in an animation.

Working with frames in the Timeline

In the Timeline, you work with frames and keyframes, placing them in the order you want the objects in the frames to appear. You can change the length of a tweened animation by dragging a keyframe in the Timeline.

You can perform the following modifications on frames or keyframes:

• Insert, select, delete, and move frames or keyframes

• Drag frames and keyframes to a new location on the same layer or on a different layer

• Copy and paste frames and keyframes

• Convert keyframes to frames

• Drag an item from the Library panel onto the Stage to add the item to the current keyframe

The Timeline provides a view of tweened frames in an animation. For information on editing tweened frames, see Creating Motion in Using Flash.

Flash offers two different methods for selecting frames in the Timeline. In frame-based selection (the default) you select individual frames in the Timeline. In span-based selection, the entire frame sequence, from one keyframe to the next, is selected when you click any frame in the sequence. You can specify span-based selection in Flash preferences.

To specify span-based selection:

• Select Edit > Preferences.

• Select the General category.

• In the Timeline section, select Span based selection.

5

• Click OK.

To insert frames in the Timeline, do one of the following:

• To insert a new frame, select Insert > Frame.

• To create a new keyframe, select Insert > Keyframe, or right-click (Windows) or Control-click (Macintosh) the frame where you want to place a keyframe, and select Insert Keyframe from the context menu.

• To create a new blank keyframe, select Insert > Blank Keyframe, or right-click (Windows) or Control-click (Macintosh) the frame where you want to place the keyframe, and select Insert Blank Keyframe from the context menu.

• To select one or more frames in the Timeline:

• To select one frame, click the frame. If you have Span Based Selection enabled in the Preferences dialog box, clicking one frame selects the entire frame sequence between two keyframes. For more information, see Setting preferences in Flash.

• To select multiple contiguous frames, Shift-click additional frames.

• To select multiple discontiguous frames, Control-click (Windows) or Command-click (Macintosh) additional frames.

To select all frames in the Timeline:

• Select Edit > Timeline > Select All Frames.

To delete or modify a frame or keyframe, do one of the following:

• To delete a frame, keyframe, or frame sequence, select the frame, keyframe, or sequence and select Edit > Timeline > Remove Frame, or right-click (Windows) or Control-click (Macintosh) the frame, keyframe, or sequence and select Remove Frame from the context menu. Surrounding frames remain unchanged.

• To move a keyframe or frame sequence and its contents, drag the keyframe or sequence to the desired location.

• To extend the duration of a keyframe animation, press Alt and drag (Windows) or press Option and drag (Macintosh) the keyframe to the frame that you want to be the final frame of the sequence.

• To copy a keyframe or frame sequence by dragging, Alt-click (Windows) or Option-click (Macintosh) and drag the keyframe to the new location.

• To copy and paste a frame or frame sequence, select the frame or sequence and select Edit > Timeline > Copy Frames. Select a frame or sequence that you want to replace, and select Edit > Timeline > Paste Frames.

• To convert a keyframe to a frame, select the keyframe and select Edit > Timeline > Clear Keyframe, or right-click (Windows) or Control-click (Macintosh) the keyframe and select Clear Keyframe from the context menu. The Stage contents of the cleared keyframe and all frames up to the subsequent keyframe are replaced with the Stage contents of the frame preceding the cleared keyframe.

6

• To change the length of a tweened sequence, drag the beginning or ending keyframe left or right. To change the length of a frame-by-frame animation sequence, see Creating frame-by-frame animations in Using Flash.

• To add an item from the library to the current keyframe, drag the item from the Library panel onto the Stage.

2 Layers

Layers can be used to separate artwork and organise content. When you select a layer and draw on the stage, content will be present in that layer. The layer at the top contains content which is closest to your eye. The number of layers will not increase the file size. Name each layer to help organise the scene. Flash Mx has introduced the use of folders, allowing layers to be grouped together.

NOTE Drawing over any object in the same layer will automatically erase the information below. Always draw new objects on new layers.

Creating layers and layer folders

When you create a new layer or folder, it appears above the selected layer. The newly added layer becomes the active layer.

To create a layer, do one of the following:

• Click the Insert Layer button at the bottom of the Timeline.

• Select Insert > Timeline > Layer.

• Right-click (Windows) or Control-click (Macintosh) a layer name in the Timeline and select Insert Layer from the context menu.

To create a layer folder, do one of the following:

• Select a layer or folder in the Timeline, and then select Insert > Timeline > Layer Folder.

• Right-click (Windows) or Control-click (Macintosh) a layer name in the Timeline, and then select Insert Folder from the context menu.

• The new folder appears above the layer or folder you selected.

Viewing layers and layer folders

As you work, you may want to show or hide layers or folders. A red X next to the name of a layer or folder in the Timeline indicates that it is hidden. When you publish a Flash SWF file, any layers that were hidden in the FLA document are preserved and visible in the SWF file.

To help you distinguish which layer an object belongs to, you can display all objects on a layer as colored outlines. You can change the outline color used by each layer.

You can change the height of layers in the Timeline to display more information (such as sound waveforms) in the Timeline. You can also change the number of layers displayed in the Timeline.

7

To show or hide a layer or folder, do one of the following:

• Click in the Eye column to the right of the layer or folder name in the Timeline to hide that layer or folder. Click in it again to show the layer or folder.

• Click the eye icon to hide all the layers and folders in the Timeline. Click it again to show all layers and folders.

• Drag through the Eye column to show or hide multiple layers or folders.

• Alt-click (Windows) or Option-click (Macintosh) in the Eye column to the right of a layer or folder name to hide all other layers and folders. Alt-click or Option-click it again to show all layers and folders.

To view the contents of a layer as outlines, do one of the following:

• Click in the Outline column to the right of the layer's name to display all objects on that layer as outlines. Click in it again to turn off outline display.

• Click the outline icon to display objects on all layers as outlines. Click it again to turn off outline display on all layers.

• Alt-click (Windows) or Option-click (Macintosh) in the Outline column to the right of a layer's name to display objects on all other layers as outlines. Alt-click or Option-click in it again to turn off the outline display for all layers.

To change a layer's outline color:

• Do one of the following:

• Double-click the layer's icon (the icon to the left of the layer name) in the Timeline.

• Right-click (Windows) or Control-click (Macintosh) the layer name and select Properties from the context menu.

• Select the layer in the Timeline and select Modify > Layer.

• In the Layer Properties dialog box, click the Outline Color box and select a new color, enter the hexadecimal value for a color, or click the Color Picker button and select a color.

• Click OK.

To change layer height in the Timeline:

• Do one of the following:

• Double-click the layer's icon (the icon to the left of the layer name) in the Timeline.

• Right-click (Windows) or Control-click (Macintosh) the layer name and select Properties from the context menu.

• Select the layer in the Timeline and select Modify > Timeline > Layer Properties.

• In the Layer Properties dialog box, select an option for Layer Height and click OK.

8

To change the number of layers displayed in the Timeline:

• Drag the bar that separates the Timeline from the Stage area.

Editing layers and layer folders

You can rename, copy, and delete layers and folders. You can also lock layers and folders to prevent them from being edited.

By default, new layers are named by the order in which they are created: Layer 1, Layer 2, and so on. You can rename layers to better reflect their contents.

To select a layer or folder, do one of the following:

• Click the name of a layer or folder in the Timeline.

• Click any frame in the Timeline of the layer you want to select.

• Select an object on the Stage that is located in the layer you want to select.

To select two or more layers or folders, do one of the following:

• To select contiguous layers or folders, Shift-click their names in the Timeline.

• To select discontiguous layers or folders, Control-click (Windows) or Command-click (Macintosh) their names in the Timeline.

To rename a layer or folder, do one of the following:

• Double-click the name of the layer or folder in the Timeline and enter a new name.

• Right-click (Windows) or Control-click (Macintosh) the name of the layer or folder and select Properties from the context menu. Enter the new name in the Name text box and click OK.

• Select the layer or folder in the Timeline and select Modify > Timeline > Layer Properties. In the Layer Properties dialog box, enter the new name in the Name text box and click OK.

To lock or unlock one or more layers or folders, do one of the following:

• Click in the Lock column to the right of the name of a layer or folder to lock it. Click in the Lock column again to unlock the layer or folder.

• Click the padlock icon to lock all layers and folders. Click it again to unlock all layers and folders.

• Drag through the Lock column to lock or unlock multiple layers or folders.

• Alt-click (Windows) or Option-click (Macintosh) in the Lock column to the right of a layer or folder name to lock all other layers or folders. Alt-click or Option-click in the Lock column again to unlock all layers or folders.

To copy a layer:

9

• Click the layer name in the Timeline to select the entire layer.

• Select Edit > Timeline > Copy Frames.

• Click the Insert Layer button to create a new layer.

• Click the new layer and select Edit > Timeline > Paste Frames.

To copy the contents of a layer folder:

• Click the triangle to the left of the folder name in the Timeline to collapse it, if necessary.

• Click the folder name to select the entire folder.

• Select Edit > Timeline > Copy Frames.

• Select Insert > Timeline > Layer Folder to create a new folder.

• Click the new folder and select Edit > Timeline > Paste Frames.

To delete a layer or folder:

• Select the layer or folder by clicking its name in the Timeline or any frame in the layer.

• Do one of the following:

• Click the Delete Layer button in the Timeline.

• Drag the layer or folder to the Delete Layer button.

• Right-click (Windows) or Control-click (Macintosh) the layer or folder name and select Delete Layer from the context menu.

NOTE When you delete a layer folder, all the enclosed layers and all their contents are also deleted.

Organizing layers and layer folders

You can rearrange layers and folders in the Timeline to organize your document.

Layer folders help organize your workflow by letting you place layers in a tree structure. You can expand or collapse a folder to see the layers it contains without affecting which layers are visible on the Stage. Folders can contain both layers and other folders, allowing you to organize layers in much the same way you organize files on your computer.

The layer controls in the Timeline affect all layers within a folder. For example, locking a layer folder locks all layers within that folder.

To move a layer or layer folder into a layer folder:

• Drag the layer or layer folder name to the destination layer folder name.

• The layer or layer folder appears inside the destination layer folder in the Timeline.

10

To change the order of layers or folders:

• Drag one or more layers or folders in the Timeline to the desired position above or below other layers in the Timeline.

To expand or collapse a folder:

Click the triangle to the left of the folder name.

To expand or collapse all folders:

Right-click (Windows) or Control-click (Macintosh) and select Expand All Folders or Collapse All Folders from the context menu.

3 Animation

Macromedia Flash Basic 8 offers several ways to include animation and special effects in your document. Timeline effects, such as blur, expand, and explode, make it easy to animate an object: you can simply select the object, then select an effect and specify parameters. With Timeline effects, you can accomplish in a few easy steps a previously time-consuming task that required more advanced knowledge of animation.

To create tweened animation, you create starting and ending frames and let Flash create the animation for the frames in between. Flash varies the object's size, rotation, color, or other attributes between the starting and ending frames to create the appearance of movement.

You can also create animation by changing the contents of successive frames in the Timeline. You can make an object move across the Stage, increase or decrease its size, rotate, change color, fade in or out, or change shape. Changes can occur independently of, or in concert with, other changes. For example, you can make an object rotate and fade in as it moves across the Stage. In frame-by-frame animation, you create the image in every frame.

3.1 Using Timeline effects

Flash includes prebuilt Timeline effects that let you create complex animations with a minimal number of steps. You can apply Timeline effects to the following objects:

• Text

• Graphics, including shapes, groups, and graphic symbols

• Bitmap images

• Button symbols

NOTE When you apply a Timeline effect to a movie clip, Flash nests the effect within the movie clip.

This section covers the following topics:

3.1.1 Adding a Timeline effect

11

When you add a Timeline effect to an object, Flash creates a layer and transfers the object to the new layer. The object is placed inside the effect graphic, and all tweens and transformations required for the effect reside in the graphic on the newly created layer.

The new layer automatically receives the same name as the effect, appended with a number that represents the order in which the effect is applied, out of all effects in your document.

When you add a Timeline effect, a folder with the effect's name is added to the library, containing elements used in creating the effect.

To add an effect to an object:

1. Do one of the following to add a Timeline effect:

o Select the object to which you're adding the Timeline effect. Select Insert > Timeline Effects. Then select Assistants, Effects, or Transition/Transform from the submenu, and select an effect from the list.

o Right-click (Windows) or Control-click (Macintosh) the object to which you're adding the Timeline effect. From the context menu, select Timeline Effects. Then select Assistants, Effects, or Transition/Transform from the submenu, and select an effect from the list.

Effects available for the type of object you've selected appear as active menu choices.

2. In the dialog box that appears for the effect, view the effect preview based on default settings. Modify the default settings as desired, and then click Update Preview to view the effect with the new settings.

3. When the Timeline effect appears as desired in the preview window, click OK.

3.1.2 Timeline effect settings

Each Timeline effect manipulates a graphic or symbol in a specific way and allows you to change individual parameters for a desired effect. In the preview window, you can quickly see the changes made when you alter settings.

Motion effect name and description Settings Copy to grid Duplicates a selected object by the number of columns and then multiplies the columns by the number of rows to create a grid of the elements.

• Number of rows • Number of columns • Distance between rows, in pixels • Distance between columns, in pixels

Distributed duplication

Duplicates a selected object the number of times entered in the settings. The first element is a copy of the original object. The objects are modified in increments until the final object 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, in percentage • Change color, select/deselect

12

• 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, in percentage • Shadow offset, in x, y offset, in pixels

Expand

Expands, contracts, or expands and contracts objects over time. This effect works best with two or more objects grouped together or combined in a movie clip or graphic symbol. Objects containing text or letters work well with this effect.

• 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

Gives the illusion of an object exploding. Elements of text or a complex group of objects (symbols, shapes or video clips) break apart, spin, and arc outward.

• 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, in percentage

Transform

Adjusts the position, scale, rotation, alpha, and tint of the selected elements. Use Transform to apply a single effect or a combination of effects to create 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, in

percentage, unlock to apply x and/or y axis change separately, in percentage

• Rotate, in degrees • Spin, number of times • Times, counterclockwise, clockwise • Change color, select/deselect • Final color, in RGB hex value • Final alpha, in percentage • Motion ease

Transition

Wipes in or wipes out selected objects by fading, wiping, or a combination of both.

• Effect duration, in frames • Direction, toggle between in (coming in)

and out (going out), select up, down, left, or right

• Fade, select/deselect • Wipe, select/deselect

13

• Motion ease

3.1.3 Editing a Timeline effect

You edit Timeline effects using the Effect Settings dialog box.

To edit a Timeline effect:

1. Select the object associated with the effect on the Stage.

2. To open the Effect Settings dialog box, do one of the following:

o In the Property inspector, click Edit.

o Right-click (Windows) or Control-click (Macintosh) the object and select Timeline Effects > Edit Effect from the context menu.

3. In the Effect Settings dialog box, edit the settings you want to edit, and click OK to apply your settings.

3.1.4 Deleting a Timeline effect

You use the context menu to delete Timeline effects.

To delete a Timeline effect:

• On the Stage, right-click (Windows) or Control-click (Macintosh) the object that has the Timeline effect that you want to remove, and select Timeline Effects > Remove Effect from the context menu.

3.1.5 About tweened animation

Flash can create two types of tweened animation: motion tweening and shape tweening.

• In motion tweening, you define properties such as position, size, and rotation for an instance, group, or text block at one point in time, and then you change those properties at another point in time. You can also apply a motion tween along a path.

• In shape tweening, you draw a shape at one point in time, and then you change that shape or draw another shape at another point in time. Flash interpolates the values or shapes for the frames in between, creating the animation.

NOTE To apply shape tweening to groups, instances, or bitmap images, you must first break these elements apart. To apply shape tweening to text, you must break the text apart twice to convert the text to objects.

Tweened animation is an effective way to create movement and changes over time while minimizing file size. In tweened animation, Flash stores only the values for the changes between frames.

To quickly prepare elements in a document for tweened animation, distribute objects to layers.

You can apply tweened animation to an object on a mask layer to create a dynamic mask. For information on mask layers.

14

3.1.6 Breaking apart groups and objects

To separate groups, instances, and bitmaps into ungrouped, editable elements, you use the Break Apart command. Breaking apart significantly reduces the file size of imported graphics.

Although you can select Edit > Undo immediately after breaking apart a group or object, breaking apart is not entirely reversible. It affects objects as follows:

• It severs a symbol instance's link to its master symbol.

• It discards all but the current frame in an animated symbol.

• It converts a bitmap to a fill.

• It places each character into a separate text block when applied to text blocks.

• It converts characters to outlines when applied to a single text character. See Breaking text apart.

The Break Apart command should not be confused with the Ungroup command. The Ungroup command separates grouped objects, returning grouped elements to the state they were in prior to grouping. It does not break apart bitmaps, instances, or type, or convert type to outlines.

To break apart groups or objects:

1. Select the group, bitmap, or symbol that you want to break apart.

2. Select Modify > Break Apart.

NOTE

Breaking apart animated symbols, or groups within an interpolated animation, is not recommended and might have unpredictable results. Breaking apart complex symbols and large blocks of text can take a long time. You might need to increase the application's memory allocation to properly break apart complex objects.

3.1.7 Breaking text apart

You can break apart text to place each character in a separate text block. After you break text apart, you can quickly distribute the text blocks to separate layers and animate each block separately. For information on distributing objects to layers.

NOTE You cannot break apart text in scrollable text fields.

You can also convert text to its component lines and fills to reshape, erase, and otherwise manipulate it. As with any other shape, you can individually group these converted characters, or change them to symbols and animate them. After you convert text to lines and fills, you can no longer edit the text.

To break apart text:

1. Select the Selection tool and click a text block.

2. Select Modify > Break Apart. Each character in the selected text is placed in a separate text block. The text remains in the same position on the Stage.

15

3. Select Modify > Break Apart again to convert the characters to shapes on the Stage.

NOTE The Break Apart command applies only to outline fonts such as TrueType fonts. Bitmap fonts disappear from the screen when you break them apart.PostScript fonts can be broken apart only on Macintosh systems.

3.2 About frame-by-frame animation

Frame-by-frame animation changes the contents of the Stage in every frame and is best suited to complex animation in which an image changes in every frame instead of simply moving across the Stage. Frame-by-frame animation increases file size more rapidly than tweened animation. In frame-by-frame animation, Flash stores the values for each complete frame.

To create a frame-by-frame animation, you define each frame as a keyframe and create a different image for each frame. Each new keyframe initially contains the same contents as the keyframe preceding it, so you can modify the frames in the animation incrementally.

To create a frame-by-frame animation:

1. Click a layer name to make it the active layer, and select a frame in the layer where you want the animation to start.

2. If the frame isn't already a keyframe, select Insert > Timeline > Keyframe to make it one.

3. Create the artwork for the first frame of the sequence.

You can use the drawing tools, paste graphics from the Clipboard, or import a file.

4. Click the next frame to the right in the same row and select Insert > Timeline > Keyframe, or right-click (Windows) or Control-click (Macintosh) and select Insert Keyframe from the context menu.

This adds a new keyframe whose contents are the same as those of the first keyframe.

5. Alter the contents of this frame on the Stage to develop the next increment of the animation.

6. To complete your frame-by-frame animation sequence, repeat steps 4 and 5 until you've built the motion you want.

7. To test the animation sequence, select Control > Play or click the Play button on the Controller.

16

3.2.1 Editing animation

After you create a frame or a keyframe, you can move it elsewhere in the active layer or to another layer, remove it, and make other changes. Only keyframes are editable. You can view tweened frames, but you can't edit them directly. To edit tweened frames, you change one of the defining keyframes or insert a new keyframe between the beginning and ending keyframes. You can drag items from the Library panel onto the Stage to add the items to the current keyframe.

To display and edit more than one frame at a time, you use onion skinning.

To insert frames in the Timeline, do one of the following:

• To insert a new frame, select Insert > Timeline > Frame.

• To create a new keyframe, select Insert > Timeline > Keyframe, or right-click (Windows) or Control-click (Macintosh) the frame where you want to place a keyframe, and select Insert Keyframe from the context menu.

• To create a new blank keyframe, select Insert > Timeline > Blank Keyframe, or right-click (Windows) or Control-click (Macintosh) the frame where you want to place the keyframe, and select Insert Blank Keyframe from the context menu.

To delete or modify a frame or keyframe, do one of the following:

• To delete a frame, keyframe, or frame sequence, select the frame, keyframe, or sequence and right-click (Windows) or Control-click (Macintosh) the frame, keyframe, or sequence and select Remove Frames from the context menu. Surrounding frames remain unchanged.

• To move a keyframe or frame sequence and its contents, select the keyframe or sequence, then drag to the desired location.

• To extend the duration of a keyframe, Alt-drag (Windows) or Option-drag (Macintosh) the keyframe to the final frame of the new sequence.

• To copy a keyframe or frame sequence by dragging, select the keyframe or sequence, then Alt-drag (Windows) or Option-drag (Macintosh) to the new location.

• To copy and paste a frame or frame sequence, select the frame or sequence and select Edit > Timeline > Copy Frames. Select a frame or sequence that you want to replace, and select Edit > Timeline > Paste Frames.

• To convert a keyframe to a frame, select the keyframe and select Modify > Timeline > Clear Keyframe, or right-click (Windows) or Control-click (Macintosh) the keyframe and select Clear Keyframe from the context menu. The cleared keyframe and all frames up to the subsequent keyframe are replaced with the contents of the frame preceding the cleared keyframe.

• To change the length of a tweened sequence, drag the beginning or ending keyframe left or right. To change the length of a frame-by-frame sequence.

• To add a library item to the current keyframe, drag the item from the Library panel onto the Stage.

17

• To reverse an animation sequence, select the appropriate frames in one or more layers and select Modify > Timeline > Reverse Frames. There must be keyframes at the beginning and end of the sequence.

3.2.2 Using onion skinning

Normally, Flash displays one frame of the animation sequence at a time on the Stage. To help you position and edit a frame-by-frame animation, you can view two or more frames on the Stage at once. The frame under the playhead appears in full color, while surrounding frames are dimmed, making it appear as if each frame were drawn on a sheet of translucent onion-skin paper and the sheets were stacked on top of each other. Dimmed frames cannot be edited.

To simultaneously see several frames of an animation on the Stage:

• Click the Onion Skin button. All frames between the Start Onion Skin and End Onion Skin markers (in the Timeline header) are superimposed as one frame in the Document window.

To control onion skinning display, do any of the following:

• To display onion skinned frames as outlines, click the Onion Skin Outlines button.

• To change the position of either onion skin marker, drag its pointer to a new location. (Normally, the onion skin markers move in conjunction with the current frame pointer.)

• To enable editing of all frames between onion skin markers, click the Edit Multiple Frames button. Usually onion skinning lets you edit only the current frame. However, you can display the contents of each frame between the onion skin markers normally, and make each available for editing, regardless of which is the current frame.

NOTE Locked layers (those with a padlock icon) aren't displayed when onion skinning is turned on. To avoid a multitude of confusing images, you can lock or hide the layers you don't want onion skinned.

To change the display of onion skin markers:

• Click the Modify Onion Markers button and select an item from the menu:

Always Show Markers displays the onion skin markers in the Timeline header whether or not onion skinning is on.

Anchor Onion locks the onion skin markers to their current position in the Timeline header. Normally, the Onion Skin range is relative to the current frame pointer and the Onion Skin markers. By anchoring the Onion Skin markers, you prevent them from moving with the current frame pointer.

Onion 2 displays two frames on either side of the current frame.

Onion 5 displays five frames on either side of the current frame.

Onion All displays all frames on either side of the current frame.

3.2.3 Moving an entire animation

18

If you need to move an entire animation on the Stage, you must move the graphics in all frames and layers at once to avoid realigning everything.

To move the entire animation to another location on the Stage:

1. Unlock all layers.

To move everything on one or more layers but nothing on other layers, lock or hide all the layers you don't want to move.

2. Click the Edit Multiple Frames button in the Timeline.

3. Drag the onion skin markers so that they enclose all the frames you want to select, or click Modify Onion Markers and select Onion All.

4. Select Edit > Select All.

5. Drag the entire animation to the new location on the Stage.

3.3 Tween animation

Tween animation changes the contents of the Stage in a block of frame. However, before talking about tween animation you will be introduced to the use of layers and keyframes in animation.

3.3.1 About layers in animation

Each scene in a Flash document can consist of any number of layers. As you animate, you use layers and layer folders to organize the components of an animation sequence and to separate animated objects so they don't erase, connect, or segment each other. If you want Flash to tween the movement of more than one group or symbol at once, each must be on a separate layer. Typically, the background layer contains static artwork, and each additional layer contains one separate animated object.

When a document has several layers, tracking and editing the objects on one or two of them can be difficult. This task is easier if you work with the contents of one layer at a time. Layer folders help you organize layers into manageable groups that you can expand and collapse to view only the layers relevant to your current task.

3.3.2 About creating keyframes

A keyframe is a frame where you define changes in the animation. When you create frame-by-frame animation, every frame is a keyframe. In tweened animation, you define keyframes at significant points in the animation and let Flash create the contents of frames in between. Flash displays the interpolated frames of a tweened animation as light blue or light green with an arrow drawn between keyframes. Because Flash documents save the shapes in each keyframe, you should create keyframes only at those points in the artwork where something changes.

Keyframes are indicated in the Timeline: a keyframe with content on it is represented by a solid circle, and an empty keyframe is represented by an empty circle before the frame. Subsequent frames that you add to the same layer have the same content as the keyframe.

19

To create a keyframe, do one of the following:

• Select a frame in the Timeline and select Insert > Timeline > Keyframe.

• Right-click (Windows) or Control-click (Macintosh) a frame in the Timeline and select Insert Keyframe.

3.3.3 About representations of animation in the Timeline

Flash distinguishes tweened animation from frame-by-frame animation in the Timeline as follows:

• Motion tweens are indicated by a black dot at the beginning keyframe; intermediate tweened frames have a black arrow with a light blue background.

• Shape tweens are indicated by a black dot at the beginning keyframe; intermediate frames have a black arrow with a light green background.

• A dashed line indicates that the tween is broken or incomplete, such as when the final keyframe is missing.

• A single keyframe is indicated by a black dot. Light gray frames after a single keyframe contain the same content with no changes and have a black line with a hollow rectangle at the last frame of the span.

• A small a indicates that the frame has been assigned a frame action with the Actions panel.

• A red flag indicates that the frame contains a label or comment.

• A gold anchor indicates that the frame is a named anchor.

3.3.4 Motion tweening

To tween the changes in properties of instances, groups, and type, you use motion tweening. Flash can tween position, size, rotation, and skew of instances, groups, and type. Additionally, Flash can tween the color of instances and type, creating gradual color shifts or making an instance fade in or out. To tween the color of groups or type, you must make them into symbols. To animate individual characters in a block of text separately, you place each character in a separate text block.

20

If you apply a motion tween and then change the number of frames between the two keyframes, or move the group or symbol in either keyframe, Flash automatically tweens the frames again.

You can create a motion tween using one of two methods:

• Create the starting and ending keyframes for the animation and use the Motion Tweening option in the Property inspector.

• Create the first keyframe for the animation, insert the number of frames you want in the Timeline, select Insert > Timeline > Create Motion Tween, and move the object to the new location on the Stage. Flash automatically creates the ending keyframe.

When tweening position, you can make the object move along a nonlinear path.

To create a motion tween using the Motion Tweening option:

1. Click a layer name to make it the active layer, and select an empty keyframe in the layer where you want the animation to start.

2. To create the first frame of the motion tween, do one of the following:

o Create a graphic object with the Pen, Oval, Rectangle, Pencil, or Brush tool, then convert it to a symbol. For more information on converting objects to symbols.

o Create an instance, group, or text block on the Stage.

o Drag an instance of a symbol from the Library panel.

3. Create a second keyframe where you want the animation to end, and leave the new keyframe selected.

4. Do any of the following to modify the instance, group, or text block in the ending frame:

o Move the item to a new position.

o Modify the item's size, rotation, or skew.

o Modify the item's color (instance or text block only).

To tween the color of elements other than instances or text blocks, use shape tweening.

5. Click any frame in the tween's frame span and select Motion from the Tween pop-up menu in the Property inspector (Window > Properties).

6. If you modified the size of the item in step 4, select Scale to tween the size of the selected item.

7. To produce a more realistic sense of motion, you can apply easing to the motion tween you create. Flash provides two methods by which you can apply easing to a motion tween:

You can specify an easing value for each motion tween you create using the Ease slider, or you can use the Custom Ease In/Ease Out dialog box (Flash Professional only) to more precisely control the speed of the motion tween.

21

Drag the arrow next to the Easing value or enter a value to adjust the rate of change between tweened frames:

o To begin the motion tween slowly and accelerate the tween toward the end of the animation, drag the slider up or enter a negative value between -1 and -100.

o To begin the motion tween rapidly and decelerate the tween toward the end of the animation, drag the slider down or enter a positive value between 1 and 100.

By default, the rate of change between tweened frames is constant. Easing creates a more natural appearance of acceleration or deceleration by gradually adjusting the rate of change.

NOTE If you want to use the Custom Ease In/Ease Out dialog box to produce a more complex change in speed within the tween's frame span.

8. To rotate the selected item while tweening, select an option from the Rotate menu:

o Select None (the default setting) to prevent rotation.

o Select Auto to rotate the object once in the direction requiring the least motion.

o Select Clockwise (CW) or Counterclockwise (CCW) to rotate the object as indicated, and then enter a number to specify the number of rotations.

NOTE The rotation in step 8 is in addition to any rotation you applied to the ending frame in step 4.

9. If you're using a motion path, select Orient to Path to orient the baseline of the tweened element to the motion path.

10. Select the Sync option in the Property inspector to synchronize the animation of graphic symbol instances with the main Timeline.

NOTE Modify > Timeline > Synchronize Symbols and the Sync option both recalculate the number of frames in a tween to match the number of frames allotted to it in the Timeline.

11. If you're using a motion path, select Snap to attach the tweened element to the motion path by its registration point.

To create a motion tween using the Create Motion Tween command:

1. Select an empty keyframe and draw an object on the Stage, or drag an instance of a symbol from the Library panel.

NOTE To create a tween, you must have only one item on the layer.

2. Select Insert > Timeline > Create Motion Tween.

If you drew an object in step 1, Flash automatically converts the object to a symbol and assigns it the name tween1.

3. Click inside the frame where you want the animation to end, and select Insert > Timeline > Frame.

22

4. Move the object, instance, or text block on the Stage to the desired position. Adjust the size of the element if you want to tween its scale. Adjust the rotation of the element if you want to tween its rotation. Deselect the object when you have completed adjustments.

A keyframe is automatically added to the end of the frame range.

5. Drag the arrow next to the Easing value or enter a value to adjust the rate of change between tweened frames:

o To begin the motion tween slowly and accelerate the tween toward the end of the animation, drag the slider up or enter a value between -1 and -100.

o To begin the motion tween rapidly and decelerate the tween toward the end of the animation, drag the slider down or enter a positive value between 1 and 100.

By default, the rate of change between tweened frames is constant. Easing creates a more natural appearance of acceleration or deceleration by gradually adjusting the rate of change.

NOTE If you want to use the Custom Ease In/Ease Out dialog box to produce a more complex change in speed within the tween's frame span.

6. To rotate the selected item while tweening, select an option from the Rotate menu:

o Select Auto to rotate the object once in the direction requiring the least motion.

o Select Clockwise (CW) or Counterclockwise (CCW) to rotate the object as indicated, and then enter a number to specify the number of rotations.

NOTE The rotation in step 6 is in addition to any rotation you applied to the ending frame in step 4.

7. If you're using a motion path, select Orient to Path to orient the baseline of the tweened element to the motion path.

8. Select Synchronize to ensure that the instance loops properly in the main document.

Use the Synchronize command if the number of frames in the animation sequence inside the symbol is not an even multiple of the number of frames the graphic instance occupies in the document.

9. If you're using a motion path, select Snap to attach the tweened element to the motion path by its registration point.

3.3.5 Tweening shapes

By tweening shapes, you can create an effect similar to morphing, making one shape appear to change into another shape over time. Flash can also tween the location, size, color, and opacity of shapes.

23

Tweening one shape at a time usually yields the best results. If you tween multiple shapes at one time, all the shapes must be on the same layer.

To apply shape tweening to groups, instances, or bitmap images, you must first break these elements apart. To apply shape tweening to text, you must break the text apart twice to convert the text to objects.

To control more complex or improbable shape changes, you use shape hints, which control how parts of the original shape move into the new shape.

To tween a shape:

1. Click a layer name to make it the active layer, and create or select a keyframe where you want the animation to start.

2. Create or place the artwork for the first frame of the sequence. For best results, the frame should contain only one item (a graphic object or broken-apart group, bitmap, instance, or text block).

3. Select the keyframe in the Timeline.

4. Select Window > Properties.

5. In the Property inspector, select Shape from the Tween pop-up menu.

6. Drag the arrow next to the Easing value or enter a value to adjust the rate of change between tweened frames:

o To begin the shape tween gradually and accelerate the tween toward the end of the animation, drag the slider down or enter a negative value between -1 and -100.

o To begin the shape tween rapidly and decelerate the tween toward the end of the animation, drag the slider up or enter a positive value between 1 and 100.

By default, the rate of change between tweened frames is constant. Easing creates a more natural appearance of transformation by gradually adjusting the rate of change.

7. Select an option for Blend:

Distributive creates an animation in which the intermediate shapes are smoother and more irregular.

Angular creates an animation that preserves apparent corners and straight lines in the intermediate shapes.

24

NOTE Angular is appropriate only for blending shapes with sharp corners and straight lines. If the shapes you select do not have corners, Flash reverts to distributive shape tweening.

8. Create a second keyframe the desired number of frames after the first keyframe.

9. With the second keyframe selected, select the artwork you placed in the first keyframe and do one of the following:

o Modify the shape, color, opacity, or position of the artwork.

o Delete the artwork and place new artwork in the second keyframe.

3.3.6 Using shape hints

To control more complex or improbable shape changes, you can use shape hints. Shape hints identify points that should correspond in starting and ending shapes. For example, if you are tweening a drawing of a face as it changes expression, you can use a shape hint to mark each eye. Then, instead of the face becoming an amorphous tangle while the shape change takes place, each eye remains recognizable and changes separately during the shift.

Shape hints contain letters (a through z) for identifying which points correspond in the starting and ending shape. You can use up to 26 shape hints.

Shape hints are yellow in a starting keyframe, green in an ending keyframe, and red when not on a curve.

For best results when tweening shapes, follow these guidelines:

• In complex shape tweening, create intermediate shapes and tween them instead of just defining a starting and ending shape.

• Make sure that shape hints are logical. For example, if you're using three shape hints for a triangle, they must be in the same order on the original triangle and on the triangle to be tweened. The order cannot be abc in the first keyframe and acb in the second.

25

• Shape hints work best if you place them in counterclockwise order beginning at the top left corner of the shape.

To use shape hints:

1. Select the first keyframe in a shape-tweened sequence.

2. Select Modify > Shape > Add Shape Hint.

The beginning shape hint appears as a red circle with the letter a somewhere on the shape.

3. Move the shape hint to a point that you want to mark.

4. Select the last keyframe in the tweening sequence.

The ending shape hint appears somewhere on the shape as a green circle with the letter a.

5. Move the shape hint to the point in the ending shape that should correspond to the first point you marked.

6. Play the animation again to see how the shape hints change the shape tweening. Move the shape hints to fine-tune the tweening.

7. Repeat this process to add additional shape hints. New hints appear with the letters that follow (b, c, and so on).

You can choose to view all shape hints, and you can remove shape hints.

To see all shape hints:

• Select View > Show Shape Hints. The layer and keyframe that contain shape hints must be active for Show Shape Hints to be available.

To remove a shape hint:

• Drag it off the Stage.

To remove all shape hints:

• Select Modify > Shape > Remove All Hints.

3.3.7 Tweening motion along a path

Motion guide layers let you draw paths along which tweened instances, groups, or text blocks can be animated. You can link multiple layers to a motion guide layer to have multiple objects follow the same path. A normal layer that is linked to a motion guide layer becomes a guided layer.

26

In this example, two objects on separate layers are attached to the same motion path.

To create a motion path for a tweened animation:

1. Create a motion-tweened animation sequence as described in Tweening instances, groups, and type.

If you select Orient to Path, the baseline of the tweened element orients to the motion path. If you select Snap, the registration point of the tweened element snaps to the motion path.

2. Do one of the following:

o Select the layer containing the animation and select Insert > Timeline > Motion Guide.

o Right-click (Windows) or Control-click (Macintosh) the layer containing the animation and select Add Motion Guide from the context menu.

Flash creates a new layer above the selected layer with a motion guide icon to the left of the layer name.

3. Use the Pen, Pencil, Line, Circle, Rectangle, or Brush tool to draw the desired path.

4. Snap the center to the beginning of the line in the first frame, and to the end of the line in the last frame.

NOTE For best snapping results, drag the symbol by its registration point.

5. To hide the motion guide layer and the line so that only the object's movement is visible while you work, click in the Eye column on the motion guide layer.

The group or symbol follows the motion path when you play the animation.

27

To link layers to a motion guide layer, do one of the following:

• Drag an existing layer below the motion guide layer. The layer is indented under the motion guide layer. All objects on this layer automatically snap to the motion path.

• Create a new layer under the motion guide layer. Objects you tween on this layer are automatically tweened along the motion path.

• Select a layer below a motion guide layer. Select Modify > Timeline > Layer Properties and select Guided in the Layer Properties dialog box.

To unlink layers from a motion guide layer:

1. Select the layer you want to unlink.

2. Do one of the following:

o Drag the layer above the motion guide layer.

o Select Modify > Timeline > Layer Properties and select Normal as the layer type in the Layer Properties dialog box.

3.3.8 Using mask layers

For spotlight effects and transitions, you can use a mask layer to create a hole through which underlying layers are visible. A mask item can be a filled shape, a type object, an instance of a graphic symbol, or a movie clip. You can group multiple layers together under a single mask layer to create sophisticated effects.

To create dynamic effects, you can animate a mask layer. For a filled shape used as a mask, you use shape tweening; for a type object, graphic instance, or movie clip, you use motion tweening. When using a movie clip instance as a mask, you can animate the mask along a motion path.

To create a mask layer, you place a mask item on the layer that you want to use as a mask. Instead of having a fill or stroke, the mask item acts as a window that reveals the area of linked layers that lie beneath it. The rest of the mask layer conceals everything except what shows through the mask item. A mask layer can contain only one mask item. You cannot have a mask layer inside a button, and you cannot apply a mask to another mask.

To create a mask layer:

1. Select or create a layer containing the objects to appear inside the mask.

2. With the layer selected, select Insert > Timeline > Layer to create a new layer above it.

A mask layer always masks the layer immediately below it, so be sure to create the mask layer in the proper place.

3. Place a filled shape, text, or an instance of a symbol on the mask layer.

Flash ignores bitmaps, gradients, transparency, colors, and line styles in a mask layer. Any filled area is completely transparent in the mask; any nonfilled area is opaque.

28

4. Right-click (Windows) or Control-click (Macintosh) the mask layer's name in the Timeline, and select Mask from the context menu.

The layer is converted to a mask layer, indicated by a mask layer icon. The layer immediately below it is linked to the mask layer, and its contents show through the filled area on the mask. The masked layer name is indented, and its icon changes to a masked layer icon.

5. To display the mask effect in Flash, lock the mask layer and the masked layer.

To mask additional layers after creating a mask layer, do one of the following:

• Drag an existing layer directly below the mask layer.

• Create a new layer anywhere below the mask layer.

• Select Modify > Timeline > Layer Properties and select Masked in the Layer Properties dialog box.

To unlink layers from a mask layer:

1. Select the layer you want to unlink.

2. Do one of the following:

o Drag the layer above the mask layer.

o Select Modify > Timeline > Layer Properties and select Normal.

To animate a filled shape, type object, or graphic symbol instance on a mask layer:

1. Select the mask layer in the Timeline.

2. Click in the Lock column to unlock the mask layer.

3. Do one of the following:

o If the mask object is a filled shape, apply shape tweening to the object as described in Tweening shapes.

o If the mask object is a type object or graphic symbol instance, apply motion tweening to the object as described in Tweening instances, groups, and type.

4. When you've completed the animation operation, click in the Lock column for the mask layer to lock the layer again.

To animate a movie clip on a mask layer:

1. Select the mask layer in the Timeline.

2. Double-click the movie clip on the Stage to edit the movie clip in place and to display the movie clip's Timeline.

3. Apply motion tweening to the movie clip as described in Tweening instances, groups, and type. To animate the movie clip on a motion path, see Tweening motion along a path.

29

4. When you've completed the animation procedure, click the Back button in the Edit in Place window to return to document-editing mode.

5. Click in the Lock column for the mask layer to lock the layer again.

3.3.9 About frame rates

The frame rate, the speed at which the animation is played, is measured in number of frames per second. A frame rate that's too slow makes the animation appear to stop and start; a frame rate that's too fast blurs the details of the animation. A frame rate of 12 frames per second (fps) usually gives the best results on the web. QuickTime and AVI movies generally have a frame rate of 12 fps, while the standard motion-picture rate is 24 fps.

The complexity of the animation and the speed of the computer on which the animation is being played affect the smoothness of the playback. Test your animations on a variety of machines to determine optimum frame rates.

Because you specify only one frame rate for the entire Flash document, it's a good idea to set this rate before you begin creating animation.

3.3.10 Extending still images

When you create a background for animation, it's often necessary that a still image remain the same for several frames. Adding a span of new frames (not keyframes) to a layer extends the contents of the last keyframe in all the new frames.

To extend a still image through multiple frames:

1. Create an image in the first keyframe of the sequence.

2. Select a frame to the right, marking the end of the span of frames that you want to add.

3. Select Insert > Timeline > Frame.

To use a shortcut to extend still images:

1. Create an image in the first keyframe.

2. Alt-drag (Windows) or Option-drag (Macintosh) the keyframe to the right. This creates a span of new frames, but without a new keyframe at the end point.

30

Hands On

Exercise 1

In the previous tutorial you created the graphics of the running tab. Now with the use of either frame-by-frame animation or tweening and following the principles of the animation create a realistic animation for the running tab. See an example animation which has been added in Blackboard for you.

Time is £Time is £Time is £Time is £………… don’t waste it.don’t waste it.don’t waste it.don’t waste it.

Exercise 2

Creating a Walk Cycle in Flash, by Laurence Arcadias

Making a character's walk look realistic is a long-lost, and long-cherished, secret of animation. There's no magic button to push, sadly, but the steps can be broken down into easily digestible bites that are easy to understand and recreate. And that's just what this tutorial is going to show you how to do.

In the pages that follow, you will learn how to build a simple walk cycle using an example fairly basic character— with no detail or extreme style to distract you, applying the principles you learn here to your own designs later will be effortless. Once you've mastered this basic walk, then you can give your character some added personality with exaggerated positions, or different speeds, or crazy walks.

I've provided in-depth instructions as well as screen shots to illustrate the progression of steps. For those of you who wish to follow along — and I recommend that you do — you can start by downloading the FLA source file. (NOTE: To download the file on a PC, right-click and choose "Save As ..." and on a Macintosh, hold down the mouse button and choose to save the file on a local drive.)

31

Now let's get moving.

The Simple Shapes Guy

Here's the guy we are going to animate (roll over him to see him walk the walk):

Let's dig right in and start building our character using simple shapes.

If you are new to Flash, a good place to start learning about the application and its many uses is Mike Kay's Becoming a Flash 5 Master tutorial. We'll be using many of the basic (and not-so-basic) Flash concepts in our design process, so if you are not experienced with working in Flash, now is the time to catch up. Also, if you need to download the application, Macromedia offers a free 30-day trial of the software on its site.

Starting with a blank project in Flash, create a new symbol. From the main menu, go to the Insert menu, then choose New Symbol. A new window will open. Click on the graphic and name the new symbol something easy, like "Walk." One of the great features in Flash is the architecture of symbols. Think of it as a set of Russian nesting dolls. Open the doll and you'll find a smaller doll inside. Open that doll, and there's an even smaller doll inside, and so on. This nested hierarchy allows you to have several levels of animation cycles. For example, let's say you have a symbol of a character walking,

inside of which you have another symbol with the body going up and down, inside which you have the symbol of the arms moving. Inside the arm symbol, you could have a hands symbol, inside which you could have the fingers shaking. And so on!

We'll apply this structure to the creation of our walking character, using three levels:

a "top," with the head, torso and front arm layers,

the "legs," with the 2 legs layers,

and the "back arm," with the back arm layer.

This is critical because, as you will see later, the two halves of the body complement each another. The legs swing one way while the upper body swings another. Meanwhile, the back arm should stay behind the legs and the body, which is why it's on its own layer, obscured from full view.

Let's start at the "Top," with the head.

Select the first layer in the layer palette, and rename it "Top." Using the shape tools, create a circle for the head and a small square for the nose, like in the example, below. When using your shape tool, be sure to select the stroke color as black and use white for your fill color. Later, you can rec-olor your walking man in any fashion you dare choose, but for now this will keep things clear and easy.

Dragging the selected shapes with your mouse, arrange the nose on the head so the whole assembly resembles a profile. To select one shape, use the Arrow tool and double-click the fill.

32

When your creation looks like a face, select the two shapes, go to the Insert menu and choose "Convert to Symbol" and name the symbol "Top." Also, make sure to choose "Graphic Behaviors," as this will make previewing the animation easier. Now double-click on the "Top" symbol you just created. Select the layer where the head is, then double-click on it and name it "head."

Now that we're ahead of the game, let's move onto the body.

Creating an Arm

Add a new layer with the Insert menu, or click the Add Layer button at the bottom of the timeline. Name this new layer "Body," and build the body using the polygon tool.

Select the torso and convert it to a symbol by using the Insert menu. When the symbol dialog appears, name the symbol "Body" and choose "Graphic Behaviors."

We're going to give our simple guy an arm — just one for now, but don't worry. we'll give him another arm soon enough.

Add a second layer underneath using the Insert menu. A shortcut for this is simple — just click the Add Layer button at the bottom of the timeline.

If your new layer appears higher than the "Head" layer in the layer palette, drag it underneath the "Head" layer with your mouse. We need to keep the head as the highest layer in the hierarchy right now.

Name the new layer "Front Arm." We're calling it "Front Arm" because a "Back Arm" will be added later. Build the arm by drawing two long rectangles and a small polygon for the hand, as shown in the illustration. Select the arm and convert it to a symbol using the Insert menu. When the symbol dialog appears, name the symbol "Front arm" and choose "Graphic Behaviors."

Your simple shapes guy should look something like this:

Now that we've built the symbols for the upper body, make sure that each symbol is on its own layer, and that the layers are in the following order:

"Head"

"Front Arm"

"Body"

You can always change the order of the layers by dragging them around the Layer palette with your mouse.

Now let's move on to the legs.

Creating the Legs

Click on "Walk" in the top left-hand corner of your window.

33

This will take you back to the first symbol we created and where we are building our character.

Add a new layer from the Insert menu and name it "Legs." Build one human-looking leg, as shown in the picture. It's easiest to use two long rectangles for the two different sections of the leg, and then add a triangle for the foot.

Select all of the elements in the leg and convert them to a symbol using the same process that we used for the different pieces of the upper body. Name the symbol "Legs," and remember to choose "Graphic Behaviors." Next, change the name of the "Legs" layer, renaming it "Front Leg." So we have one leg so far, but we're going to need a second one. Let's copy this front leg by selecting the symbol and choosing "Copy" from the Edit menu. Add a new layer using the Insert menu and name it "Back Leg." Select the new layer and choose "Paste in Place" from the Edit menu.

To be able to animate each leg separately, we need to create a different instance for each leg. When we built the back leg, we used the same instance of the symbol as the front leg. Unless we change this, we'll end up with bad surprises when we begin to animate our little man. For example, we may end up with two front legs going through the same motions. Rather undesirable, wouldn't you agree?

Select the leg on the "Front Leg" layer. From the Window menu, choose "Panel" then go to

"Instance" and a pop-up menu opens. Click on the duplicate button [ ]. This will cause a symbol window to open. Change the name to "Front Leg" before clicking OK. Do the same process for the back leg as well, just be sure to name the symbol "Back Leg" before clicking OK.

Now we should have two layers in our "legs" symbol

A top layer called "Front Leg"

A second layer called "Back Leg"

Alright, there's just one more thing that we have to create before we can animate our simple guy. Since he's going to be walking for us, we need to give him some of that good old terra firma to walk on. We are going to add a guide line to animate his legs more easily. By placing the guide line in the walk symbol, we won't risk having it be in the way during animation, but we'll still be able to see it with onion skinning turned on.

Add a layer from Insert menu and keep it selected. Click on Modify in the menu bar and a pop window will open. Mark this layer as a guide by checking "Guide." Be sure to keep this layer at the lowest position in the layers palette.

Alright, now here's the moment you've all been waiting for — we're ready to animate!

Make Those Legs Move!

To make our legs look realistic when they move, we have to set up a few guiding points that help us emulate the movement of the human body. Since we're working with the legs, double click on the legs within the walk symbol.

34

First, we need to add an upper guide layer. This is a helpful little device that you can use to make sure that the top of your walker's legs move from the correct points. To do this, click the upper layer in the layer palette to make it active, then click on the add layer icon. Select this new layer, then go to the Modify menu and choose "Layer." From here, you can turn your normal layer into a guide layer. Just make sure that the layer underneath the top-most layer doesn't become guided. We don't want that. If the layer underneath the top-most layer is guided, select it, go to the Modify menu and choose Layer. If the "Guided" option is turned on, switch it off.

We're doing this to avoid any dependency from the guide layer to the layer underneath. If you want more information about how guides work, see Layering and Other Neat Tricks lesson in Michael Kay's Flahs 5 tutorial.

On the new guide layer, create a circle and place it at the top of the legs. The circle should be the size of the legs' width, as the two legs should cross each other within the circle. Because the circle is on a guide layer, it won't show up in the final animation.

To avoid working on the wrong leg, let's lock the "Front Leg" layer by clicking on the lock

symbol [ ] in the layer palette. Click on frame 1 of the "Back Leg" layer.

Have you ever noticed that when you walk, one foot is up in the air while the other one is on the ground except for a very brief period of time when both feet are touching the ground? Try it, you'll see! For our purposes, this is called the "contact position" and it is going to take up only one frame of our animation. It is also going to be our first keyframe.

In animation, keyframes are the main drawings of a movement, such as the first and last frames, from which we create the in-between frames. To build a keyframe, click on frame 1 of the "Back Leg" layer. Using the rotate tool, arrange the legs as shown below. This is the keyframe for the contact position.

Next, select frame 2 of the animation and insert a keyframe on each layer. To do this, go to the Insert menu and choose "Keyframe." You want to insert a keyframe for each leg layer, one for the front and one for the back. This creates the last contact position of the step.

To animate a step, we have to remember how the famous mime, Marcel Marceau, imitates a walk. His left leg moves from behind to forward while the front leg moves forward to behind. This is what we are going to try to replicate here.

When our little guy walks, the front leg is going to swing backwards and end up in the exact same spot where the back leg touches the ground. The back leg will also swing forward and end up in the same forward position as the front leg. So, let's simply reverse the leg positions to create the opposite extreme within our walk cycle. Copy the frame "front leg 1" to "back leg 2" and "back leg 1" to "front leg 2."

If you return to the first illustration above, you'll see that the back leg is blue and the front leg is red. The second illustration, seen below, shows the legs after they have been reversed.

Before we forget, let's label those two keyframes we just created. That way, when we add more frames, we know which ones are our keyframes

35

simply by looking at the labels. Create a new layer, name it "Labels" and add a blank keyframe in frame 1. Select the blank frame, then go to the Window menu and make the Frame panel visible by choosing "Panels" then "Frame." The Frame panel will appear. Type "Contact" for the label name. Also label frame 2 as "Contact2" to identify these two keyframes as main contact positions for our walker's legs.

Now that we've got our two contact positions all set, let's continue and build out the keyframes for the other important positions in the walk cycle.

Positing the Keyframes

When our walker reaches the midpoint of his step, his legs will pass each other while travelling on their respective paths. For this reason, we're going to place a new keyframe right in the middle of the step. This is called the Passing position.

Hold down the command key (on a Mac) or right-click (in Windows) and select frame 1 all the way across on each of the three layers and add a frame. To add a frame, go to the Insert menu and select "Frame." Be sure to add one frame for each layer. With your "command" key down, or while right-clicking (in Windows), select the new frame you just created and turn it into a keyframe. Label the keyframe "Passing." Next, select the blank frame on the "Labels" layer, then go to the Window menu and make the Frame panel active. When the Frame panel appears, the blank frame within the "Labels" layer will be selected. Type "Contact" as the label name.

Arrange the legs (as shown below) so that the front leg is bent at the knee and the back leg is almost straight. You can toggle the visibility of the legs in order to make it easier to

position them if you'd like.

This passing position is our second keyframe out of three total keyframes. The first and third keyframes are our contact positions. Next, we need to define the movement of the legs that appear between our keyframe positions.

Defining the In-between Positions

Now let's create the in-between frames to acheive a full step. I call them "in-betweens," but technically they are Flash Key frames, which give us the best control to position them. In-betweens are usually created in Flash with the tweening tool, which only work for very simple motion.

Select frame 1 from the "Label," "Front Leg," and "Back Leg" layers and add two frames to

each of the two layers. To do this, go to the Insert menu and select "Frame" while the layers are selected. Be sure to add two frames to each layer. Now you have two frames in between keyframe 1 and keyframe 2.

To produce a slower walk, you could add three frames in the in-between positions instead of two, or you could add only one to make the walk

36

faster. But for the purposes of this tutorial, we'll stick with two frames.

Now we need to turn these new frames into keyframes. With your command key down (right-click in Windows), select the new frames you just created on the two layers. Go to the Insert menu and choose "Keyframe." Position the legs in between the contact and the passing positions. Use the rotate tool and turn on onion skinning to help get the positioning just right.

Here is how each leg should look from frame 1 to frame 4 with the onion skinning turned on:

Now we have five frames:

Frame 1: contact position

Frame 2: an in-between

Frame 3: another in-between

Frame 4: passing position, and

Frame 5: the second contact position

With your command key down (or right-click in Windows), select frame 4 on both layers. Just ignore the label layer for now, we don't need to label the in-betweens. Insert two frames on both the "Front Leg" and "Back Leg" layers between frames 4 and 5. This pushes the last contact position all the way to frame 7.

With your command key down (right-click in Windows), select the two frames you just created, frames 5 and 6, and make them keyframes. Next, position the legs to fill both frames, thus creating two more positions between the Passing position (frame 4) and the Contact position (frame 7). Turn on onion skinning and use the rotate tool to accomplish this.

And this is how each leg should look from frame 4 to frame 7 with onion skinning turned on: At this point, we've completed half the walk cycle, which is one step of the legs — the full walk cycle will have two steps. Some people only use half a walk cycle, which is fine as long as you don't mind having the same leg doing all the work. A full walk cycle produces a more fully-realized

effect.

To check the animation, be sure to put seven frames in the walk symbol as well as seven frames in scene one. Then, test the scene!

Give the Arms Some Rhythm

37

Next, we are going to animate the arms in coordination with the legs. Remember that when you walk, your arms move in opposition to your legs. To reproduce this effect, we need to know where the contact and passing positions for the legs are and use them as a reference. So let's copy thr labels we created in the legs symbol.

To go back to the Legs symbol and double-click anywhere on your character's leg. You should be able to see your "Legs" icon on the top left of the main window next to the "scene1" icon. Select the whole "Label" layer, then go to the Edit menu and choose "Copy Frames." Click on the top half of your walker's body and add a new layer using the Insert menu. Name the layer "Labels," then add a keyframe on frame 1. Within this new keyframe, choose the "Paste Frames" function from the Edit menu. There you have it — your contact and passing references are duplicated and ready to be used on the arms.

Go back to the "walk" symbol by clicking on the walk icon in the top left of your window. To begin working on the arms, double-click on the "top" symbol by clicking anywhere on your character's upper body. You can always select the "top" symbol from the Symbol menu on the top right side of your Flash window, but by doing so, you won't see the onion skinning of your other symbols. So click on your character's head or torso to begin working on the "top" symbol. Notice that you should still be able to see the onion skinned movement of the Legs layer.

Let's animate the front arm (we'll take care of the back arm later). The back arm will eventually need to be moved down in the layer hierarchy so that it is below the legs. This way, we won't see any funny overlapping.

Within the "top" symbol, add a guide layer at the top. To do this, insert a layer then go to the Modify menu and choose guide. The guide will not show up in your final animation.

We saw before that we want this:

and not this:

If your guide layer dependency gets messed up, click on the "Guide" layer then choose "Layer" from the Modify menu. Go to the layer palette and select "type: Normal." This will negate any dependency between the guide layer and the layer underneath it. Here we only want to have the advantage of having a line that becomes invisible in the final animation. If

you want more information about how guides work, go to Layering and Other Neat Tricks lesson of Michael's Becoming a Flash 5 Master tutorial.

Name the guide layer "Connect" and use the circle tool to build a circle in the empty layer. Position the circle on the top of the front arm and the center of the body as shown in the illustration below. It will be our guide to animate the arm.

By looking at that illustration, you can see that we are going to animate the arms in the same way that we animated the legs, only now we have our labels as a reference. Again, we have 7 frames.

38

Frame 1: "contact"

Frame 2: in-between

Frame 3: in-between

Frame 4: "passing"

Frame 5: in-between

Frame 6: in-between

Frame 7: "contact2"

Using the rotationon tool, set up your two contact positions in frames 1 and 7 at the beginning and end of the walk-cycle, and establish a straight-armed passing position in frame 4.

Now we should have the arms moving back and forth within our keyframes. Before we build the in-between phases, we have to create some vertical movement in the torso to mimic the way our bodies naturally bob up and down when we walk.

A Bounce in Your Step

Within the "Top" symbol, let's set up the first and last contact positions. Go to the last contact position (frame 7, "contact2") and select the "Head," "Body," and the "Connect" guide layer. With your command key held down (or right click in Windows), create a keyframe. Inserting a keyframe with all three layers selected ensures that the keyframe exists on all three layers.

Also create a keyframe in the passing position (frame 4, "Passing") on the "Head," "Connect," and "Body" layers.

Select the "Passing" frame and with the command key down (or while right-clicking in Windows), select the frame all the way down on each of the four top body layers: "Head," "Connect," "Body," and "Front Arm." Go ahead and insert a keyframe here.

With onion skinning active, move the four layers upward (about one nose-unit's worth of movement) using the up arrow key, as shown in the illustration.

On each layer (except "Front Arm"), let's use a little

motion tweening. You can secure the "Front Arm" by locking it — click on the lock icon [ ] while the layer is selected. To apply the motion tweening, select your first keyframe, which should be our first contact position in frame 1. Be sure to select frame 1 on all the layers except "Front Arm." Next, activate the Frame palette. Within the Frame palette, find "Tweening" and click on the "Motion" option. Flash automatically creates in-between frames for your vertical movement from frames 1 through 4 on all your selected layers.

Perform the same process to create the reverse vertical motion between frames 4 and 7, leaving the "Front Arm" layer locked. After all, what goes up must come down!

39

Don't Mean a Thing if It Ain't Got That Swing

Now it's time to create the in-between frames for the movement of the arms.

Begin with frames 2 and 3. Create keyframes in frames 2 and 3 on the arm layer and position the arms in between frame 1 and 4. Again, use the rotate tool with onion skinning turned on. Continue rotating the arm in frames 5 and 6 to create the in-between frames for the second half of the forward swing. See the illustration below for help.

This is the same process that we used for the legs. These frames are in-between frames in animation terms, but technically they are Flash

keyframes, which give us much better control.

When viewed with onion skinning on, the arms should have a nice arc, as this will create a smooth animation. Notice the subtle snap of the wrist that I added in frame 6 as the arm moves forward through the arc.

Now we have animated the arm through half of our walking cycle. However, we're not home free just yet. We still need to see the arm swinging back towards the start position.

Finish Up the Arm Cycle

We've been working within the "Top" symbol, but just make sure that you're still there by clicking on the character's head until you see the "top" icon in the upper

left-hand side of your Flash window. Now select frame 7, and make sure to select it across all four layers: "Connect," "Body," "Front Arm," and "Head." Go to the Insert menu, choose "Frame" and add six more frames up to frame 13. Be sure that the additional frames are added across all four upper-body layers.

On the "Front Arm" layer, select frames 1 to 6 with your command key down (or right-click in Windows) and copy all six frames. Then, select frames 8 through 13 and "paste-frame" in your selected frames. While the six frames are still selected, go to the Modify menu, select "Frame," then select "Reverse." This handy tool automatically reverses the sequence of movement. Now the front arm should appear to go back and forth across 13 frames!

Lock the front arm layer by clicking on the lock icon in the Layer panel. Select the three remaining layers, "Connect," "Head," and "Body," and copy the contents of frames 1 through 6. Then paste the contents into frames 8 through 13. There's no need to reverse the body movement within the last six frames because our character will still be bobbing up and down as he walks no matter which leg is leading.

However, our poor character is in the unfortunate position of only having mobility in one arm. We need to animate the back arm as well! Within the "Top" symbol, unlock the "Front Arm" layer, select frames 7 through 13, and copy them.

Go to the Insert menu and choose "Create New Symbol." Call it "Back Arm2." Within the Edit menu, select "Paste Frames." This will drop a copy of frames 7 through 13 from the "Front Arm" symbol into frames 1 through 7 on the "Back Arm2" symbol.

40

Now we've populated the first seven frames of the back arm and we need to finish up the other half of the back arm's movement. Select frames 1 through 6 from the front arm, copy the frames, and then paste the sequence into frames 8 through 13 in the "Back Arm2" symbol. Lastly, select the entire sequence of frames from "Back Arm2," then go to the Modify menu and choose "Frame." Click on "Reverse" and reverse the entire arm sequence. Now both of the arms move back and forth in opposition to each other, but they're not lined up perfectly just yet.

Go to the "Walk" symbol and select the original "Back Arm" layer. Go to the Instance tab and click on the "Swap Symbol" icon.

Select the "Back Arm2" symbol and click OK. This should replace "Back Arm" with "Back Arm2."

To be able to see what you are doing in full detail, you may want to turn on the layers in outline. This way, it will be easier to position your back arm. Now, turn on the layers outline by toggling the visibility of the layer. Reposition the back arm by placing it in exactly the correct spot. Then reset the visibility for all of your layers.

To see the character walking in his full glory, be sure to add frames in the "Walk" symbol and in scene 1. If you don't add those frames within the walk symbol, the animation wont show up.

Select the "walk" symbol on the upper left-hand side your Flash window. With the command key down, (right-click in Windows) highlight all the layers with your mouse and select every frame, all the way to frame 12. Then add a frame by using the Insert menu. Perform the same process in "scene 1" with the layer you have. Select the empty frames up to frame 12, then add a frame using the Insert menu. Be sure to stop at frame 12 on scene 1 to avoid having the same frame play twice. In this case, frame 13 is the same position as frame 1.

Now all of the movement for the top of the body is complete. So let's finish the leg cycle.

Finish Up the Leg Cycle

The last task we need to perform on the legs is the reversal of movement from the front leg to the back. This is actually very simple, and the wise reader will recognize this as the same process we applied to the arms to make them swing in opposition to each other. So, follow along.

Within the "Legs" object, select the "Back Leg" layer. Select frames 2 through 7 and copy the frames. Go to the "Front Leg" layer and paste the frames into frames 8 through 13.

41

Next go to the "Front Leg" layer and copy frames 2 through 7. Choose the "Back Leg" layer and select frames 8 through 13. Paste in the frames you just copied from the front leg. Now you'll see the front leg swing back to its starting position at the end of the cycle.

We only have to include one last little detail to make the walk cycle look realistic: We need to add some rotation to the body. When people walk, their bodies moves up and down and they tend to lean toward the direction they are walking. This has a lot to do with gravity and forward momentum, and it deserves a whole different tutorial of its own.

Another detail that should be listed in the category of "tutorials that need to be created" is the very distinct right/left twisting rotation found in the torso — adding a touch of perspective in this area can make a character look a lot more realistic, even a simple 2D character. Those of you who are feeling extra ambitious can try to play around with this, but the rest of us will be back here, working on capturing the basic forward-lean effect.

Put That Body in Motion

To achieve this forward-leaning effect, let's use the rotation tool. Within the "Walk" symbol, select the "Top" layer and add four keyframes at each contact and passing position: frames 4, 7, 10, and 13.

Next, select frame 1, open the Window menu, and make the Info panel active. In the Info panel, choose "Transform." Select "Rotate" and type 3.8. This provides a slight rotation forward (clockwise). You could exaggerate wildly or be more subtle, but that's up to you — which approach best fits your character's personality?

Do the same on frame 7 and frame 13. Then motion tween all the key frames.

Frame 13 deserves special attention because it's the same as frame 1. Since our walk cycle plays in a loop, we don't want to see the same frame twice, so we need to get rid of it. But first, select the four layers within frame 12 and insert a keyframe on each layer. Then delete frame 13. Go to scene 1 and be sure the time frame stops on frame 12. This will guarantee that our loop runs smoothly. If you need to add more frames to reach frame 12, select the missing frame in your layer up to 12 and add a frame using the Insert menu.

Walk into the Sunset

Now it's finally time to make your character walk through the screen!

Within scene1, scale your character down to make him a little smaller. Now, insert a keyframe on — oh, let's say somewhere around frame 65. Now, move your character to the extreme right side the frame.

In frame 1, move your character's position to the extreme left side of the frame. Select frame 1 and build a motion tween for the walk across the screen. Adjust the number of frames between the left side of the frame and the right side until you achieve the walking effect with maximum realism. If your character seems to slide while he's walking, check your foot positioning and be sure the steps are evenly distributeded so that the spacing stays the same during the walk across screen.

Is your character walking now? Congratulations, you have just achieved one of the most difficult tasks in animation! Don't forget to add your own special touches and give this guy all the attitude he deserves.

42

But that's not all. There's plenty more to play with. What if our guy has a beautiful ponytail? Or a big droopy stomach? Think of those elements as entities dependent upon the character's main motion. The ponytail will follow the character's head with a little delay, and the stomach will flap up when the character's body is moving downward, and vice versa. Read Newtown's Laws of Motion if you don't believe me.

This bunting is called "follow through," and the animation of thosextremitieses depend on the action of the character, the extremity's own weight and flexibility, and the extremity's resistance to air. Playing with those details is what is going to give life to our hero.