Animation and Effects with Macromedia Flash MX 1002004 [Electronic resources] نسخه متنی

Learning about Character Animation

You already learned how to make graphics animate in Flash by using several different techniques: motion tweens, shape tweens, and frame-by-frame animation. However, there are several ways to animate characters or objects to make the movements look accurate, with a heightened realism. These techniques are things to think of before you start creating your tweens or frame-by-frame animations. You can apply one or several of these techniques regardless of which way you choose to create your animations.

One of the most important techniques is to show the effects of the environment on the item (gravity, other objects, and so forth). For example, if a bat hits a ball, the ball flattens slightly when and where the bat connects with the ball.

You might find this technique useful when you animate facial expressions. If you create a character's dialogue by using lip-syncing, you benefit from applying the effects of gravity and stretching to the character's face. You look at lip-sync later in this chapter.

Then, when the ball flies through the air, it appears to be slightly stretched out, as seen in the following figure. This effect is usually exaggerated in character animations. You might also use blurring to achieve the effect of an object's movement, particularly "motion blurs" (a commonly used filter in Photoshop and Fireworks). The more blur that you apply to an object implies a greater rate of speed or motion.

When you create an animation, try to think of the motion you need to display. For example, consider the pirate that you animated in Chapter 4. His head bobbed up and down while he danced. The head bobbing was clearly a secondary motion, compared with the primary motion of dancing that also included swinging arms and moving wooden legs. Considering and paying attention to the primary animation or action in your animation is important, and this motion should overshadow the secondary animations. Animations benefit from having a clear main action (the primary animation).

Chapter 2), you can achieve more realism than when you animate along a straight line.

Chapter 2); or for greater creative control, you can manually simulate easing using a series of motion tweens to slow down the character gradually.

You apply another important part of character animation before a major event occurscalled anticipation. Before the event occurs, you might want to animate the character to hint at what is about to happen, so viewers can anticipate what's about to happen. For example, if you animate the bat hitting the ball, you might want to show a character winding up the bat backward before hitting the ball (a forward motion). Or, if your character is about to speak, you might want to show an expression on his or her face that alludes to this change in the action. Using anticipation also helps heighten the realistic nature of your animation.

There are several other aspects that you should consider when you set up your complete animation, which goes beyond the character animation you explore in this project, and it's also beyond the scope of this book. Remember to think about how to form your animation using thumbnail outlines, as outlined in earlier chapters. Think about and plan the timing of your animation in advance. Think about how the frame should look in relation to your character. Will the frame be a close-up of the character or a long shot that shows the scenery around the character? How should you angle the frame and move the character within it? All of these aspects help send your message to the visitor.

Use fewer steps in an Illustrator blend to help reduce file size. The size of your SWF file increases as you add more graphic symbols to the file. Therefore, you should use the smallest possible number of symbols whenever you create a character.

Character Creation in Flash

Shortly, you'll discover how to create characters in Flash and learn that you build most of your characters from a great number of instances on the Stage. You need to create a series of symbolsone for each major part of the character (at least the parts you want to animate). Sometimes you'll need several symbols for a single part of the character.

Illustrator can help you create symbols to use in Flash, which is discussed in the following section. Whether you use symbols you create in third-party software or create the entire character in Flash, remember to reuse the assets as much as you can. Use as few symbols as you possibly can to create the effect you want to achieve to reduce the file size of your published SWF file.

Creating graphics for animation in Illustrator

You can use a variety of tools to create graphics to animate in Flash outside of the authoring environment. A popular choice is Adobe Illustrator, which allows you to create vector drawings that you can edit and animate using Flash. Illustrator also lets you "blend" drawings, which creates a series of graphics between two states (for example, an arm or leg bending). You can control how many "steps" exist between the blended shape, each of which you change into a symbol in Illustrator or Flash. These symbols let you create a bunch of poses for your character's arms, legs, tails, and so onas demonstrated in the following figure.

If you have Illustrator CS, you can follow these steps to create a blended graphic and symbols that you could import into Flash. You won't use these drawings in Project 5, so don't worry if you don't have Illustrator. However, this exercise demonstrates how you can use and benefit from third-party software for the purpose of character animation.

You can download a trial copy of Illustrator CS from the Adobe website at [www.adobe.com/products/tryadobe/].

In Illustrator, draw an arm, leg, or tail on the artboard. After you finish, select the entire drawing using the Selection tool. After you select the drawing, drag it into the Brushes palette (Figure 5.5).

The New Brush dialog box opens, in which you need to click Art Brush. A second dialog box called Art Brush Options opens; click OK.

Now you create the beginning and end state of your animation. Suppose that you want to have a few different drawings for the tail, from an upright position, and then it bends to the right. You need to create the upright position drawing, and then a drawing of the tail bent completely to the right. Illustrator creates all the drawings in-between those two statesjust as a motion tween does in Flash. If you want to use your original drawing as the first state, leave it on the artboard. If not, you need to create a new beginning state and an ending state.

Group your vector drawings before dragging them to the Brushes palette.

Move your original drawing off the artboard, and make sure it's deselected. Select the Brush tool, and then select the new Brush that you created (Figure 5.6).

If you removed the original drawing from the artboard, draw a brushstroke on the artboard to create that shape. To create a straight tail, you need to draw a straight line and the artwork you created earlier appears in the drawing. Create the brushstroke near the left side of the artboard. You might need to experiment a bit first before you get the right look.

Then, on the right side of the artboard, create the finished drawing (representing the final state of the tween). For the tail, draw a curved line to create a curved tail (Figure 5.7).

Select both tails using the Selection tool. Then select Object > Blend > Make from the menu. Several intermediate graphics appear between the two selected objects. Next, select Object > Blend > Blend Options. Another dialog box opens, in which you can choose how many steps Illustrator adds between the two graphics. Select the least number of steps necessary because each new graphic inevitably adds file size to your final SWF.

After you finish making the blend, select Object > Blend > Expand to expand the blend into individual objects. Then select Object > Ungroup to separate the grouped graphics.

Create a new file in Flash, and then click a frame on the Timeline and then select File > Import > Import to Stage to import the Illustrator file (.AI) into Flash.

When you import Illustrator files, you have many options available about how to import the file. Convert any pages to keyframes, convert layers to layers, and select the pages you need to import. You can choose whether you want to include invisible layers. Do not select Rasterize Everything, or else you'll lose the ability to modify vector graphics (they're turned into bitmap images instead). If you do not need to edit the graphics, and if you discover you lose quality when you import the drawing into Flash, you might want to try importing the file again and select the Rasterize option instead.

You can find a sample Illustrator file (tail.ai) on the CD-ROM.

Select each drawing and press F8 to convert it into a symbol. You do this the usual way: select the graphics using the Section tool, and press F8 to convert it into a movie clip or graphic symbol. Remember that you can still edit these vectors if you want to shape tween the vectors or modify the graphic's appearance.

Lip-syncing in Flash

Lip-syncing is the process of importing an audio track and animating a character so it appears to speak the dialogue in the audio track. You need to create a series of shapes, called phonemes, for the mouth. The shapes represent a unit of sounda part of the spoken word. When you combine these shapes together, you can make the character appear to speak along with the dialogue.

Appendix D for online resources related to lip-syncing.

With such complicated languages, you might think that making all these shapes is an arduous task. In fact, when you animate in Flash, you can reduce these phonemes to approximately 10 simple shapes because similar sounds can use the same shape instead of slightly different ones.

To get started lip-syncing, create a new FLA document and draw a mouthless face. Leave lots of room around the mouth area, so you can avoid having to animate the nose as well.

Import the sound file into Flash (File > Import > Import to Library), create a new layer, and drag the sound from the Library onto the new layer. Press F5 on the Timeline to extend the number of frames the sound spans across. Open the Property inspector and then select the sound on the layer (where you see the waveform). Select Stream from the Sync pop-up menu. Selecting Stream means that you can scrub the Timeline and hear the sound file while you swap mouth shapes. Don't add anything else to this layeralways keep sounds on their own Timeline layer.

It's easiest to create the mouth shapes using the Brush tool, especially if you have access to a graphics tablet. The following figure displays the basic phonemes you can use to animate the mouth of your character.

You need to import a sound with spoken dialogue. Many computers come with microphones and software you can use to record your voice (you can use Sound Recorder on Windows or facilitate audio-capture features in iMovie on Macintosh).

Click Insert Layer on the Timeline to add a new layer for the mouth shapes. Create the basic shapes on the Stage (using Figure 5.11 as a guide) and convert them into graphic symbols so you can reuse the assets.

If you don't use one of the mouth symbols, you can always remove it from the Library later on (use the Options menu to choose Select Unused Items). You might create fewer mouth shapes for simpler animations or characters, too. Or, for more variety and realism, you might create more symbols as you animate. Sometimes it helps to have a basic set of mouth drawings ready to start with, ones that you'll definitely use for the animation, and add more while you work on the character.

You can find a bonus file that includes these mouth shapes and the mouthless face, in the 05/ bonus folder on the CD-ROM. It's called dialog.fla.

Creating Walk Cycles

You can create walk cycles in a very similar way to the lip-sync animation. You want to create several different leg drawings for your character (instead of mouth graphics). You want to swap those instances along the Timeline to create the illusion of walking. Copy and paste all the animated frames into a new movie clip, and then you can animate this movie clip across the Stage, so the character appears to walk.

Appendix D has online resources related to creating proper leg positions for walk cycles.

Chapter 4 for each new sound/syllable of the dialogue. Some longer sounds might need to persist across more frames than short sounds and syllables, which might appear on every frame or every second frame (Figure 5.10).