Animator’s Keys and Inbetweening Flash

Earlier in this book you learned about two Flash animation methods: frame-byframe and tweening. This section focuses on traditional cartoonist frame-by-frame techniques together with traditional cartoonist’s keys and inbetween methods to accomplish frame-by-frame animation. Despite the similarity of terminology, this topic heading does not refer to a menu item in Flash. Instead, it should be noted that animation programs such as Flash have derived some of their terminology (and methods) from the vintage world of hand-drawn cel animation. Vintage animators used the methods of keys and inbetweening to determine what action a character will take in a given shot. It’s akin to sketching, but with motion in mind. In this sense, keys are the high points, or ultimate positions, in a given sequence of motion. Thus, in vintage animation:

  • Keys are the pivotal drawings or highlights that determine how the motion will play out.
  • Inbetweens are the fill-in drawings that smooth out the motion.

In Flash, the usual workflow is to set keyframes for a symbol and then to tween the intervening frames, which harnesses the power of the computer to fill the inbetweens. Although this is fine for many things, it is inadequate for many others. For example, a walk sequence is too subtle and complex to be tweened by a computer. So, let’s take a look at the traditional use of keys and inbetweens for generating a simple walk sequence that starts and ends according to a natural pace, yet will also generate a walk loop.

Walk cycles (or walk loops)
Earlier in the book, you learned about using Poser to create a walk loop using a 3D model. 3D animation is a wonderful practice that is coming of age in films such as Jurassic Park, A Bug’s Life, and Toy Story. But perhaps you’ve noticed that a focus on humans is missing from such films. That’s because humans are incredibly difficult to animate convincingly in 3D. Why? Because computers are too perfect too stiff. Human movement is delightfully sloppy and we are keenly aware of this quality of human movement, both on a conscious and a subconscious level. (Another term for this is body language.) This factor drives the 3D animators nuts when they try to create human characters. Interestingly, these same factors lead to a plus for the 2D hand-drawn animator: Because our hands are also sloppy when drawing, we find that there’s emotion in the imprecision of a hand-drawn stroke which brings us back to keys. Keys should be loosely sketched and then refined and inbetweened.

Refer to the following diagrams, which express this concept in visual terms. Notice that these keys are quickly drawn ovals approximating a woman at the high points in a walk cycle. This was drawn on a layer in Flash with a light gray pencil.

Next, we’ll lock that layer and create a new layer on top of it. Then, using the pencil in Ink Mode with black as our color to ink it in, we’ll refine this character to a more finished look, as shown in Figure below. Once we’re satisfied with the look, the Fast Sketch layer can be discarded.

Now the keys for the finished walk cycle are set. However, upon playback (although she walks!) it’s an extremely jerky and unnatural gait. So, where do we start if we want to “fix” the walk? Do you remember the rule discussed earlier, that the slower the movement the more frames (or drawings) would be needed? A good starting point for a normal walk cycle is about 1.5 seconds or 24 frames at 15 fps. This is timed from when the left foot pushes off the ground until just before it returns to its original position. Why not go back to its original position? Because this would cause two frames to be almost the same and in a loop would introduce a stutter to the walk. (Of course, that might be OK if you’re animating a stumbling drunk, but here we want smooth.) So, depending on the speed that you want the subject to walk, you can determine the amount of inbetweens you need to draw.

Here are some rough finished keys from a walk cycle prior to playback.

Here are some rough finished keys from a walk cycle prior to playback.

You may notice there are some blank, nonkeyed frames (repeaters) in the timeline. These were used to economize drawing time and to slow the walk of the character in the previous figure even more. If a speedier walk were called for, we would simply delete these repeater frames. A good basic rule about repeaters is to add no more than one repeater frame between keys; adding more causes the smoothness of motion to fall apart. If the motion must proceed more slowly, then you have to draw more inbetweens. Fortunately, with Flash onion skinning (the capability to see before and after the current time in a dimmed graphic) the addition of a few more inbetweens is not an enormous task. In fact, onion skinning is indispensable for doing inbetweens, and even for setting keys. One pitfall of onion skinning is the tendency to trace what you’re seeing. It takes practice to ignore the onion lines and use them only as a guide. You need to remember that the object is to draw frames that have slight, but meaningful differences between them. Although it can mean a lot more drawing, it’s well worth it. Because you’ll use your walk (and running) cycles over and over during the course of your cartoon, do them well.

Types of walks
So far, we’ve covered the mechanics of a walk cycle. But for animators, the great thing about walking in all its forms is what it can communicate about the character. We read this body language constantly every day without really thinking about it. We often make judgments about people’s mood, mission, and character based on the way that they carry themselves. Picture the young man, head held high, confidently striding briskly with direction and purpose: He is in control of the situation and will accomplish the task set before him. But if we throw in a little wristwatch checking and awkward arm movements, then that same walk becomes a stressful “I’m late.” This late gait suggests a very different story of the person who didn’t plan ahead. Or, witness the poor shlub back hunched, arms dangling at his sides. He moves along, dragging his feet as if they each weigh a thousand pounds. That tells the sad story of a person who’s a basket case. Finally, what about a random pace, feet slipping from side to side, sometimes crisscrossing, other times colliding, while the body moves in a stop-and-start fashion as if it were just going along for the ride? Is that someone who couldn’t figure out when to leave the bar?

Of course, these are extreme examples. Walks are actually very subtle and there are limitless variations on the basic forms. But if you begin to observe and analyze these details as they occur in everyday life, then you’ll be able to instill a higher order in your animations. Simply take time to look. It’s all there waiting for you to use in your next animation. Then remember that because it’s a cartoon, exaggerate!

Coloring the art
Now, to color in the character between the inked lines. In traditional animation, this was the most tedious and time-consuming job of all: endless thousands of cels to be hand painted and dried. Most often, armies of low-paid workers in far away lands did it. But with Flash it’s a snap! That’s because of Flash’s wonderful (and sometimes mysterious) gap-jumping fill tool, the Paint Bucket. With Flash, you never run out of paint, and it dries instantly a real time-saver to be sure!

The model sheet
Here’s a coloring time-saver that you can use for yourself within Flash: Use a fully colored model of your character at the start of a cycle or scene. This will serve as a color model and will be discarded when the cycle or shot is finished. It’s very important to keep a model sheet, which is an archive of color models finished, fully colored characters to maintain consistent color across the span of the project. (It’s also quite useful at the start of future projects.) “Why,” you may ask, “is this necessary now that Flash has color sets?”

Even though Flash has the ability to save color sets, it’s still difficult to remember which yellow was used on a certain area of the character, especially when there are ten different yellows in the palette. Such a color mistake even a slight shade off will cause unsightly flicker on playback. The Dropper makes no mistakes. So, to develop good animation habits, start a model sheet. When you begin a scene, copy the appropriate color model and paste it into the cycle, setting it off to the side of the active art in the first frame (if needed, ungroup it). Acquire the color that you need with the Dropper Tool and then set about the business of filling. When filling, we’ve found that the most efficient method is to go through the entire cycle with one color, filling all objects of that color. Then go back to the beginning and sweep through again, doing the next color. This method saves you the tedium of constantly having to change the Paint Bucket’s color, and also minimizes the possibility of mistakes. If some places fill while others don’t, you’ll probably need to adjust the Paint Bucket Gap Size Modifier.

Gap problems
There are, however, times when you can’t find the gaps and the Paint Bucket just won’t work. In this case, keep looking because the gaps are there. But if it just doesn’t work, no matter how much you zoom in and click with the Paint Bucket, then you may need to zoom in and use the Arrow Tool to close the gap by adjusting a stroke. In a situation in which it’s not aesthetically pleasing to do that, use the Brush Tool (set to the same fill color and to paint fills only) to fill the gaps manually.

Perhaps this would be the case on a head and neck that you don’t want connected to the body (remember earlier about the advantages of animating the head separately). You would paint a stroke of fill connecting the inked lines and then fill. This is a great tool, it’s a huge time-saver, but a little mysterious at times.

Speed coloring
A good way to speed up the coloring process is to allocate one of the mouse buttons (if you have a programmable mouse) to perform the keyboard shortcut for step forward advancing (which is the > key). If you have a pressure-sensitive graphics tablet, then you can allocate a button on the pen to do the same. With a setup like this, you can leave the cursor in pretty much the same place and click-fill, click-advance; clickfill, click-advance . . . and so on.

Temporary backgrounds
Another problem that’s easily solved is the process of filling areas with white. If you’re like most people, you’ve accepted the default background color of white which makes it impossible to distinguish when filling white areas. In this case, it’s monstrously helpful to create a very light color that you don’t plan to use in the final art, something like a light grayish puke-pink. While coloring, temporarily change the background color in the Movie Properties dialog (Modify➪Movie) to this “color” for the background of the entire movie. This makes it much easier to see what you’re doing when using white as a fill color for objects such as eyeballs, teeth, and clouds. Then, when you’re done coloring, you can set the background
color back to white.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Flash Topics