« Online
» Drawing for animation: five useful tips

Flash Animation

Nine tips for drawing in Flash

08.23.07 | 153 Comments

 Cat gone bad. This is what we are drawing 

Drawing has always been a well hidden non-talent of mine but every now and then comes a project that requires me to face my demons. Using a mouse to draw is a new experience and if you are not familiar with programs like Illustrator and don’t own a Wacom board Flash is a very easy place to start learning. I will use a popular cat gone bad to demonstrate some of the tricks I use to get around my lack of skill.

1. Make a sketch
Stick figures are not that attractive, but they do help you determine the set up of your drawing. They don’t have to look anything like the characters or objects you are about to draw but try to make your stick figures reflect the general stance of the characters they portray.

This little sketch gives us an idea about what size and placement to give each object. If nothing else sketching will provide you with a better idea of what to draw. Flash is remarkably flexible here, being vector based, so you don’t have to give up if you’ve drawn an object in the wrong size.

2. Use layers
You might change your mind and decide to remove an object from your drawing, or you might want to move it or rescale it without affecting other objects. The best way to prepare for this is to give each character and object its own layer.

When animating you sometimes place parts of a character on their own layers inside a movie clip to be able to animate hierarchically. Right now we are just drawing a still-image so we don’t need that type of flexibility.

3. Draw lots of circles
There is just no way to draw a character out of the blue and hope to get the proportions right on the first try. What you need to focus on is finding the circles that make up the shape of the (cartoon) character. Then you can use lines to connect the dots and make up the general shape of the character.

Shows how charaters are drawn with the help of circles

This is not exactly original advice, cartoonists around the world have been using this technique for almost a hundred years but that is because it works. Animating in Flash is very similar to how cell based animation used to work back before they replaced everything with 3d-animation. Both use layers to create motion and preserve parts of a scene as separate objects, and both combine the concept of static backgrounds and animated parts (be it cells or movie clips) Remember that, old books on animation are pure gold.

4. Mould shapes
Lines can be dragged, reshaped and deleted just by clicking on them. Make use of this by reshaping your circles-and-lines sketches to line drawings. Move the joins around; add a few extra lines and bend them in to shape. Remove anything you no longer need.

Shows how to mould a shape out of the drawn lines ansd circles

The Pen tool can be a great help here. You can use it to add and remove anchor points (joins between lines) and to adjust the Bezier curves (the bend on each line) in a more precise manner. If you are familiar with Illustrator then the Pen tool might make you feel more at home than the line and pen tools.

5. Use the Pencil tool
It’s time to draw on the details, like eyes and whiskers and a huge pink bonnet for some reason. Try using the Pencil tool to freehand small objects. Adjust the drawing mode – straight, smooth or ink - to get the style you are looking for (or to compensate for shaky hands like mine).

Shows details beeing added to the image

6. Draw Outlines
To help characters or objects pop out of the background, make their outer lines a little bit thicker than the others. This is even more important if your drawing is in black and white because the viewer won’t have the help of color to separate objects.

Figure with outlines beeing added

The easiest way to fix the outlines is just to select them and choose a higher line thickness when you feel you’re done drawing.

7. Mess with the lines
Having used lines to draw a character or object on the stage, we might want to make it look a bit more organic. The lines have an even thickness that makes them look very stale, so let’s convert them to fills.

This is something you might want to do as a last touch, after you have decided where all the lines should go, but before you scale the object. Scaling an object with the lines preserved will mess with image proportions (because even thou the size of the colorized fields change, the thickness of the lines separating them wont).

Shows a drawing with and witout modified lines

Having converted your lines to fills you can manipulate the thickness of outlines to accentuate different thing about the object you have drawn. For example, try making the lines a bit thinner where there is a point (watch the cats ears). Just having the lines be a bit uneven gives the character more life.

8. Paint inside
When you colorize a picture you might want to do more than to just fill in fields and shapes, most people get sick of those books around the age of five. Use the brush tool to Paint inside a field (select the field and use Paint selection if it’s really small) and you won’t have to worry about paint bleeding over in to other parts of your drawing.

While you are at it, add the last details. I’ll make the pattern on the cat’s dress skulls. Chicks dig skulls.

Shows a figure with shadows painted in with the brush

9. Use gradients
Shape in two dimensional pictures is pretty much a matter of color. Don’t believe me? Take a head, for example. The outline is close to I circle, but the actual shape? Is it a sphere of a cylinder? Thanks to the way human memory works this is not a mayor problem in this case, most people will simply assume that a head will be much closer in shape to a ball than a barrel. But in case you have an object which the viewer is not so familiar with color can be a great help in accentuating shape.

Shows 3d-effect achived by using gradients

Think of gradients as a way of showing where the light comes from. Darker parts are in shadow while lighter parts are directly in the light. Be consistent with how you place gradients in your picture so that the light source is always in the same place.

Finished drawing of the cat.

Well done! I hope this has made you feel a bit more at home in Flash. Feel free to coment if you have suggestions for improvments or have something else on your mind.

153 Comments

have your say

Add your comment below, or trackback from your own site. Subscribe to these comments.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> <pre lang="" line="" escaped="">

:

:


« Online
» Drawing for animation: five useful tips