Flash has revolutionised the way animations are brought to the internet and has allowed high quality, low bandwidth vector animations of immense complexity to be designed. Flash lends itself well to cartoon style animation and with the ability to use sound has allowed us to be the creators of our own cartoon classics. However, to most new-comers Flash can look very daunting and they are left frustrated as to why they can't do all the cool stuff that Flash has been reknown for. Here I intend to give an overview on how to create a nice cartoon styling with the least amount of fuss and technobabble to be the basis for creating more complex animation with MovieClips and Tweens which I shan't explain here but will be the subject of further tutorials.
"I have my own style of drawing - but how do I duplicate that in Flash?"
If you a talent for drawing then you can always first hand-draw your character, perhaps in a variety of positions and scan them in using a scanner which can then be imported into Flash using the "Import to Stage" or "Import to Library" function as illustrated.
I'm using Import to Stage here as it places the image directly on the Main Stage in the timeline Import to Library will create the image as a Graphic symbol which can be found and left-mouse dragged onto the stage by pressing Ctrl+L (win) Cmd+L (mac).
The Stage is the white (by default) area directly below the Timeline as see in the above example.
If your scanned image is in .TIFF format or a format tha Flash doesn't automatically understand you will be prompted with this dialogue box
Click yes and it should import your image if you have any problem try saving your original scanned artwork as a jpg or gif file prior to importing.
Once you have imported your image to stage you can then resize to fit via the menu Modify>Transform>Scale then whilst hold down both Shift+Alt grab the top right handle of the transform box and scale to fit onto the Stage area as shown below.
Once you have scaled your image double mouse click on the name of your layer and rename it to something more appropriate and then click the dot directly under the padlock symbol to lock this layer so that it's protected against you accidentally altering it or drawing on the wrong layer.
If you find that your drawing skills with a pen or pencil aren't as good as you would like you can still use this tutorial on improving your Flash drawing skills so don't worry - stick with me and you'll soon learn the basics.
Create a new layer to begin drawing in Flash
Now that we have sucessfully imported your original artwork you can now begin the process of tracing it (this technique also works as well with photographs if you want to vectorise a more complete image).
First create a new layer directly above the original artwork layer by clicking on the Insert Layer icon on the left-hand side at the base of the Timeline denoted as a piece of paper with a plus symbol on it. This will be the base layer to start your drawing so name it head as I intend to start by drawing the head.
On the left hand side where your Tools palette is go to the Colors section and you will see firstly the Stroke Color and the Fill Colour - The Stroke Color is the colour of your pen or the outline colour clicking on the box next to it will bring up a colour palette select a nice bright colour either a bright red or bright green are usually the best as you want something that will contrast with the scanned image you've imported.
The next thing which will dramatically speed up your workflow in Flash is getting to know the shortcuts for the Selection Tool (V) and the Line Tool (N) which will become essential for your ease of drawing.
The Line Tool will allow you to create a new Line and the Selection Tool will allow you to manipulate that line to shape - so getting to know these two shortcut keys will make your workflow many times quickers. In the above example I have firstly clicked the Snap-to-Objects button denoted by the magnet symbol on the Tools palette (hightlight in blue in the illustration below)
This will allow lines to be snapped together ensuring that when you come to fill your object with a fill colour there are no gaps otherwise the Paintbucket Tool won't actually fill anything. You can take off Snap-to-Objects if you want to fine tune your line drawing but always make sure that when you create an area to be filled that all your lines are properly overlapping or snapped together.
So now down to the drawing technique. Press N to create a new Line and draw a straight line from the top of the characters ear to roughly the top of his head then press the V tool and hover the cursor over the middle of the line and you will notice the cursor will change and have a curved line next to it (as illustrated below) this means you can pick up and drag the line by pressing and holding the left mouse button. See how now the line become elastic and you can bend it to fit the curve of your character's head.
If you hover the cursor over one of the ends of the line the cursor will change to a cursor with a L-shaped right angle symbol which denotes that this is the end point or angle point of the line and by left-mouse clicking and dragging you can reposition this end-point which will come in handy.
Next press N again and this time move the cursor over to the end of the first line (top of the head in this example) and left-mouse click and drag a straight line to the top of the character's other ear. You will notice that this new line will automatically snap to the end of the previous line give you a continuous line.
once you have drawn this second line pressing V will allow you to bend the curve of this line to fit the curve of character's head as explained with the first line.
Building up a drawing in this way allows you to trace complex curves and build up a nice cartoon style which I endeavour to explain over this tutorial.
Continue using the N and V keys to completely trace the Character's head shape and ears creating an outline to be filled. Then on the Tools Palette change the Fill Color to one more closely resembling a skin tone in this case I've choosen a pale orange colour as it looks more cartoony than a pinker shade. Using the Paint Bucket tool click inside of your outline to fill it with your chosen skin tone - if you have problems and the paintbucket tool isn't allowing you to fill firstly check whether you have the head layer as your active layer by clicking on it's name on the Timeline and that it's not locked - then check also to see if all the lines have snapped together.
One thing you might notice with the filled shape is that some of the curves are too angled however that is an easy fix just press V and hover the cursor over the angular part of the curve until you see the cursor that denotes an end-point (the L-shaped one) then click and drag until it snaps together and the angle point will then dissappear to create it as a single curved line which can be dragged back into shape as seen below (I've copied an instance of the shape just to illustrate the point it isn't necessary for you to create a copy like the illustration).
Adding features to the face
Once you have completed the head shape lock the layer and create a new layer above it to create the character's eyes. the first thing you will notice is that now the head layer obscures the original scanned artwork layer and therefore hinders you tracing the other features, not to worry, as next to the lock symbol on the Timeline is the symbol of an empty rectangle this is your Layer Outline toggle and you can click the dot underneath this symbol on your headlayer to switch the layer to an outlined shape this will allow you to see the underlying artwork without totally making the layer invisible (which as a matter of fact is the one denoted by the Eye symbol). Now that the head shape layer is an outline you can see where the eyes are in relation to the head, in the case of my drawing I've just chosen very simple circles as eyes but don't let that stop you from experimenting with more complex shapes. So in this case it was simply a matter of pressing O for the oval tool and pressing the Alt+Shift as you drag a circle from the centre of the eye (Using Alt+Shift will restrict the oval to a circle shape whilst allowing it to grow outwards from the centre rather than from the edge) play about with just using Shift or just Alt or neither to see what I mean.
The eyebrows are just simple straight lines curved to shape using the N and V keys as mentioned before. The mouth is also just using the N and V technique. Each of these face elements should be created on seperate layers i.e. Head, Eyes, Eyebrows, Mouth all on seperate layers as when you come to animate them they should be independent of the other features else unexpected things could happen during 'tweening' - if however you are just creating artwork that isn't to be animated in Flash then creating the features on different layers is more down to good discipline than any other reason.
Okay so while this is okay as far as features are concerned they aren't anything special so lets use Flash's ability to change Lines into Filled shapes so that you can really create a more drawn style.
Click on the Eyebrow layer in the Timeline to select the eyebrows and go to the Menu and select Modify>Shape>Convert Lines to Fills which at first won't seem to have done very much, but we can Optimize these fills now to create a more drawn-style once again go to the Menu and select Modify>Shape>Optimize... or simply press Ctrl+Alt+Shift+C (Win) Cmd+Alt+Shift+C (Mac). This will bring up the Optimize Curve dialogue box
You'll have to play around with the setting on this one as it's never quite predictable what the results will be so play around and settle on something you like, if you don't like what it has done to the fills then simply Ctrl+Z (undo) back to the way it was before you Optimized and try another setting.
After you have clicked 'OK' on the Optimize Curves dialogue box it will inform you of what took place and how much the shape has been optimized so that's at least one clue as to what Optimize Curves does.
In the above example I've optimised the fills and using the Selection Tool (V) started to reshape the eyebrows by hand with the Snap to Objects button still selected then reshaping will be largely automatic with angled points snapping to other angled points if you find this is too inflexible turn off Snap to Objects (The Magnet symbol on the Tools palette).
The above technique of Converting Lines to Fills / Optimize Curves was also applied to the mouth to create a better look. Play around with these and you will soon learn a better way of giving a more cartoony look to your own drawings.
Adding Shade & Highlight
While the character is coming together the image is missing some depth and this can be achieved using shadows and highlights to give a more 3 dimensional effect to your drawing. There are several ways of doing this but by using new layers filled with semi transparent colour you can create shadow and highlights without destroying the original layer and of course if you don't like the result you can always delete the layer and have another go.
Here I've highlighted the keyframe of the head layer right-mouse clicked and selected "Copy frames" then created a new layer above the head layer and select the empty key-frame on this layer and right-mouse click to select "Paste frames" this pasted in a duplicate copy of the head above the head layer.
All the other layers should now be locked so you don't accidentally damage anything but the active head-copy layer, also turn on the outline mode for all the other layers so you can see what your doing. Press V to activate the Selection Tool and double click on the outlines and delete them as we only need the fill layer with this technique.
Press L to activate the Lasso tool and select everything but the area you wish to be in shadow and press delete (as above) - this will leave you a shape that when selected should be filled with Black and it's Alpha reduced to around 25% depending on your own personal taste.
Lock this layer and create a new layer and once again paste in another copy of the Head layer repeat the above steps for the highlighted area this time filling with White rather than Black and reducing the Alpha as desired and the end result should be as seen below.
Admittedly I could have gone to greater detail in explaining this technique but I feel that once you're familiar with the basic premise then you should quickly pick up the finer details and perfect your own style. If you've followed my tutorial and achieved your objectives then well done, this is but the first part the more trickier animation is next to come in a later tutorial, in the meantime have fun with it - because if it ain't fun you will soon get bored.
I hope you've enjoyed this tutorial have a look at the others I have done.
Return to Tutorial Page