Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Drawing the head

From: Rigging a Face in Flash Professional

Video: Drawing the head

So we've set up all of our levels, we've colored the outlines, and we are ready--almost-- to start lining and creating the vector work. Before we do that one, little thing to take care of: let's double-click on the hd 1 turnaround symbol in the Library panel and you'll see that the Timeline just squishes in. And some people don't have a problem with that. They just are happy scrolling up and down. I just can't work like that. So luckily, there is a simple enough way to fix that. Let's rip off the Timeline--just drag on the Timeline text and drag it away--and let's drop it in there. And now notice that the Motion Editor got lost.

Drawing the head

So we've set up all of our levels, we've colored the outlines, and we are ready--almost-- to start lining and creating the vector work. Before we do that one, little thing to take care of: let's double-click on the hd 1 turnaround symbol in the Library panel and you'll see that the Timeline just squishes in. And some people don't have a problem with that. They just are happy scrolling up and down. I just can't work like that. So luckily, there is a simple enough way to fix that. Let's rip off the Timeline--just drag on the Timeline text and drag it away--and let's drop it in there. And now notice that the Motion Editor got lost.

I don't we think we really need the Motion Editor for this. We can get rid of that if you like, or we can drag it back into that Tab. So now we have a vertical Timeline, and we can close it just about to where we need. One of the virtues of having lowercase is that we can pull this in just a little bit more and still read everything, and a little more room here. I think we should probably get rid of the Library panel, at least as a vertical stack by itself, so let's very carefully strike this back to here. I am just going to drag the Library panel and the Motion Presets here.

Let them all share the one space, and now we can toggle between them here. And as you can see, we've made a nice vertical space for our line area. And the next thing to do will be to save this. So this is a new workspace, and let's call this one rigging_face_vertical. And if we have to go back to the other one with the horizontal timeline, we can do that too, just by simply going back to Workspace and clicking on that. But for now this will speed up the workflow. Okay.

So let's zoom in a little bit. And we will start lining, so there's a couple of ways of doing it. We could create lines. Let's pick the skull for example, so we will select the skull there. I can start drawing, and you can see it appear in here. That's kind of distracting. So let's pick on the Properties Tab. We could do that, and then use the V on the keyboard, the Selection tool, and the N on the keyboard, the Line tool, and pull between them to create these shapes.

But I find there is a quicker way of doing it, and that's just to select the Rectangle tool. That's the one we want. I am going to just get rid of the color in the center. And I think we can switch off Snap to Objects. It gives us a lot more subtlety with control. Now the big question when you are doing this, when you are trying to match the line work beneath is exactly where to place these lines, because obviously the skull will go behind the hair.

We are dealing with the lines, but they are really meant to represent objects that are three-dimensional. So let's give it a little bit more room. And I am going to hold down the Alt+Opt key to create a new point. And something has happened here. You see the Flash is trying to combine these two points together, so I will be very careful as we are doing this that we don't lose that point. Now it's gone, you see. So you find me doing a lot of Ctrl+Z to undo that kind of damage, because I like having that level of control.

I don't like it when Flash snap these lines together. Sometimes I will do that, and you see the point is still there. It's fine. So that's good, and if you have to, we can zoom in. Smooth some of these out, and we go in a bit more precise than that. And let's put it into Outline, and then you can see the beauty of having our layers precolored. With the push of a button, they can go from black to a more gentle color. And then we can move on to a new layer, let's say the jaw, and again, pick the Rectangle tool. And again, whatever color appears in there, we can just color to that at the moment. I'm hitting Snap to Objects so that we can exactly hit those points.

I like to not have little white gaps in the middle so we can overlap them slightly. Now we can switch off Snap to Objects. The big question that you face is, how many points do you put in to achieve these shapes? So my philosophy is, as few as it takes, as few as possible, because that gives you greater flexibility later on, when you want to really begin to play with different shapes for the jaw. And again, sometimes I do this to make sure that Flash hasn't taken the liberty of blending these two lines into one big one.

Okay, that looks good. So again, just do that little test, and we are excellent. So if you click on the A key for the Subselection tool, you'll see that we have 1, 2, 3, 4, 5 points, which is probably the fewest possible points that we could have made that shape in. So now that we've got that done, click that, padlock, and let's proceed to the hair levels. I made different layers for the hair when it's on top of or beneath the skull for later on when we begin to do the turnarounds.

Well, I think for this one we will do the upper one, because this hair, from the front view, will be on top of the skull of course. So let's get that Rectangle tool again. And once more, let's make it an empty box, easier to handle. And I think we need one more point here, so let's hold down Alt+Opt+Drag. It's going a little closer here. Put Snap to Objects back on so we can precisely line that, and then back off again, and now we can switch out to Outline.

And the beauty of switching to Outline is it doesn't confuse you. You can see what levels are done and what remains to be done. We will do the other hair now, and again, remove that, snap on, and snap off, and now we can put that to outline in the padlock. And I think we have the eyebrows next. So the eye right brow. Again go over to that inner color. Alt+Opt to create a new point, pull this in to match. And with this kind of structure you will be able to later on create different expressions.

That's the basic geometry of the future animated scenes will be built upon. So let's go into Outline mode so we can see a little finer. Okay, so again, I am trying to pull this match the original without losing the point control. Now I know some of you like to use the more Illustrator-like spline controls, and I've never been able to really adapt to these very well. I also find that they can be a little tricky to use in Flash. If you are happy with using those controls and if they work for you, then go ahead, but like I said, it's just been my experience that they tend to be a little harder to keep disciplined.

So now we have the right brow down. The left brow of course will be pretty much like that, so let's copy that and then we will paste it in place. Ctrl+Shift+V. I am going to use the arrow keys to move the copy over, and again, we are on the new layer. Another beauty of using the Outline mode is that you can quickly see when you have done something on a new layer. Let's modify that, slip it horizontally, and just pull it into place. I said earlier that I don't flip horizontally. This applies to symbols.

It doesn't apply to artwork on the stage. If you're flipping a symbol horizontally, that's the issue that I find creates problems. And then I think the last component for the moment will be the hair at the top, on this layer, and again, just to leave the color inside. And again, it's a question of using as few points as possible to create the shape. Bear in mind also, this is going to animate. At some point you are going to want this hair to move and to be able to do little reversals.

So you do want it maybe consider that when you're assigning these points. And I think in this case we have enough to make the hair curve any number of ways. You can add more later, but I think this is pretty good. And let's go into Outline so that we can see they are really sharp line. See that little bump there? So let's make that as little as possible. And then just grab these different sectors and cull them to make sure that they have been combined into one big wobbly line, and that's really good.

Okay, and then the neck. And once more, bleed that color. I think we can probably draw the neck all the way through. We won't be seeing much of the neck that's behind the upper body, or behind the jaw rather. It's nice if we can make it align with this point of origin here where the hair converges with the jaw and the skull. And I think we need to hold down the Alt+Opt key to make one more. And now we have all the line work down for the basic first pass of the head.

Of course we haven't done the nose or the ears or the mouth yet, but this will be the first stage in completing the head. So let's start putting some color on this, because people might be getting a little confused by all the lines and figuring out what's on top of what, and this is starting to look a little confusing. So if we click on the Swatches tab and go to the middle red and drop down to the eighth row above the bottom, and that will be our basic skin color. So now we will just start applying it. And be sure that everything is padlocked off so that you can freely color it.

So I am just going to apply it to the neck, the jaw, and the skull. And let's pick that really, really dark black for the eyebrows, and they might be in Outline mode. I thought so. So again, be sure that everything is in solid mode, not in outline. And for the hair color, let's pick the gray right beneath that middle blue. Using these three colors is a really nice way to memorize which exact hue or shade that you are using, because it will be very easy to get lost inside this long line. So this is the one we are using for the hair.

That's pretty good. Now I want to get rid of the lines. We don't need them, so I am going to zoom out, hit the Erase tool--and be sure that you have Erase Line selected--and then just erase everything. Be sure you don't miss anything. You want to make sure that everything is gone. And now we can zoom back in, and you will notice that he started looking a little more cartoon-like. The only problem is that the neck area is exactly the same color as the jaw, and they are blending into one another, and we don't want that. So probably the quickest way to do that is to make this a different color. We could do something simple like make it a much darker skin tone.

That would work. That might get us into some trouble though as we begin to rotate the character. Remember that we are going to be looking at this guy from three quarters in this profile view, and that's probably going to look weird. So instead of doing that, we are going to apply a gradient. So let's click on the neck area, and we will select the swatch. Let's go hit the Color tab and we will select here our Radial gradient. And on the left, click on the left color, and we will type in in the RGB values, the following numbers: 234, 178, and 148. And in the right side, the following numbers: 223, 160, and 125.

Now let's click off there, so we can see, we've already begun to do a nice job of defining the boundary between the jaw and the neck. And actually, if we switch off the jaw, it gives us a better idea of what we are dealing with. So let's--under the Free Transform tool, you should find the Gradient Transform tool, or hit F on the keyboard, and then click on that area. And here you can manipulate the device, so you can move it up if you want a different degree of gradient. For example, if you move within very tight, you see it's not going to be of much use.

We can pull it out to about here I think it might be good. Let's try that. Great! And that still works. So the next step I want to do is to create the ears and the nose. Let's do the nose, because the nose is also a gradient. I am going to hide all the other layers, because I want to see this really closely. So we're going to go on the top layer now. And under the Rectangle tool, instead select the Auto tool, and just draw something pretty neat.

Let's click on that line and delete that. And here, too, let's go reselect everything so we see what this looks like. It looks okay, but I do want to do something a little nice with the gradient here too. So let's select the Gradient Transform tool. And using these widgets here, you can of course change the position a little bit. And this triangle changes the area of focus. And let's go to the swatches again and pick the Color tab and I am going to get some different numbers, so I want to brighten this a little bit.

So on the left side--actually, let's pull that about to this point, and that will be 234 as it is, then 182, and then 149. And on the right side, 247, 219, and 213. And that's feeling a little too bold, so let's--what I want to have happen is the area on top look a little brighter. And if you get lost, just pull it back in. This is quite subtle. Okay.

Now you might find that the area beneath here is like a little too similar to that below, so let's go back in, Color. And if we go to this setting here, H, then you might be able to pull the tone down a little bit. When that's done, I want to symbolize this now, so hit F8. And let's put the registration point, I think here might be fine. We'll call it nose. It's a graphic. Click OK. And of course, Flash puts the pivot down here, so let's fix that, with the Free Transform tool.

Okay. So let's do the ears. So again, the ears are a little tricky. Let's go in a little tighter and hide everything else. And this is the right ear, when I say ear right, I mean his physical right ear of course. So let's make a new rectangle for this, Rectangle tool. Let me get rid of that internal color, and we will do it in Outline. And you can switch snap off at this point. And let's switch back on. I want to make that little space for the Highlight layer. And I want the edge of the ear to be a little brighter than the interior, and then we have to do the line work for this internal shape. And now I am just using the Line tool and connecting them altogether.

Let's switch snap off again. Snap can be too aggressive sometimes, so occasionally, I'll just like to work without the artificial intelligence of it trying to click everything to one another. That's pretty good, thicken that a little bit. And I think we will use the basic skin color, but first let's go back into Outline off. And remember, the skin color was the middle red, eighth row. And for the Highlight on the outer edge of the ear, let's see.

I will use this one. And for the inner ear, I'll use this one. Okay. So another way of getting rid of all these nasty black lines is just double-click on them and hit Delete. Let's look at everything in place again. So I want to go in on the ear, and just make a symbol of that again. So once again, let's hide everything. Just make sure we have the entire ear selected, hit F8, and this time I'd like the pivot to go actually here.

So a little bit different on this one. I am going to just make the pivot right in the middle for the moment, call this symbol ear R, and click OK. And if you double-click, as you can see, the pivot is not where I want this to be; nobody is going to want to rotate the ear from this point of view. So we could, for example, move this to here. The only problem with that is that if this ever moves, you'll get into trouble. So let's undo that. I am going to go back in. Now we've double-clicked on the side of the ear. We are now inside the ear symbol itself. And what I want to do is to move this so that this becomes the internal point around which the ear pivots.

Go View > Snapping > Snap to Grid and pull that there. Now you have a perfect internal pivot that you will never lose. I go back out to the head and reselect Free Transform, and just be sure that you've got that exactly right. And you want to make sure that Snap to Objects is on, and there you will feel it click, right there. That couldn't be better! And then the last step is to move that to there. Now you want to do the other ear. So rather than redoing all of that, there is a quick way, a shortcut.

So we will click on copy that ear, paste it, and we will make this ear function as the left ear, by first positioning it where we want, and now we right-click and duplicate the symbol and make ear left. Now we'll double-click so that we are inside the ear, Modify > Transform > Flip Horizontal, and again, we want to make sure that that completely hits that spot, and it does.

Notice that that symbol has not been flipped horizontally; the internal artwork has been flipped horizontally, but symbol is perfect. It's not flipped, and that will save us many confusing problems later on. So as of now, we have the entire first pass of the head fully colored with the ear as a symbol, the nose as a symbol, and the left ear as a symbol. The remaining layers will be, if you draw a line around them, no blue box, so they are alive. They can be shaped-tweened, the elements with the blue outline we'll motion-tween, and we are ready to move on to the next section.

Show transcript

This video is part of

Image for Rigging a Face in Flash Professional
Rigging a Face in Flash Professional

44 video lessons · 5911 viewers

Dermot O' Connor
Author

 
Expand all | Collapse all
  1. 14m 16s
    1. Introduction
      42s
    2. What you should know
      2m 0s
    3. Setting up Flash
      8m 35s
    4. Dos and don'ts
      2m 59s
  2. 59m 26s
    1. Establishing the directions
      7m 9s
    2. Setting up layers for the head
      6m 58s
    3. Drawing the head
      19m 2s
    4. Creating the mouth
      11m 27s
    5. Drawing the eyes
      4m 31s
    6. Animating the eye blink
      10m 19s
  3. 48m 0s
    1. Creating happy mouth dialogue shapes, part one
      10m 24s
    2. Creating happy mouth dialogue shapes, part two
      7m 43s
    3. Creating mad or sad mouth dialogue shapes
      10m 7s
    4. Creating neutral mouth dialogue shapes
      7m 36s
    5. Building unique mouth shapes
      12m 10s
  4. 29m 27s
    1. Creating jubilant expressions
      11m 47s
    2. Creating furious expressions
      6m 4s
    3. Fine-tuning expressions
      11m 36s
  5. 1h 9m
    1. Clock rotation demonstration
      2m 23s
    2. Creating the twelve-o'clock pose
      9m 2s
    3. Creating the six-o'clock pose
      5m 19s
    4. Creating the three-o'clock pose
      10m 16s
    5. Creating the nine-o'clock pose
      9m 35s
    6. Creating the remaining poses
      13m 17s
    7. Fine-tuning the head rotation
      11m 54s
    8. Fixing layering issues
      7m 42s
  6. 2h 10m
    1. Introducing the turnaround
      2m 55s
    2. Creating the B head (3-quarter)
      6m 45s
    3. Creating the C head (profile)
      8m 51s
    4. Creating the D head (3-quarter rear)
      13m 2s
    5. Creating the E head (rear)
      8m 59s
    6. In-betweening symbols manually
      9m 58s
    7. Creating the H head
      6m 41s
    8. Creating the G head
      11m 33s
    9. Creating the F head
      19m 18s
    10. Creating the B mouth (3-quarter)
      13m 41s
    11. Creating the C mouth (profile)
      14m 33s
    12. Adding detail to the C mouth
      7m 42s
    13. Creating other mouths
      6m 28s
  7. 54m 24s
    1. Putting together a head rotation
      14m 29s
    2. Moving frames between symbols to make a rotation
      10m 23s
    3. Using the rig with audio
      14m 59s
    4. Adding expressions to the animation
      14m 33s
  8. 1m 0s
    1. Goodbye
      1m 0s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Rigging a Face in Flash Professional.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.