Some Cartoon Animation Basics

In the world of film, movies are shot at 24 frames per second (fps); in video and 3D animation, 30 fps is the norm. But for cartoons, 12 to 15 fps is usually all that's needed. The cartoon language of motion that we've all learned since childhood has taught our minds to expect this slightly jumpy quality of motion in a cartoon. As an animator, this is good for you, because 15 fps means half the amount of hand-drawing work that 30 fps requires. It also means that you can get your cartoon done within your lifetime and maybe take a day off here and there. Actually, there are a lot of scenes in which as few as three drawings per second will suffice — depending on how well you can express motion with your art or drawing. The rule of motion here is that things that move quickly require fewer frames (drawings), while things that move slowly require more frames. This is the main reason you'll hardly ever see slow-motion sequences in cartoons. Broadcast cartoons have lots of fast-paced motion. Fewer drawings are produced more quickly, making the production less costly. These are very significant factors when battling tight budgets and scary deadlines.

Expressing Motion and Emotion

The hardest part of animation is expressing motion and emotion. Learning to do this well saves time and makes your work more effective. One of the best exercises you can do in this respect is to simply watch the world around you. Videotaping cartoons and advancing through them at single-frame speed can give you insight on different ways that the "real world" is translated to cartoon-land. (If you have digitizing capabilities, you can get a more stable frame by capturing a cartoon to your hard drive and then analyzing the results.)

Another good learning trick is to import raster video to your Flash Timeline, so that you can use a live action sequence as your guide and practice drawing on top of it. While this can help you get a feel for the mechanics of motion, it's really just a start. Cartoons are engaging because they so often deviate from, or even defy, the predictable motion we see every day.

Exaggerate everything! After all, this is what makes it a cartoon.

Cross-Reference 

We have included a tutorial in this chapter by Felix Stumpf, who uses video as a reference for his simple but wonderfully engaging hand-drawn animations. To see more of his work, visit www.felixstumpf.de.

Web Resource 

Tex Avery was a pioneering animator who created cartoons with overblown and hilarious motion, which revolutionized animation. You can read about him at www.brightlightsfilm.com/22/texavery.html.

Anticipation

Anticipation is a technique used to indicate that characters are about to do something, like take off running. Before lunging into the sprint, characters slowly back up, loading all their motion into their feet until their motion reverses and sends them blasting off in the other direction. In a more subtle form, this is shown in Figure 14-1, when Weber the pelican crouches before he takes flight from his perch on the pier.

Figure 14-1: Anticipation is used to accentuate Weber's take-off.

Weight

Keep the weight of objects in mind. This helps to make your cartoon believable. A feather falls more slowly than an anvil. The feather also eases out (slows down) before landing gently on the ground, while the anvil slams into the ground with such force as to make a gashing dent in it. Humor can play a role here by giving extreme weight to things that do not have it (or vice versa), thereby causing a surprise in the viewer's preconceived notion of what should happen — surprise is the seed of humor.

Overlapping Actions

Visualize a jogging Santa Claus, his belly bouncing up and down with each step. Because of its weight, his belly is still on a downward motion when the rest of his body is being pushed upward by the thrust of his leg. This opposing motion is known as overlapping actions. Overlapping action does not only happen in an up-and-down motion; it can happen in any direction. An example of side-to-side overlapping actions is shown in Figure 14-2. Note that, as the bully thrusts forward, Weber's body reacts in the opposite direction … only to catch up just in time for the thrust to reverse and go the other way.

Figure 14-2: Overlapping actions can accentuate movement in any direction.

Blurring to Simulate Motion

Blurring is a technique or device that animators use to signify a motion that's moving faster than the frame rate can physically show. In film, this manifests itself as a blurred out-of-focus subject (due to the subject moving faster than the camera's shutter can capture). You may have already employed this effect in Photoshop, with the motion blur filter. In cartoon animation, blurring is often (and easily) described with blur lines. Blur lines are an approximation of the moving subject using line or brush strokes that trail off in the direction that the subject is coming from. When used properly, this great device can save hours of tedious drawing. An example of animated motion blur used to indicate a spinning motion is shown in Figure 14-3, which is a sequence in which the word "Weber" turns into Weber the pelican.

Figure 14-3: Blur lines simulate the effect of motion that is "faster than the eye can see."

On the CD-ROM 

To see animated examples of the blurred line effect, look in the R_Bazley folder inside the ch14 folder on the CD-ROM. Richard Bazley has used blurred lines effectively to create a collapsing ceiling and a rush of wind.

Using Video As a Basis for Fluid, Hand-drawn Animation, by Felix Stumpf

There are as many different styles of hand-drawn animation as there are animators. But, if you want to create vivid animation with a realistic look, using video as a visual reference is a great shortcut. Combining fluid hand-drawn lines with the movement style of live video results in an engaging hybrid that allows room for individual drawing techniques while maintaining lifelike, cinematic scale and motion. Very skilled animators can achieve this type of fluid animation by drawing freehand, but even then, it can be tricky to capture the mannerisms and personality of a real person.

A simple way of capturing these subtle elements, even with very few lines, is to create a series of video stills to use as a template for ink drawings that can be sequenced in Flash and combined with other graphics or sound to complete the scene.

The line animation that I used to introduce myself on my portfolio site (www.felixstumpf.de) was created by importing a still sequence from a video clip shot on a plain background into Photoshop, and then printing the frames out to use under tracing paper as a reference for pen and ink drawings. I find that six drawings per second are usually sufficient to translate the main flow of motion from the video clip to the traced animation.

Note 

Shooting on a plain background with lighting that separates the figure from the background makes it much easier to trace the outline of the figure. Most video- editing programs (such as Final Cut or Premiere) will export a series of stills in a format compatible with Photoshop and Flash. I generally use pict files (.pct), but any compatible lossless format will do.

The decision to draw on tracing paper or to import the video stills into Flash or Photoshop and use digital drawing or painting tools to trace over the video image is mostly a stylistic one. With practice, you can create artwork with the same speed and accuracy with analog or digital tools, but you may find that you prefer the look or feel of one over the other for certain projects. I use both methods and the choice is usually dependent on the mood I'm going for in the final piece. Whether I create the line drawings on paper, in Photoshop, or directly in Flash, I use the original video clip (not the still frames) as a guide for positioning and pacing the final image sequence. This is one of the secrets to maintaining lifelike motion in the animated version.

On the CD-ROM 

The evolution of the intro to Felix's portfolio site is shown through the clips included in the fstumpf subfolder of the ch14 folder on the CD-ROM. Open video.swf to see the original video footage. Open animation.swf to see how the line drawings are lined up with the video, and open finalversion.swf to see how the polished animation looks with text elements added in Flash.

Figure 14-4, shows a screenshot from the video clip (down-sampled to 8 frames/sec), used as a reference for my drawings. Turning and walking quickly toward the camera while crossing the frame from left to right sets up a dramatic change in scale and position that will give the animated outline more impact.

Figure 14-4: Shooting on a plain background makes it easier to isolate the movement of the figure in the animation.

Figure 14-5 shows my scanned drawings overlaid with the video in Flash to match up with the pacing and position of the original live action. By following the main lines of action but letting some parts of the outline drop out and shift as the figure moves, I am able to add an organic, fluid character to the outline, which makes the interpretation more artistic.

Figure 14-5: Although the pacing and key outlines are sequenced to follow the video template exactly, the sketched lines introduce some looseness.

Figure 14-6 shows a series of stills from the finished animation. The video layer has been removed and the line art translates the original flow nicely.

Figure 14-6: Working with line art gives you the freedom to add other graphic elements or text that interact with the animated figure seamlessly.

Tip 

The more images you use, the more fluid your animations will look. I've found that a good rule of thumb is to use 6 images (frames) per second for Web and 25 images (frames) per second for film.

Regardless of which drawing environment you prefer, the key to success is to pay careful attention to the proportions and flow of the still sequence and to be as precise as possible in following the main outlines of the figure. If you choose to draw in Flash, you may find it easier to create one traced outline and then modify that outline in each subsequent frame rather than starting the outline from scratch for each frame. Even small distortions will have a big impact on the final impression of the piece and may throw off the unique characteristics of motion that make the character identifiable. On the other hand, once you get the main action translated smoothly, it can be fun to throw in some variation and take a bit of artistic license to make the visuals more realistic or more fanciful — depending on the final look you're going for. I tend to draw a lot of elements from memory (such as the music player and the rolling paper that the figure interacts with on my portfolio site). This frees me up to invent an environment for the figure and saves a lot of money on props! Combining fluid video-style motion with freehand drawings gives you the benefit of starting with realistic proportions and lifelike movements, but still leaves room for invention and imagination expressed in your own unique drawing style.

Tip 

As with any other Flash project, it helps to keep elements organized on individual layers: Keep the video on a Guide layer, import or draw the main image sequence on another layer, and place any additional drawn elements on their own layers.

After I have some traced animation sequences completed, I put them together with sketches of other content and use sample music to rough out my ideas for the flow of the complete site. I call these rough files moodboards, and I use them to test my ideas and page designs before I move on to optimizing and integrating final elements in an interactive Flash structure. It takes much less time to prototype a series of screens as a linear animation than it does to build an interactive model, so I can test different versions of my ideas before investing resources on the final project.

On the CD-ROM 

One version of my concept for the animation flow with other elements on my portfolio site is illustrated in the moodboard.swf file included in the fstumpf subfolder in the ch14 folder on the CD-ROM. If you compare the moodboard with the final version of my live site, you will notice that the layout is not exactly the same, but the atmosphere is very similar.

Web Resource 

Check out the final results of Felix's traced video sketches with other line art elements in his inventive portfolio presentation at www.felixstumpf.de.