«
»

Flash Animation

Drawing for animation: five useful tips

08.29.07 | 4,769 Comments

 Merged sketch of a cartoon

There are obviously a lot more to drawing cartoons than what I wrote in my last tutorial, 9 tips for drawing in flash, but it was a good place to start. Today I thought we might go deeper in and even approach animation a little.

Before we even consider starting to animate I would like to give you a few tips. Most of the animation made in Flash is incredibly bad, and this is not only due to lazy animators. The knowledge of how to draw characters specifically designed for animation is no longer widespread amongst animators and this often results in characters that look flat or move very strangely. So this is a small guide to get you started on drawing characters that can be animated.

1. Use layers (really, this time)
Animated full-length movies would never have been possible were it not for cell based animation. To fool the brain in to thinking what it’s seeing is live motion we need to show it at least twenty four frames every second. That means actually drawing 1440 pictures, possibly in color, for every minute of animation.

The idea is, there are only a limited number of expressions, motions and angles to a character, so why redraw them every time? So what the animators did was to keep the background on a separate piece of paper (sense it did not change a whole lot) and paint all the characters and objects on transparent plastic sheets and put them in front of it. Rings a bell?

A character distributed to layers in a folder

A normal characters mouth may have a few different ‘cells’ like sad, angry, happy, horny or what ever. Once you have drawn them, there is no need to draw them again, just because the body of the character looks different or the eyes look in another direction. Keep parts of the face and body on different layers.

Note:
It might be a good idea to keep every character and object in its own Movie Clip with the layers inside it. On the other hand, it might not. If you are animating for television / rendered formats and plan on exporting to QuickTime then you can’t use nested clips (movie clips) because anything off the main timeline won’t play. In this case I recommend using folders for your layers instead.

2. Keep it simple
Drawing a complicated character one time is relatively easy. Drawing it a hundred or five hundred times is not. Simplify your characters as much as you can and make sure it has distinguishable building blocks.

Simple rough of a character

This is even more crucial if you are designing a character that more than one person will be working on. If there are simple steps to drawing the character it will not only save time but ensure consistency. But on the other hand, don’t oversimplify. Your character is only appealing if it’s interesting, so allow yourself to keep complicated elements if they are important to the make up of the character.

3. Use eye lines
It’s easy to draw characters from the side of the front, all you have to think about is keeping things aligned and not mess up proportions. But as soon as we start animating we have to consider the tilt of the head and the turn of the body.

Now, remember: the easiest way to make up a character is by drawing it in circles and adding on the outlines. If you want to you can use a stick figure as a “skeleton” to draw on. Here is the head from the character above.

head seen from front and slightly above

Notice the dashed line in the center of the characters head? This is the eye line, and it’s just below where the characters eyes will be drawn on. This is the head seen slightly from above.

4. Use tilt lines
This is really the same thing as above. We need a second line, going from the top of the head to the bottom thru the nose of the character to be able to see which way the head is turned. Using both lines we can describe any possible angle and always know where to draw on the face, ears and other details.

Head seen from the side and above

The thing we have now is not technically a wire frame, because it precedes it with about eighty years, but it’s pretty close to the thing used in 3d-programs to keep track of shape and position.

We can use these lines when we draw sketches (called Roughs’) of key frames (we’ll come to that in a later article) to keep track of the angel of the character thru a motion. It’s often good enough to draw just the head with a tilt- and eye line and a stick figure when you sketch.

5. Set the Line of Action
A characters stance and action should be described by a single line For example, a man waving his arms back and forth might have a line thru his boots up to his fingers. This helps us keep track of the direction of the animation when we draw up the key frames. Following a straight line of action makes cartoons motions look cleaner and make them easier to draw. The line of action is a major principle of animation and I will return to it when we get to the articles about animating.

Line of action thru a character

The important thing about all of these tips is that they enable you to see your character as a 3-d object, witch have size and depth. It’s important to be able to imagine your character this way because it means you can draw your character from any angle doing many different things.

A sketch and a colored example of a character for animation

And as always, I appreciate your comments!

4,769 Comments