Hello again! So far, we have covered basic shape tweens, creating movie clips and basic motion tweens all animated on the timeline. In these next few parts I will be showing you how to draw a basic flash vector face, apply some animation and allow the user control the animation using buttons.
This will be a cool little set of tutorials and will also give you an introduction to some basic actionscript, so this should be fun! In this part we will create the face, nothing too fancy but you will end up with something like this:
Well, enough talk more flash!
STEP 1
Firstly, when drawing figures in flash I find it is always a good idea to create the layers you know you will need at the start, this will help to keep you more organised help to streamline things! Rename layer 1 to ‘face’. Now think about the different parts of the face, what bits will need to be animated, and what overlaps what (if anything) to arrange the layers. For this project, create a new layer above ‘face’ and rename to ‘ears’. Add another new layer and rename to ‘nose’. Add another layer called ‘eyes’, another called ‘mouth’ and yes, you guessed it, another called ‘hair’. Lock all of the layers except ‘face’. by clicking the dots on each layer under the padlock symbol. Your layer structure should now look similar to this:
STEP 2
Next, select the circle/oval tool, set the border colour to black and fill colour to a ’skin’ colour, I used #E4B98E. (If you are unsure or indecisive on the skin colour you want, click here for a great hexadecimal skin colour chart). In the properties panel beneath your stage set the line width to 3 pixels, then draw a circle on your stage. Reshape this circle to create a head shape to your liking by hovering on the edge and click-drag to the desired position. You should end up with something like this:
STEP 3
Next, select the face shape and border and hit f8 to convert to symbol. Set this to moviclip, registration central, and give it a name of MC_face. Lock the face layer and unlock the hair layer, and we will now create a hairstyle for your character.
STEP 4
As with the face shape, select the shape tool and a fill colour for the hair to be. Draw a shape on the stage at the top of the face. Again hover on the border of the shape and alter it to your desired hairstyle shape.
<—–*TIP*—–>
If you press and hold alt as you drag an edge out, you get a sharp edge instead of a curve.
<—–*END TIP*—–>
STEP 5
Once you are finished, select the hair and the border then hit f8 to convert to symbol. Ensure this is still set to movie clip and call it MC_hair. You should now have something like this:
STEP 6
Now lock the hair layer unlock the eyes layer. Select the oval tool, set the fill colour to white and border to black, with a with of 1 pixel. Alter the shape of the eye using the same methods as above until you have your desired shape. Select all of the eye layer and press f8 to convert to symbol, and name it MC_eye.
STEP 7
Double click on MC_eye to enter its timeline. Rename layer one to ‘whites’ and lock it. Create a new layer called ‘pupil’. Select the oval tool, set the border to none and the fill to black. Draw an oval on the stage for your pupil. Select all on this layer and press f8 to convert to symbol, select ‘Graphic’ and name it GPH_pupil:
By the timeline, select ’scene 1′ to return to the main timeline.
STEP 8
In the library panel, select MC_eyes and drag onto the stage. Position in place for your second eye. You should now have something that looks similar to this:
STEP 9
Next, lock the ‘eyes’ layer and unlock the ‘nose’ layer. Drag the nose layer above the eyes layer. Select the line tool, set border color to black and set width to 3 pixels. Draw a vertical line on the stage just below the eyes. Alter this shape to your desired nose outline, then lock the layer. You should now have something like this:
STEP 10
Unlock the ‘ears’ layer, and select the line tool. Set the border colour to black, with a width of 3px. Draw a vertical line on the stage on the right of the head. Bend this line to create an ear shape, and add detail using additional, thinner lines until you have something similar to this:
STEP 11
Unlock the ‘mouth’ layer, and select the rectangle tool. Set the border to none and the fill to black, then draw a square on the stage below the nose (preferably). Drag the top left corner of this square down to create more of a triangle shape. Select the transform tool and rotate the mouth to the desired amount, and alter the top and bottom to create some curves. Once finished, select all of the mouth and press f8 to convert to symbol. Ensure this is set to movie clip and name MC_mouth.
STEP 12
Double click on MC_mouth to enter its timeline. Rename layer 1 to ‘mouth’ and lock it. Create a new layer called ‘teeth’ and select the square tool. Set the fill to white, and border to none. Draw a rectangle on the stage at the top of the mouth, then shape to match you mouth using the same methods as throughout this tutorial. (I’m sure your adequate at working that part out by now!).
Select scene 1 to return to the main timeline, and look at your master piece!
Ok, so it looks a bit bland but don’t worry! Stay tuned for Part 2, where we’ll add some shading and detail, and maybe even a body!
Now you have the basics of drawing in flash, go and get creative! Have a play around, and remember as this was created in vector, you can resize as much as you like for ease of use in future projects!
Get creating!
Signing off,
The Dude
Not a member yet? Then how do you expect to play ‘The Dude’ demo when its out?? Sign up now!
Did this post help you? If so help us continue to grow and Digg this page or Share on Twitter!
If you haven't already, sign up to our RSS feed or register to recieve updates direct to your email!
Wow, those are creative! And rich! Thanks for the work of putting htem together for us - quite inspiring.