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 as we saw in the previous lesson, we have showed shape tweening and motion tweening, and we do have issues with each of those two systems. If I had to use just one, I would probably be pretty limited in what I could do. So luckily, we don't have to pick just one. We can have both work together hand-in-hand. So what I am going to do in this class is animate a flag, something that tends to drive people crazy because it can be pretty intensive. If you are doing it by hand, frame- by-frame, it can be quite tricky. There's a very quick way we can do this in Flash. So let's make a simple flag. We will pick the Rectangle tool.
Draw a flag shape, and let's just make this into a symbol, call it flag, and a flag should pivot from maybe this point. So just to repeat where we are, here's our scene, here's our symbol flag. Double-click on the flag symbol. Now we are inside the flag symbol. So this is the level that we are going to be animating our shape tween as part of the animation. So I am going to duplicate, make a clone. Actually, let's stop that for a second. Let's just go back. First of all, let's create our flag shape. Right now, this isn't much of a form to be animating with.
It's just four points. We do like to keep our forms simple. But there is not much we can do with four points and four lines. So let's make a little bit more geometry here that we can play with. So I am holding Alt down and just pull these points around. Make sure snap is off so we can make something a bit smoother. There's a pretty easy enough graphical flag shape, maybe put a few bends in here to make it look like it's actual fabric and cloth. That's it. So now we will make a second keyframe. Hit F6 and now I am going to activate shape tweening.
Well, nothing should happen because obviously, both keyframes were the same. This is where we use shape tweening. So let's go Modify > Shape > Add Shape Hint or Ctrl+Shift+H. First of all, let's tie down the corners. So I am going to make four of these. A, B. I like to try to go clockwise if I can. You don't have to, but it's nice to have a method. Sometimes it will work, sometimes it won't. And again scrub to the timeline. Make sure nothing crazy happens. Okay, now we are going to put in some more hints.
Just put one down near to the beginning, go to the final one and this time, don't put it there. Put that at the other end, and now you can begin to get an idea of some of the possibilities of this. The advantage of this system as I can drag this keyframe. I can make this wave motion as graceful or as fast as I like, depending on how short the timeline is. Let's go back to somewhere around 20, 20 frames and our project speed, we're on 24 frames per second. So that's just one. Let's do another one.
Ctrl+Shift+H. Sometimes I'll warn you that Ctrl+Shift+H shortcut doesn't seem to work, in which case just go back to Modify > Shape > Add Shape Hint. That's an old bug that's been around for a long time. Do the same thing on this end. Move the F hint and now we have a pretty nice range of movement. This will cycle because the first frame is the same as the start frame. So, let's go back to the main stage and let's just pull this timeline out. This time we'll make it 60 frames. Be sure that you click on your symbol and then on your Properties panel you are set to Looping.
You don't want that to the play once. This is going to be a looping animation. Now you can see the immediate problem when we begin to loop it. These points aren't moving. We could try to do that inside the shape tween. But there is a different way of doing it. Let's just pop some keyframes down. We want to have a more cyclical movement now. So let's make them classic tween again. And then using the Free Transform tool or Q, let's just start pulling this back-and-forth. Now we are using the motion tween attributes. It's not the most natural flag which you ever seen but I think you get the idea it has do with to some of the things we can already do in very short spaces of time.
So the other thing we could do if we want to really flesh this out, we'll need to add more keyframes in, maybe change the shape of the backend so that this begins to do some more fluttering, maybe add in some secondary keyframes. All those things are more than possible. But that is a pretty neat demonstration of nesting long form of animation shape tweening inside another, which is motion tween. That's the basic concept that we are going to be playing with a lot. Once you start enjoying the process of this, I think it'll save you a lot of time and effort and sweat.
So that said, I think we are ready to move on to apply these techniques and animate an eye blink.
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.