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.
So now we're ready to start to fine-tune our contact position for the walk cycle. So let's open up our previous file 08 in Chapter 5 of the Exercise Files folder. Let's double-click on the stage, and because we have our little reference guide image here, if you feel like you're getting lost in all this. So let's have a look at where we are. I'm going to zoom out so we can see more of the space for the walk, our guidelines. We began to crudely create the different contact positions. So as you can see, they're not really lining up too well.
That's because we've just made very broad movements. So let's take just one of these and if you feel like it's getting too much like what is going on, let's start switching off say a few of these limbs and just pick one of them. Pick the upper right arm and I'm going to see if we can fix this. Little check to make sure that all of our nested symbols are correctly labeled. Oh! See? A mistake. It should be set to frame 1. Not the end of the world. You'll find this happens naturally. It doesn't matter how careful you are.
So you want all of your symbols to be set to frame 1 on this column and all of these frames to be set to frame 17, or the current frame number on this one. If you make any changes, then you must correct all the internal frame numbers. So I'm going to set this one to Play Once and this will be frame 17. That one escaped me. I thought we'd set all this up earlier. I've never had one of these go perfectly. Play Once, and then the end just to be consistent. The right arm there we will also make it Play Once.
The last frame is currently set to 33, so make that 33. So there we go. So let's go into this frame. I've mentioned earlier too if you double -click for example on this symbol, you will jump back to frame number one. I don't want to be on frame number one. I want to go in at the same frame that I'm on. Luckily, there is a third-party plug-in called frameEdit. We've covered this previously. It's available on a great web site called toonmonkey.com and I've mapped it onto the Forward Slash key on the keyboard.
It's to the right of the Comma and the Period at the bottom of the keyboard. So when you see me doing this and going into the right frame, that's what's happening. Now if you don't have that command, then you're going to have to just go into frame 1 and grind forward to the right frame. But this will really speed up your workflow. Let's add our keys in here. We're going to correct this frame, and basically correct these frames as we go one at a time. I'm going to pull that to here. And same thing with the wrist. So the pivot should be at the top of the point. Go into Free Transform and grab the wrist down.
So now it's roughly in the right place. Again it can be rough at this point. We're not making the final animation yet. But now you can see on this frame that we're a little bit closer. I'm going to just tweak the position of the hand a little bit. Now let's see what happens. You see it's popping into the right position right there. Of course, we'd like it to meet between back and forth. However, there are other keyframes that are going to have to happen first before we get there. I don't want to overstep the mark here. I'm going to just go in and correct these one by one.
So let's switch off this layer, and we will activate right leg. Again, we want to make sure on the right frame this is correctly set. We're on the frame 17 down here, frame 17 here. Let's tunnel in. Set a keyframe here. I'm also going to set a keyframe here, because we should end and start as with everything else in the same frame, because this is a cycle. Let's drag that leg over and the same process for the opposite.
You might find this easier if you set Preview mode to Anti-Alias, because that way when you're actually inside a symbol it'll fade out the others. It'll help you visually hold your position. Let's switch that off and the other limb we have to worry about. Never forget to set keys; otherwise you'd be changing your first keyframe ad that wouldn't be good. This wrist will be easier if we can motion tween it. So I'm going to call it arm left wrist. That should of course be the same all the way through.
So I'm just going to move it all the way back and delete the others. So it's in this correct position here. Let's go in and make sure it's pivoted properly. Then move it back. Then well, again repeat the same process, to be consistent. Drag and drop it up here. There we go. So now if we look at the entire body, we have a contact position that looks much like the first one.
So we go from a contact A to contact B with the left leg now in the back position, not the front. If we animate this, you will still see some glitchiness of course. Now it's more localized. The glitchiness is now happening in these two areas. So before we can really begin to tweak this much further, we have to begin to add the central pose, the passing position, and let's look at what that looks like in the reference image. So the question that would come up, we now have our contact positions.
We're pretty close to that final area. People would wonder which would be the next most important position to animate and I used to think the down position was nicer to work into, because it gives you a good squashing point to feel the weight it happening. But actually, it's kind of counterintuitive, the passing position. That's this guy here. That's the one that we should do next. You will see very quickly why, because it's the halfway point between the contacts and by making even slight changes on this keyframe, such as bending the spine, or making small alterations to the characters emotional state, or the flexibility of the body, you can have it really dramatic and wonderful possibilities with adding personality to the walk.
So we're going to save this project now. We'll move on, and start playing with the passing position and at this point, we're going to start seeing the walk really come together.
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.