How to Create a Cartoon character from a drawing to  Flash

The following step by step tutorial describes how to create a vector based cartoon character in flash from a hand drawn concept.

your cartoon character once created will be ready to be animated in flash or after effects for a web or broadcast animation project.

For this tutorial you will need

-  Pen and paper, wacom tablet , demo of Flash CS3,  scanner

• Step 1:

start with pen and paper to create your character.

• Step 2:

Scan artwork / hand drawn character.

• Step 3:

Open flash / create a new scene (eg:800X800) and import scanned image onto the timeline

file/import/import to stage

(if necessary convert your scanned file .tiff into a .jpeg)

• Step 4:

Lock the layer containing your drawing and mouse right click the layer to turn it into a guide.

Now create a new layer to start drawing !

• Step 5:

Look into your tool panel and choose how to draw your character, there are several ways to do this and obtain different line style , you can use your wacom tablet and draw free hand using the brush (click the brush tool to adjust settings)

In this example we are going to use the bezier tool (the one that looks like a fountain pen). if you click over the bottom right corner of this tool you will notice a drop down menu including 4 selectable options:

• open tool
  
• add anchor
  
• delete anchor
  
• convert anchor

• Step 6:

Go around the head with the pen tool, left click to insert anchors in corners or delete anchors using back arrow key.

Check out shortcuts shown next to the tools (in brackets) .

Now using the free tool, adjust the lines over artwork tracing .

• Step 7:

Repeat the same tracing principles for each items of your character,

Make sure that you create a new layer for each elements of the composition ( head, ears, eyes, mouth etc..)

if you hide the layer used as a guide you should see how is the compositon coming together.

• Step 8:

Once all your outlining is done , you can start the coloring of your character , closed up shape can be filled up using the bucket.

if you run into trouble filling up shape because there they aren’t fully closed use the gap size tool , this could help.

Step 9:

open the color tab and experiment with gradient to give volume to your shapes.

In the color tab Select type:linear

you can add as many key as needed in your color grading.

Control the angle/spread of the gradient using the toolbox gradient tool (3rd from top, see below)

• Step 10:

Draw the eyes (only the white no pupils at this stage) select your eye layer and click F8 / click ok to convert into symbol. the eyes will be nested within a symbol as it will contain the pupils, the eyelids and the various eye states (open closed etc..)

As before within the eye symbol, create a new layer for each item (eyelid, pupil etc)

• Step 11:

Draw the Eye brow , press F8 /click OK to convert into a symbol.

Draw the Mouth , press F8 /click OK to convert into a symbol.

( once the shape are color filled you can add / clear the black outline around the drawing if needed )

• Step 12:

Now bring the finishing touch using the wacom pen and tablet, add details , shade etc..

• Step 13:

Zoom out to see the whole picture and amend your drawing if necessary.

• Step 14:

Et voila ! from your original pencil drawing you now have a vector version in color and broken down to symbols.

Ready for the next step of flash animation.

the next tutorial will show how to move onto the next step, hopefully using Flash CS4 (some really cool animation tools are coming with the new version…)

I will show how to animate using

• IK and inverse kinematics
• nested symbols containing the various state (mouth phonemes , eye states, eye brow position etc..)
• and much more..

FlashArtist.