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.
So now we are ready to pose the rig. We'll also have to rename some symbols and duplicate some objects to make sure that we are ready to go. So let's open our file, character_ head_turn_02, and the first thing you'll notice is a very quick rough and ready thumbnail, and this is going to show us the animation. This is what we are going to do in the course of this chapter. So it's four very simple poses. The character will begin looking screen left, doing anticipation, and key pose number two, overshoot to the high point, and number three, and then settle into a normal looking right pose in key number four.
So four keys, and that's it. Thumbnails should be like a stickman. They don't have to be fancy. They don't have to be well drawn. They just have to have the basic information to give you something that you can work with, that show you the tilt of the head, the general attitude of the body. You can of course make more detail in this. But if you don't have great drawing skills, don't be shy of doing a thumbnail. Here is our character. Let us make some alterations, because the big problem that we would face is that we have these precious symbols that we spent a lot of time building and we don't want to damage them.
These basically are our pristine objects that we don't want to disrupt anymore. So what we want to do before we animate is to work inside a duplicate or a copy of these. You could always just duplicate your Flash file, but I like to have as many assets in the single Flash file as I think the program can stand, because I can reuse things more easily. So let's double-click on the body. on the stage and go Duplicate Symbol. There is a good rule of thumb, if you are ever in doubt, duplicate. The worst that you can do if you do too many is clutter your library.
But if you actually go over an existing symbol that's been used somewhere, you can destroy hours of work, and I've done that. You don't want to go there. So anyway, duplicate the symbol. We are going to give it a name, something nice and descriptive, head turn. I am going to add that every other symbol inside this symbol, that's going to be working as a comp in animating. That's pretty simple to find out. His body is going to turn, his legs are going to be positioned, his arms are going to turn, his body, his head. So let's click on all of these and duplicate them and call each one head turn.
You can be lazy and call them copy. I don't recommend it. Your library will be very confusing. So I am just going to add head turn to the arms, the legs, the right leg here. I am actually going to duplicate that. That's a copy of the right leg, if you remember. So I am going to call that leg left head turn, so it's now a different symbol completely from this one. Most important of course is to duplicate the head, as well as the mouth, and the two eyes inside there.
You can get pretty fast at this. I think then I'll do the body, and if in doubt, you can always click on the symbol. Check it in the Properties panel, oops! Body needs to be duped. Okay. So now we have dupes of all the key elements, and then the other thing to make sure is that each of these is set to Play Once, because they won't be looping. This is like a single action. It's just that he looks from left to right. We don't want him doing it over and over again. So let's just bundle all of these. Make them Play Once, and same with the head, and same with the mouth and the eyes.
I think we can actually select more than one. Might save a bit of time. Okay. So even if you have made a mistake, don't worry. You can always change it later on. But it's nice to get it right first time. It makes a lot of the corrections in here not necessary. So the next thing to do will be to get the thumbnails. Bring the thumbnails back inside. I am going to copy them. Ctrl+C. Now that we have the head turn symbol, double-click in there, and then in this dummy layer, we'll just drop in our thumbnails and just keep them somewhere nearby where we can see them.
I'll drag that down to the bottom. I am going to lock it. Then what we do is try to estimate how long our scene is going to be. I think it's a pretty short action. We are on 30 frames a second. So, 30 frames is one second. So I am going to stretch it out to maybe 60. So it's a two second long scene. It's a very fast reaction. So let's hit F5, and stretch our Timeline out, and give this some room. I am going to think of the animation beginning on this key first keyframe, which will start to move around here.
I am going to hit F7 on the keyboard. Give our eye some time to see where we are before we begin to move. Usually when you click to a scene, it takes you a few frames for your brain to adjust to the new shot. So we'll start keyframe 1 here and we'll scrunch down to number 2, the down position there. That's where the head turn itself proper, where he goes from facing one direction to the other, will happen around here. Then up to the high point and now let's give him some room to settle, maybe push this out a bit more.
That's a very -- still a very fast action. About 30 frames a second, this represents about one-third of the second. So this might look like a lot of time, but it might be faster than you think. So let's just chop a few empty frames off here, and so this is where the animation is going to mostly occur. So I am going to put in a dummy classic tween in there. That's going to be like a visual guide that we are going to use to help us have the same time duration on all of our symbols. So I want to have the same number of frames on the body symbol as in the head, and the arm, and the torso, and the leg.
I want all the keyframes to happen at the same time in all of these symbols so that everything nests and works together in harmony. So let's copy all of them and we will go to Edit > Timeline > Copy Frames. Then we just drop that into all the other nested symbols. Let's go back to frame 1 and make a new layer on each of these symbols. Ctrl+Alt+V. And it's just a repetitive process of repeating this for all of your animating elements. Of course, don't forget the mouth and the eyes.
It's always good to double-check as well, headturn, headturn, headturn. This is the beauty of modifying the names. You can double-check to make sure that okay, I am working inside one of my dupes. I am not messing up my original perfect symbol. It's also a good idea to keep your file names reasonably short, so you can see as many of them as possible on the top. Okay, so the next step will be to pose the character. We have done everything else other than pose the character.
We're now ready to go. But at this point, you should have duplicated all of the animating elements. Everything that is going to have like an internal timeline of its own, and you should have renamed them all, hopefully, with the name of head turn or some other modifier. You should have this thumbnail as a little visual guide. Now with that done, we are finally able to pose the character and see at what point we are going to be able to make a move.
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.