Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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 it's time to animate for the first time on our character by making the character blink. So, let's open the file. It's in your Chapter 3 - rigged character folder. So, let's open character_rig_ 01 and here is our character. Let's a little bit of housekeeping from the previous area where we modeled the eye. We left the eye symbol outside so let's just drag that into the head parts folder and get that clean. Anytime, you create a head symbol, put it there. Body parts go in here. So let's double-click on the head symbol and let's zoom in, get up nice and close to the eye.
There is our eye level. So let's double- click on that, get inside, and you can see it's the same color now as the head so let's fix that. We'll go Preview Mode > View > Anti- Alias and that shades out the head layer so I can see better area of where we are working. Go in tighter again. So, the link to start looking at now is a frame rate 24 frames per second is the one that my project defaulted to. I think we are better off working at 30 because most computers are playing at 30 these days and that 24 is a bit of throwback to the old days of film.
So let's set out to 30 and I am going to make the eye blink about 9 frames long. Let me select these and hit F5. So, it's going to go from the open position what you see here to a closed position and back to an open position. So in frame 9 let's hit F6 and make two more keyframes and let's hit F6 on frame 5 to make two more keyframes and these will be change. These will be our close position. So, let's just work with the eyelash layer. If you find you have a lot of layers just use the first one you are going to be working one, whichever is the most important.
So, in this case that's the eyelashes upper. Let's pull these down until we find a position that looks good. And let's see how that tweens. And that's beautiful. So that's our upper eyelash level. Now, we can smooth out this line as we like. If you think the curve needs to be changed or lowered. Always watch out with the corners. If you think that the tweening is starting to go little funky you might have to add some more shape hints in there. That can happen.
So I am going to push this to make sure that we can really be confident that the shapes are solid. It's still looking good and let's put that into outline. We'll go into the back into the closed position. Now, we are going to match the skin layer. That's going to go beneath the lashes. That will cover the white of the eye. Let's put snap on and snap to the corners and we can put Snap off for this and then pull this down. Now, we can look at the underlying layer in full mode.
This little white sliver that you see here we can't allow that. So let's cover that up. Now, let's start the shape tweening backend, Insert Shape Tween and that's it. Again, if you find that the shapes are going wonky and strange then go Modify > Shape > Add Shape Hints and you'll get your little A, B and C circles that you can apply to different parts. I will warn you since we are starting to get into animation with shape hints, always before you begin to apply shape hints save your project file.
It is a little bit unstable and I have had shape hinting crash the program on me. If you make a form that the programs doesn't like it can crash very, very quickly and you will not be able to save your project. I will repeat this pretty much every time we do shape hinting on this course. It's a small inconvenience and it's not a big price to pay, but just be very thorough before you embark on any adding of shape hints. Always save your project. So, now we've got our down positions done, time to do the lower eyelid and lower eyelash.
Of course, we don't want to be seeing these things on the lower position because they'll make the character look a little bit sleepy, so they'll pop in on this frame here. So, what we will do is we will pose them on the first frame but when they are complete, we will move that to the second frame and it will go to white on the first and the final frame. So, when we trigger the blink they'll pop in on the second frame. Actually, I am noticing a little thing here where the skin is appearing beneath the eyelid, so you might want to play with that. Let's see if we can...
So, what I am going to do is change the line that describes the skin layer. Let me move it up a little bit, so we prevent that overlap from happening. It's such a fast action, I doubt anybody would have noticed it, but still it's good form to keep your eye open with things like that. Let's zoom out again, all right. Let's do the little lower eyelash layer. So, I'll do the closed position first. Actually, let's see I'll do the open position first. That's really a matter of personal preference I think.
So, I am holding down the Alt+Option key to create our line for the lower level. Snap on to snap those two points; snap off again for the little sliver shape. Now, let's do the closed shape. Snap on for this. I am going to drag this up so that's beneath. If we go into outline mode for this that will help us position this outline a little better. Let's copy this line here and now let's activate shape tweening. That's nice! Now, you can see the lower eyelash layer is working great so let's go in and match the color.
So, I am going to grab the color with the eyedropper from the upper layer, apply that to the lower layer, and now I am going to finish with the lower eyelid. Let's just copy. I am just selecting these and Alt+Option+dragging to copy. So, the real change here, we'll copy the skin color, eyedropper to that, copy that on to the lower eyelid.
Now let's look at the closed position. I am going to drag this down again so that we simply mask out the white of the eye and that's tweening beautifully. There is nothing spinning around or going crazy. Again, if there were shape hints, they are your friend, but in this case we don't need them. The last step now will be to get rid of the lines. We will have to zoom out. Hit the Erase tool. Let me select Erase Lines and go to each keyframe and just be thorough and make sure you are painting out the entire area. Next key.
The nice thing about this is it really makes sure that you are getting rid of everything. And still check if you made any mistakes. It just might come in but we are still looking good. Of course, the last step will be to -- don't forget we want to be seeing the lower eyelid on the white open frame. So I am going to hit 7 there to put in some blanks and then we are good. As you can see it's popping off there nicely. So, now we need to duplicate these frames on to the left eye,which is you remember from the previous class was a copy of the right one simple reversed.
So, let's copy these frames and let's paste them in here and right-clicking to do all these operations and then play the test, very nice. So, on the outer head symbol, the final, let's give to this empty DoD layer. Now I am going to add a few more blank frames down here, clicking at 5 and making sure that your eye symbol is set in the Properties panel to either Loop or Play Once, as both should be set to Loop or Play Once.
Now, we can play the scene. Both eyes look good. They are not at strange angles. There is one last thing I am going to do and this is a super fine tune. You might have noticed that it's very hard to se the closed position. So, it's not a bad idea to hold out for an extra frame. The quick and dirty way to do it and actually the easiest way to do it is to select this column of frames and hold down Alt+Option and drag and then you duplicated it and then I'll add a F5 to add a few blank frames in here.
Now, it will be much easier to see that. And we are done. Oops! One last change. It has to be duplicated on to the other eye, same procedure. Hit the F5 to add that frame and there we go. Then one last little thing. Make sure that the eye are slightly closed aren't looking weird and that's looking good. So that's it. So, now it's time to move on and we will work on the mouth.
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.