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

Creating a D mouth

From: Flash Professional CS5: Character Animation

Video: Creating a D mouth

Okay, so we have finalized the mouth symbol so it's now ready to go. So, let's open the previous file. So it's File > Open and then in your Chapter 3 folder in your Exercise Files you will find the character_rigged_03. Let's open that. Some more little housekeeping. We've got the mouth and the tongue symbols that we made in the last lesson. Let's drag them into the head parts folder and let's double click on the head symbol so we could see this a bit tighter and try to frame in the on the mouth and double click on that.

Creating a D mouth

Okay, so we have finalized the mouth symbol so it's now ready to go. So, let's open the previous file. So it's File > Open and then in your Chapter 3 folder in your Exercise Files you will find the character_rigged_03. Let's open that. Some more little housekeeping. We've got the mouth and the tongue symbols that we made in the last lesson. Let's drag them into the head parts folder and let's double click on the head symbol so we could see this a bit tighter and try to frame in the on the mouth and double click on that.

It once again making sure that View > Preview Mode is set to Anti-Alias so you can see it contrasted against the outer head layer. So, the next thing we'll need to do is make some mouth shapes and before we do that I would like to show you the standard very simplified form of dialogue that was pioneered in the 1960's really, on the TV shows of the era, and they made six library mouth shapes. These were the only ones they made, in the columns A through F. Don't be confused by the letters. These do not mean the A corresponds to the letter A or B to the letter B. These are simply graphic representations for these mouth shapes and amazingly these six simple mouth shapes can create practically any dialogue your character mentions.

So, what we'll be doing is something a little more advanced. We are going to create these standard mouth shapes. As you can see, if you look carefully, it should be possible to tween or in-between any of these forms. So, what we are going to do, we've already got our A mouth, a closed mouth. We are going through the open mouth called the D mouth and that's going to be great for loud sounds. We are going to make it possible to tween, motion tween and shape tween, between the A mouth and the D mouth. This will give us not just the option of B and the C mouth but an infinity, an infinite number of states between the close and the widest open mouth.

In the future of course, we'll move on to the F or the oo shape down here. I have had friends call this the meow and if you were to follow ,that's exactly the shape the mouth would make if it was saying the word meow. With that in place, let's proceed and we are going to do the D mouth. Let's go back into our Flash. So let's go into this and start creating the layouts for the other mouth shapes. So, let's drop down F5 to make some blank places here. So, what I'll like to do is use F7 to create blank frames and I use these as labels and these are very important.

So, I'll insert a label name here that describes each shape. Obviously, these little black circles in the timeline are not much good at when you start filling timelines full of these things. So, what I'll like to do is go to the Label in the Properties panel and we'll call that 'a'. That will be our A mouth. And the next one will be 'b' and then the next one will be 'c' and so forth. So d, e, f and then back to a.

So that we move in a complete cycle. Let's just get rid of the crud, things we don't need. I am going to call these the mouth shapes layer and I'll like to make this one white because it's a little visual flag for me that there nothing on it. That's not going to be visible when we start playing with it. So, it's there with a note. So, right, let's keyframes F6 to keyframe the final frame. That's also going to be the A mouth. And now we are going to work on the D mouth. Let's keyframe this as well and begin playing with it. The first thing we do is hide all the layers we thing we don't need it and just only work with the ones we do.

So, I am going to work with lip upper and lip lower and I am going to work in outline because I need to be able to see where these shapes overlap. Let's move the timeline down. We need as much room as we can get up here. You want to minimize the amount of pushing and pulling on these points so let's just select the blue layer. I am using Shift+Numeric key to pull this down about as far as I think it will go and we want the same thing with the green. Pull it up a little bit. Bear in mind, these are happy smiley mouth so we with these mouth shapes we want them to stay happy.

Don't get angry in the middle of them. So, now it's a question of pulling the corners. You might find that you'd be better served if you have Cintiq or a Wacom tablet and you might want to draw your mouth shapes on to a reference layers perhaps. I find it's a pretty simple enough process to work directly in Flash. You can use the bracket keys, the comma key, and the period key to toggle back and forth from one to the other. I'll also like to activate shape tweening on this. Insert > Shape Tween.

As a way of testing and I constantly move back and forth. We don't want to use shape hints on this part of the process. I'll like to be able to move these things around and blend them into one another without relying on shape hints because you will be applying Hints everywhere. It will drive you crazy. So, it is important that the shapes are as simple as possible. Now, to achieve this you'll notice that these lines are very simple. There is 1, 2, 3, 4, 5, 6 points and that's it. You can test that by activating the Subselection tool and selecting the layer and there they are.

So, I keep a close eye on this to make sure that no rogue points creep in at any point of the process, as you are pushing and pulling these lines around. So, we are moving this corner here and if you try to move your own face and seek where the mouth of your goes. When you activate a smile, try to make sure that this looks natural. You don't want this thing looking too strange. So, I am going to put Snap on so that I can match these corners properly. Now, if you find that at any point in these processes that these lines start to jitter or wiggle and that means you've basically broken the process.

At that point, you have to hit Ctrl+Z or Undo and role yourself back to the last point at which your shape tweening wasn't going crazy. So, we are still stable here. This is still looking pretty good. So, once this shape is to your satisfaction, the points are locked, I would consider saving it. I think we are still pretty safe right now and then I'll still keep testing like this. There are things that you can do at any point that are safe enough. Pulling the lines will not jeopardize the tweening, unless they overlap one another. That should be pretty safe.

It's pulling the points, these guys. That's where you begin to stress the process, but as long as these lines are pulled I think we should be fine. So, if you feel that you need to round the mouth out a little bit and get a better shape by doing this. I would classify that as a lower risk part of this procedure. So that's our D mouth, the basic upper lip and the lower lip. That's the hard part believe it or not and then the next part is moving the symbols. The motion tweening aspect is pretty safe. There is not much that can go wrong with that.

So, we just pull these shapes like the mouth crease over. Let's activate motion tweening on. Classic tween of course. This is a good time too to look at in the context against the jaw and make sure that looks okay. It doesn't look strange, that it's more or less sitting prickly against the rest of the face. We can animate the jaw on the outer comp on the outer symbol, so don't worry if it goes too low here. So, the next tricky part really is getting the mouth inner layer to match with the upper lip and the lower lip. So let's try that.

So, the first part that we have to do, we have got no choice, go to the open mouth and make sure that the corner lines up and then let's switch Snap off and just pull the other points. Oops! We lost one there. This is the-- you'll hear me crumble about this a lot. You really want to take care that your lines don't disappear. I can also mess with the shape tweening. I like to be able to grab each point by itself individually and again Flash has disappeared it.

So I am going to hit Undo and go back a step. There it is. I don't like having that taken away from me so let's do this. Pull that to here, pull that to there, and like -- like a suspension bridge. Pull these back down. You see there, it is like a little rubber band that just pulled it and it's still there, okay. So the other thing I want to do now is activate shape tweening. So I can test this is how it works. Make sure the shapes are tuning properly; otherwise we could be wasting your time.

So, there we go, that's good and let's pull this down to here, to there and then just match. This area that I am working right now will just be the inside of the mouth and it will double up as the mask layer. That's the part that is going to conceal the teeth. Now, if we look at in full color mode, that's really nice. As I've shown you before, hit F5 as you want to slow this down. Now, we have our access to an extremely large potential library of mouth shapes.

I am going to undo to pull that back in to where they should be. So that's our D mouth. The other things that we can do, of course the mask we set earlier will be a duplicate of this layer. So, Alt+Option and drag that to the mask layer and then the other thing that we would do is position the teeth and the tongue should correspond and travel. So let's have a look at the upper lip and the lower lip. Go back into our D mouth position. The upper teeth won't travel very much because I imagine they are locked to the skull. They really shouldn't move it all, but I find that helps for some reason if they move a little.

It's an exaggeration of artistic license. Let's activate the motion tweening here. Classic tween again. Let's have a look at that and there are things that we can do that aren't strictly anatomic, where we can us the Free Transform tool to squash and stretch the teeth maybe or rotate them slightly. We can play with this at anytime. We are not imprisoned to using them in any given shape but it's nice to have a basic range of motion on them at the moment. So, there we go. We can also extend these symbols if you want to add gum lines into the other elements to mouth later on, very doable.

Now the tongue. The tongue should obviously be tracking with the rest of the teeth and maybe rotate it a little bit. I wouldn't go crazy with it. It just has to move enough at the moment. Classic tween there. Now, if we put padlock on and let's make sure everything is in full mode. Last thing is the lower lip. I mentioned earlier I would like to be able to do this as I shape tween, so let's see if it will do that. If it didn't, you could always make this a symbol and motion tween it, if you don't have the time to bother with it.

It's not doing anything drastic now. It looks fine. You can move it on until you think it's the right form. The beauty of shape tweening is we can change the line. Again, be careful and make sure that it doesn't go too crazy. It's not doing anything weird and becoming unstable. As I am looking at this, I notice that the corner of the upper teeth is catching the eye. It should probably be moving a bit more. So let's do that and you probably have to end up working in outline for much of this. So, I am going to move the upper teeth back just a little bit and do the same thing on the upper level.

You might want to move the upper teeth up a little bit, using the arrow keys. There you can see something actually is strictly unnatural but really helps the mouth feel a little more plastic. So, that's a pretty average open mouth position. We could go way further with that, but for what we are doing this is more than enough. So we have our closed mouth, our open mouth, and in the next class I'll show you how to make the oo mouth shape and the we'll proceed to create the B, the C and the E mouths and those are fairly easy to do once we have established stable A, D, F mouths.

Show transcript

This video is part of

Image for Flash Professional CS5: Character Animation
Flash Professional CS5: Character Animation

83 video lessons · 21265 viewers

Dermot O' Connor
Author

 
Expand all | Collapse all
  1. 3m 25s
    1. Welcome
      1m 9s
    2. Using the exercise files
      39s
    3. Prerequisites
      1m 37s
  2. 34m 58s
    1. Creating Flash-friendly character design
      4m 57s
    2. Animation rendering: SWF or AVI
      2m 24s
    3. Understanding line tool drawbacks when animating
      7m 7s
    4. Using uniform project scales in Flash
      3m 40s
    5. Finding helpful extensions for Flash
      2m 46s
    6. Using commands and keyboard shortcuts
      9m 53s
    7. Setting up your workspaces
      4m 11s
  3. 1h 35m
    1. Understanding character rigging
      2m 0s
    2. Exploring underlying structure in character rigging
      4m 27s
    3. Vectorizing the character body
      6m 22s
    4. Outlining colors in an animated character
      6m 15s
    5. Vectorizing the hands
      6m 43s
    6. Vectorizing the head
      4m 47s
    7. Outlining the head
      8m 20s
    8. Adding finishing touches with hair
      2m 11s
    9. Colorizing the character head
      7m 28s
    10. Colorizing the body
      5m 33s
    11. Applying gradients
      6m 18s
    12. Symbolizing and pivoting the body parts
      10m 47s
    13. Pivoting the head
      4m 42s
    14. Rigging the mouth
      10m 49s
    15. Rigging the eye
      8m 33s
  4. 52m 22s
    1. Tween types: Shape vs. motion
      5m 41s
    2. Combining motion and shape tweening
      4m 31s
    3. Animating an eye blink using shape tweening
      10m 2s
    4. Rigging a mouth in Flash for dialogue and expressions
      5m 30s
    5. Creating a D mouth
      12m 29s
    6. Creating an F mouth
      6m 58s
    7. Getting the polished look
      7m 11s
  5. 1h 2m
    1. Overview of the head turn
      2m 13s
    2. Preparing the rig
      8m 15s
    3. Posing the rig
      7m 17s
    4. Animating the head movement
      11m 5s
    5. Animating the body movement
      12m 9s
    6. Animating the head turn
      11m 28s
    7. Adding finesse to the head turn
      9m 34s
  6. 2h 44m
    1. Introducing the walk
      1m 5s
    2. Creating a profile view
      8m 30s
    3. Creating the head in profile
      10m 10s
    4. Creating the hand
      6m 57s
    5. Creating hand symbols
      8m 32s
    6. Reviewing the walk
      3m 6s
    7. Prepping the walk
      8m 33s
    8. Setting up the contact poses
      6m 45s
    9. Creating secondary contact poses
      9m 38s
    10. Finishing up the contact poses
      6m 48s
    11. Creating the passing poses
      9m 39s
    12. Finishing the passing pose
      5m 56s
    13. Animating the recoil position
      10m 9s
    14. Animating the high point of the walk
      9m 24s
    15. Adding in-betweens
      8m 31s
    16. Rigging the shoes
      8m 27s
    17. Animating the shoes
      11m 58s
    18. Animating the character's head movements
      8m 29s
    19. Fine-tuning the animation
      9m 0s
    20. Nesting the hand symbols
      8m 39s
    21. Repositioning the walk
      4m 11s
  7. 1h 32m
    1. Introducing the walk in place
      1m 30s
    2. Setting up contact poses
      10m 4s
    3. Creating the passing poses
      7m 14s
    4. Creating the recoil positions
      8m 11s
    5. Animating the head's high point
      4m 9s
    6. Tweening the legs
      5m 11s
    7. Tweening the arms
      10m 27s
    8. Setting the placement of the foot
      9m 9s
    9. Animating the shoes
      7m 52s
    10. Animating the hair
      6m 9s
    11. Creating secondary hand actions
      8m 48s
    12. Animating the torso
      6m 27s
    13. Repositioning the walk
      7m 17s
  8. 54m 9s
    1. Understanding dialogue
      49s
    2. Using the A-F system of six set mouth shapes
      4m 23s
    3. Animating dialogue using the mouth rig
      14m 30s
    4. Integrating the dialogue with the head turn
      5m 35s
    5. Animating the jaw
      6m 59s
    6. Creating an angry dialogue mouth
      7m 43s
    7. Finishing the angry dialogue mouth
      6m 38s
    8. Integrating acting techniques
      1m 51s
    9. Tips on facial expressions
      5m 41s
  9. 36s
    1. Goodbye
      36s

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.

Join now "Already a member? Log in

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 Flash Professional CS5: Character Animation.

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.