Hack 28 Quick, Bandwidth-Efficient Character Animation

Animating by hand can take ages. Skirt some of the hard work with a few insider tricks from a Disney animator.

Flash animation is all about doing the minimum to get across the story, because both bandwidth and Flash performance are at a premium. One trick used to minimize work and bandwidth requirements is the walk cycle. By creating a repeating animation of a left step and right step, which when repeated appears as a seamless and continuous walk, the number of frames you need can be reduced significantly versus animating a walking figure with lots of nonrepeating frames. The number of frames and the difficulty in creating them is still high, however, so you will most likely need to prune the frame count further.

This hack was created as part of web design work I am doing with Adam Philips, an award-winning Disney animator. His job with Disney involves working out how to produce optimized animations with the fewest number of frames, a skill he uses to the full in his web cartoons, as seen at http://www.biteycastle.com. This hack shows a number of ways he reduced the number of frames used in a cartoon character we're developing named Scribble.

Hacky Wacky Walking

There are two problems to overcome when creating a realistic walk cycle:

• We walk with more than just our legs-our head dips up and down, and our arms swing as our hips sway slightly. Unless you include all of these in an animation, it will look like someone walking while wearing clothes that met with a starch-related laundry accident.

• You have to make your character walk at the same speed he appears to be moving. Sounds simple, but you've probably seen video games or low-budget cartoons whose characters seem to glide along the floor, because they are walking at a different speed from the one at which they are moving across the screen.

To create a realistic walk cycle requires lots of frames and a good eye for movement.

The hacky way around this is to create a walk cycle in which breaking the preceding rules doesn't matter. Create a simplified animation (using far fewer frames) that can look a bit wacky and unlike a normal walk or one that spends at least some of the time totally off the ground, thus minimizing the glide effect. When done well, it has the advantage of giving your characters personality.

The Tasmanian Devil from the Warner Bros. cartoons is the most extreme example of this. He moves by twisting around so fast you can't see him, and the twister glides across the screen. This is a good example of building "ease of animation" into your cartoon subjects from the start.

The site Adam and I are creating has a novel interface-rather than navigating with your cursor, you move around the site by enticing a cartoon character named Scribble to follow you. Unless he is doing something else (such as sulking, interacting with something he has found, or generally up to his own thing), he will simply follow the mouse.

For example, if the mouse is to the right of him, as shown in Figure 4-2, he uses the walk cycle in Figure 4-3 to move to the current mouse position.

Figure 4-2. The stationary character with the mouse pointer to his right

Figure 4-3. An efficient walk cycle

Scribble moves very quickly in the final work, far too quickly for the viewer to notice the reduced number of frames in the animation. He also spends a lot of time in the air, thus minimizing the slide walk effect.

Of course, when two designers get together, easy options always go out the window. In our case, we chose to animate in three dimensions. Scribble and the mouse move in a faux 3D world. Sounds like a big deal animation-wise, right? A Swift 3D rotating text effect takes upwards of 20 frames to create a passably smooth animation. A 3D walk cycle would require many more frames because the rotating object (Scribble) is itself changing as is the direction/orientation.

Figure 4-4 shows how Adam did it.

Figure 4-4. A 3D walk cycle

Each radial line shows Scribble's walk cycle in a particular direction. Adam used three very subtle hacks to minimize the zillions of frames a 3D walk cycle would normally entail:

• The "run left" walk cycle is the mirror image of the "run right" walk cycle. We can do this because Scribble has no directional shading-he's all in black. So the three walk cycles to the left are simply mirror images of the three to the right. To reverse a graphic or symbol instance, bring up the Transform panel (WindowDesign PanelsTransform), uncheck the constrain checkbox, then change the sign of either the horizontal or vertical percentage scaling value (depending on which axis you want to mirror across). For example, set the horizontal scaling to -100 to mirror the character across the Y axis.

• The "walk north" frames are the same as the "walk south" graphics, but with the eyes on the other side of the head (or rather, omitted).

• Each walk cycle contains lots of repetition. The frames with the left foot down are simply the same point on the right leg flipped over, so optimizations can occur between these frames.

• Scribble's movement is constrained to one of eight cardinal directions.

• We used an animation that looks good at various speeds (kind of a loping, jumping walk). In the real world, the gait for walking is different from the gait for jogging or running, so we used an imaginary gait that looks good at both speeds. You couldn't do that with a realistic horse animation, since walking, trotting, cantering, and galloping all have distinctive gaits.

With all this optimization, only 10-20 frames are needed for the full 3D walk cycle. Nothing bandwidth-heavy here!

Final Thoughts

Although the ideas behind this hack are obvious as soon as you have read this, you don't see them used often in Flash web animation. The same techniques can be used in any cyclical animation, such as a bird flying.

You don't always need smooth animation, and, in many cases, fewer frames give a bigger sense of motion and personality. Of course, the positive effects on workload and download time are also beneficial!

You can follow the development of my collaboration with Adam Phillips in a forthcoming book from O'Reilly (working title Mastering Flash Animation and User Interface Design) in which readers will learn animation from Adam and the associated scripting from me, as we slowly build up Scribble's world.

For those curious to see Scribble in action, look at one of our early works in progress, scribbleWalk.fla, downloadable from this book's web site. Also worth looking at is the associated code on frame 1 of the actions layer of the downloadable FLA. A few other approximations will become apparent when you look at the code, but we'll leave you to search them out!