|Table of Contents|
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
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.
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:
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!
|Table of Contents|