Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In Flash Professional CS5: Character Animation, Dermot O' Connor explains the process of character animation in Flash, using nested symbols and motion and shape tweening to create believable characters. The course covers the process from start to finish, from rigging a character to creating a walk cycle animation. Along the way, Dermot demonstrates techniques such as animating eye blinks, head turns, and mouth movements during dialogue. Exercise files accompany the course.
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.
There are currently no FAQs about Flash Professional CS5: Character Animation.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.