Hack 32 Computer-Generated Character Animation

If you don't have the time or skill to create character animations by hand, use Curious Labs' Poser application for Flash character animation.

Old hands will remember the buzz created during Flash 4's heyday when faux 3D first appeared in Flash sites. Early users of the technique such as Manuel Clement (http://www.mano1.com) did the whole thing by hand, but the introduction of a number of dedicated 3D-to-Flash exporters and standalone applications (most notably Swift 3D, http://www.swift3d.com) made it possible to automate the whole process.

Applications like Swift 3D are cool for creating 3D interfaces and other regular objects. Sure, it's good to have around, but it's not something mainstream motion graphics designers will use every day. Another form of 3D that is used every day by some Flash designers is character animation. Many Flash cartoons feature faux 3D characters, and almost all of them are done the old way—hand drawn.

Automating Character Animation with Poser

Curious Labs' Poser 5 application (http://www.curiouslabs.com), formerly from MetaCreations, is specifically designed to make 3D figures. Unlike other 3D character animation applications (such as 3D Studio Max's associated character animation suite, Character Studio), it doesn't have a steep learning curve; anyone familiar with Swift 3D can quickly pick up Poser 5. Also, unlike most other 3D applications supporting dedicated character animation, Poser is relatively cheap.

Like all 3D applications, Poser takes some time to master, but it saves you having to hand draw all your character animations. A typical Flash hand-animated feature takes months to develop, so taking the time to learn Poser should quickly pay off.

Don't be put off by the bad reviews of Poser you may find on the Web. Those refer primarily to the "dot oh" release of Poser 5, which had a number of issues. When used with the available patches installed, Poser becomes a stable and reliable tool.

Poser can be used in two ways with Flash:

• To create realistic animated figures that you can use as guides for your own animations. This is the original purpose for which Poser was created—as a digital version of the wooden mannequins used by traditional artists.

• To create final animations directly and export the animations into Flash as SWFs (in much the same way as 3D animations are exported into Flash from Swift 3D).

We will look at the latter way as an introduction to Poser and Flash, since it is the route that includes features specifically built into Poser to allow Poser-to-Flash export.

Using Poser to Create Animation Directly

Although Poser allows you to design your own characters and animation sequences, I will show what Poser can do by running through the export of an animation consisting of a preset model and preset animation.

On Poser 5's startup screen, you are presented with the default model in the default pose, as shown in Figure 4-13.

Figure 4-13. The Poser 5 startup screen

Select any part of the default figure and press the Delete key to delete it (you will get an Are You Sure? dialog box. Click yes).

From the Poser Library (select WindowLibraries if you don't see it on the far right), select FiguresAdditional FiguresCartoons to display the characters shown in Figure 4-14. Double-click on Minnie.

Figure 4-14. Gramps, Mick, and Minnie, three of Poser's built-in characters

Minnie should appear in the main window in the standard 3D character model's default "T" pose (standing upright with arms outstretched to the sides). We need to add an animation to Minnie. Still in the Library, select PoseCartoon PosesMinnie. Select the Point pose, as shown in the middle left of Figure 4-15. This is a 28-frame animation (as stated by the number in the top right of the pose thumbnail).

Minnie will change to reflect the start of this pose in the main window, as shown in Figure 4-15.

Figure 4-15. The Point pose thumbnail in the Library (left); the Minnie 3D model shows the first frame of this pose in the main window (right)

You may have to move Minnie back a little on Poser's Stage so that all parts of her will appear on the Flash Stage when she is animated as a SWF (this is because the Poser Stage area is square, whereas the Flash Stage is typically rectangular, causing the top and bottom of the figure to be cropped when seen in Flash). To do this, find the Editing Tools icons (select WindowEditing Tools if you don't see them). Click and hold on the Translate In/Out (Z-index) icon, shown in Figure 4-16, and drag the mouse up or down to move Minnie backward or forward.

Figure 4-16. The Translate In/Out (Z-index) icon in Poser

To export the animation as a Flash SWF, select AnimationMake Movie, which opens the Make Movie dialog box shown in Figure 4-17. For the Sequence Type, select Macromedia Flash (.swf). In the Frame Rate section, select the Use This Frame Rate radio button, and select the frame rate of your target SWF. The Poser default frame rate is 30 fps. Setting a frame rate that is much lower than 30 fps may result in a jerky animation caused by too few frames, so it is best to set your SWF's frame rate at or near 30 fps.

Figure 4-17. Poser's Make Movie dialog box

Select the Flash Settings button in the Make Movie dialog box. The options in the Flash Export dialog box, shown in Figure 4-18, allow you to define how you want the images that Poser renders converted into vectors. The settings for the most optimizable SWF are shown in Figure 4-18 (namely, 4 colors with Quantization set to All Frames and other options unchecked).

Figure 4-18. Poser's Flash Export settings dialog box

The optimal number of colors to use depends on the character being created. Minnie has a reduced palette and can be exported as a vector with very few colors. Remember though—the more colors you select, the more vectors will be created.

Click OK to accept your Flash Export settings, and click OK again to create the SWF.

To import the generated SWF into Flash, open a new or existing FLA and select FileImportImport to Stage.

The animation appears as a series of keyframes on a single layer. Graphic shapes are grouped. As with all exports, the next step is optimizing the animation. Optimizing Poser output is very similar to optimizing Swift 3D output. If you are good at the former, you should have no problems with the latter.

The following tips should help:

• Ungroup every frame's content and then optimize (ModifyShapeOptimize) and/or smooth it (ModifyShapeSmooth).

• As with Swift 3D, Poser doesn't intelligently turn often-used shapes into symbols and reuse them. It's up to you to seek them out and fix the problem. For example, Minnie's legs and skirt look as if they could be replaced with a small number of symbols that could be reused between frames.

Figure 4-19 depicts the process of optimizing frames using onion-skinning outlines and the standard Flash optimization and drawing tools.

Figure 4-19. Optimizing Poser animations imported into Flash

More experienced Flash designers may want to consider importing the Poser images as guide bitmaps and tracing them to create the vector shapes from scratch, as shown in Figure 4-20. This is my preferred route; although it is less automatic, it retains the hand-drawn feel of traditional animation while still speeding up the process. It also results in more optimized graphics.

Figure 4-20. Output from Poser that can be imported into Flash and used as character animation guides

Final Thoughts

Poser is a tool that is often used with Photoshop for any work that would otherwise require source material consisting of images of human models and stand-ins, but it is currently rarely used with Flash.

Although creating your own custom 3D characters and animations in Poser, then hand-optimizing each frame in Flash, is still a long task, it may shorten at least some of the months of hard work required to do the whole thing by hand, particularly if you already have some 3D experience through Swift 3D.

For the traditional animator who prefers to hand draw his characters, Poser offers a quick and easy way to create accurate animation guide images.