Hand-drawn (Traditional) Animation

Hand-drawn animation prior to computer software was also known as cel animation because the frames were drawn on

The flour sack exercise is a famous transparent celluloid such that images of different objects animation test. The goal of the

exercise is to breathe life into an could be overlaid (e.g., a character on top of the back-

inanimate object by generating ground). Cel animation is also referred to as traditional various expressive “portraits” of

animation. Prior to cel animation, every frame had to be that object. To learn more, see The

redrawn in its entirety, including the contents of the back- Illusion of Life: Disney Animation by

grounds (think ﬂipbook).

Ollie Johnston and Frank Thomas

(Disney Editions, 1981). Several cels would then be superimposed in a single frame, similar to how layers function in Flash. Each cel could then

be manipulated separately so that stationary objects (e.g., backgrounds, static characters, or character parts) did not have to be redrawn. The independent functioning of each cel and the ability to only move what’s necessary are both approaches similar to how you can use symbols in Flash. Finally, a camera would photograph each frame.

Characters originally animated via this method include Mickey Mouse, the Roadrunner, Bugs Bunny, Porky Pig, Betty Boop, Popeye, and many, many more. Although

The Animator’s Survival Kit by Richard Williams (Faber and Faber,

traditional animation has become less common as large 2001) is the undisputed bible

studios have favored 3D computer animation, many of the of character animation. If you’re

techniques and terminology from traditional animation interested in learning more about

have been applied to digital animation. In addition, a num- animation of any kind—especially

traditional animation—you should ber of the skills and terms developed for traditional anima-

own a copy of this book. tion remain relevant in Flash. For example, the concept of onion skinning in Flash (addressed later in this chapter)

Chapter 2 Character Animation

is derived from the original use of translucent “onionskin” paper over a light source in order to visualize adjacent images (frames) when the animator was drawing by hand.

Frame rate

A certain number of frames per second (fps) are necessary to successfully create the illusion of movement. Traditional animation generally employed a frame rate of 24 fps. At a

length of 90 minutes, that frame rate requires the genera- Generally, any rate between 12 and 24 fps will work; 15 or 18 fps will

tion of 129,600 frames of drawings, which is no small task. offer smoother motion than 12 fps The frame rate for most live-action ﬁlms has customarily

but not require nearly as many been 29.97 fps. At 24 fps, well-executed traditional anima-

drawings as 24 fps. Experiment tion can simulate motion as convincingly as live-action ﬁlm. with different frame rates and see what works for you.

The technique of creating a new drawing for every frame (at 24 fps) is known as drawing on ones. For certain scenes,

it is only necessary to create a new drawing for every other frame. This latter technique is known as drawing on twos. For reasons related to budget and expediency, some ani- mations are done entirely on twos (12 fps). Ren & Stimpy, for example, was drawn entirely on twos. While 24 fps is

Rotoscoping

considered the gold standard, great animation can still Rotoscoping is a technique in which animators trace

be created at 12 fps. However, at rates less than 12 fps, an movement (using video footage), frame by frame. animation will usually look pretty choppy.

Rotoscoping has been employed on many films, including Snow White and the Seven Dwarfs, Waking Life , and even the original Star Wars Trilogy for the

Tweening

light-saber sequences. A handful of cartoons on Even when cels were used in traditional animation, it was

Adult Swim were originally animated by rotoscoping necessary to create new drawings for nearly every frame (at old Hanna-Barbera series.

least for the objects that were moving). Generally, a master animator would draw key poses (known as keyframes) for important moments of action, and junior artists would complete the somewhat less important in between images (or tweens). When inbetweeners were tasked with trans- forming a drawing from point A to point C, it was their job to ﬁgure out where to place point B. In other words, the job of the inbetweener was to interpolate what should hap- pen to the image between the master animator’s drawings. Tweening then took on additional meaning with the advent of computers.

With the birth of digital animation, tweening has come to refer to interpolation performed by software. When a

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

computer tweens, it evaluates the distance between point

A and point C, and then divides that distance in half, thereby producing point B. In this regard, a computer’s notion of an inbetween is somewhat more literal than that of a human artist. A trained human artist will also consider concepts like anticipation and exaggeration while animat- ing an object (Figure 2.2).

Figure 2.2 The human

Human

Computer

interpolation on the left

Interpolation

applies a concept called “squash and stretch” to exaggerate the bouncing motion.

Flash CS5 includes three types of tweens: Motion, Shape, and Classic. Classic is the old (pre-CS4) version of the

The inverse kinematic (IK) armature Motion tween. Both Motion and Classic tweens interpo-

system also allows for tweening. IK late frames based on the properties of a symbol instance is discussed later in this chapter.

(such as the instance’s position on Stage). A Shape tween interpolates based on the points and curves of two vector shapes.

Tweens can be very useful, especially for moving objects around on Stage. However, tweens can sometimes appear mechanical and unnatural. There are circumstances in

In Chapter 3 you’ll learn how to add Shape Hints to make a Shape

which point B should not reside immediately in between tween do your bidding.

points A and C. For example, objects in real life have inertia, and they sometimes overshoot their destination

The Spring feature added to Flash before settling into position. If you get tween-happy, your

CS5 is an example of a slightly audience may notice it. To avoid overapplication of any “smarter” tween that moves more

such effect, ﬁrst precisely envision what you want your like a real object. To learn more

animation to look like, and then ﬁgure out how to realize about the Spring feature, see Chris’s

article at www.adobe.com/devnet/ the image in your head. This approach will prevent the

flash/articles/spring_tool.html . software’s tools from dictating your style.

Chapter 2 Character Animation

Whereas tweening interpolates between poses, there is another method that requires the adjustment of poses on every frame. This technique is known as stop motion.

Hand-drawn (Traditional) Animation