Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of my favorite techniques in Flash is shape tweening, and I think a lot of people don't use it enough, because it has a little bit of a bad reputation; it can be a little bit of flaky sometimes. So let me show you a simple animation that I have created of the sphere changing into the square. And I will show you how I did it, and how I worked around some of the problems. So the trick with really coaxing Flash to be stable in shape tweening is to use shape hints. And in this case if I hit Modify>Shape>Add Shape Hint, or Control+Shift+H, you will see my existing hints.
It's added new one by doing that, which I didn't need, so I right-click on this C, and go Remove Hint. They're labeled A through Z, and you can apply them to a given point. And I've put the A's kind of at the top of the sphere, and at the two corners of the square, and that encourages the correct tweening. Now, if I remove them, you will see why I applied them. Right-click, Remove All Hints, and it's spinning. This point here, instead of tweening to this corner, is now spinning around clockwise, and we don't obviously want that. So again Control+Shift+H adds the first letter, and I apply them one at a time. I will do the A first, and then the B.
You can see it's locked in the corner. and I just keep applying them until I get what I want. You will find you'll get different results depending on where you put them, or what sequence you put them in. A quick note on this: you will find with shape hints, if you use them for long enough, at some point, Flash is going to crash. Because you will create a hint combination that it simply doesn't know what to do with. It freaks out, and it crashes. So before you start applying hints, anytime no matter how simple, even if it's only one shape hint, back up your file first. Then you can crash, and then reload.
The other thing; sometimes I hit the shortcut Control+Shift+H. The hint came up; sometimes it doesn't. I haven't had this problem too often, but when it does, just go back to the menu, and go Modify>Shape>Add Shape Hint, and that will reactivate the shortcut key. I haven't had that happened yet in CS5.5, the latest version, so maybe it's fixed. So that's that; that's the basic demonstratio. Not very exciting. So let me show you a more interesting application of the system, and this is animating the very same transition with giving it a little bit of life, and now you can see how neat that is.
You can do these effects only in shape tweening, very hard to do them in motion tweening, even with the new features like bones and things. This really is the most powerful, flexible way to mutate one form into another. Right now, we're using very primitive forms, but you can use different shapes and different layers. This could be a mouth, for example, talking. You could have teeth inside it massed out, and we will do some of that later on in the course. So important that you follow along with this I think. So let's just delete these.
I am going to recreate this from scratch so you can follow along. I am going to clear the keyframes, and now we have -- on Frame 1 just make a sphere, and on Frame 50 a square, and I am going to make a new layer. Now my layer says Layer 4; earlier it's a Layer 3 when I did this before. Don't worry; it's a default setting. If you've been playing around with Flash, it might remember your layer history differently. It doesn't matter, you can call it whatever you like. I am going to call it as Layer 2, and I am going to put some notes in here ,and hit F7 to make some empty keyframes. So what I like to do is use this as a note system for myself.
If you use traditional animation you will be used to using thumbnails, or making little notes about where you want your main actions to go. So I want this to be held as a sphere maybe for the first 10 frames, and I think I will squish him on Frame 20. And I sometimes put notes here. So, for example, I will use the Label panel, call it Squash, and on Frame 26 that will be the jump, and on Frame 28, that will be the high point. So I will just drop hp in there for high point.
On Frame 34, hit F7 again, and that will be when it begins to come down. On Frame 36, that will be the impact frame, so I will just drop a little impact on it in there. And this is just a temporary little note system to help you keep track of where all your frames are. It's very handy, when you have a complex scene, to be able to have a visible cue as to what goes where. I like this a lot. It's one of the benefits of a horizontal Timeline. So at 42 will be kind of like a little bounce up from the squash, and Frame 50 will be that.
So you don't have to do this if you don't want to, but I find it very useful. And now I am just going to hit F6 to duplicate the sphere onto a second key, and we'll start animating soon. So he turns into a square I think around Frame 28. So I am going to just grab this, hold down the Alt or Option key to copy and drag back to there, and I will just start working on it. So this is going to be the squash frame. Let's select the Free Transform tool, or hit Q on your keyboard, and let's just squash it. I am going to be pretty fast, quick, and dirty about this.
Sometimes it's good to be careful, and sometimes it's good to be a little lposer. So let's just have a bit of fun. If you feel like you're getting off-center, you might want to use the guides to guide you. It's Control+Shift+Alt+R will select the guides. So if you think you are getting off-center you might want to pop one of them down there. And then Control+Shift+Alt+R gets rid of that, because if you free up your screen, it helps to keep the center of mass right. Don't activate shape tweening yet. You want to be able to see the snaps from one key into the other.
So make sure that you are not making the volumes lose their mass. And this will be the high; he is going to be jumping high into the air on this one. So I am holding down Shift, and moving the Arrow keys. It helps to move him in bigger increments. On this frame, Frame 34, I would still have him high. So I am going to hit F6, and just move him down a little bit, and he is starting to drag. And we'll impact him on Frame 36. Let's put-in another ruler; Control+Shift+ Alt+R for the ground plane. So that's when he starts there.
Let me get rid of them again; Control+Shift+Alt+R, get rid of the ruler so now I can match the ground plane when he hits it. And squish him a little bit. As you can see, when I click and drag, I am just moving one area, if you hold down the Alt key, it will drag both together; it might save a little bit of time. So he bumps into the ground here, and then, we'll have him bounce up a little bit before he settles. So I am going to hold down the Alt or Option key. Drag Frame 50, and this is very subtle; holding the Alt key in.
So now, I've got to play it with just the keyframes, what we used to call a pose test; that's it. So I might want to push that impact a little bit. Now we can apply shape tweens and see what happens. At this point, there is a feature in Flash I want to warn you about. I have hit this before. It's a new helpful feature that isn't very helpful. If I was to right-click on this and say Create Classic Tween, it will convert everything into, like, a symbol or a group, and it causes problems.
So be very careful when you do this that you create shape tween, and not classic tween. And if you do create classic tween, and you see a little blue line around everything, you have to select each symbol and hit Control+B to break them back apart. You want, when you click on these frames, to see the little dots. If you see a blue line around them, it's not going to work. What you want to see is nice green color with that solid arrow. If you see dots in there, it means you've got a symbol, or a group, or something that's going to mess you up, and that's not going to be good.
But this is working nicely. You will see he is spinning there; right here. That's not good, we don't want that. That's a real problem. So we want to add shape hints to control that. So before you start adding shape hints, save the project. So that warning done, I am going to apply a shape hint. And I find when you find a spot on the forms, it tends to like them more than others. So I know this A and B worked before, so I am going to put them in the same place, and there we go.
Now the beauty of shape tweening, too, is if I think I want another frame, I don't have to handdraw anything; I can just let the engine take care of it. And I want to get rid of these guidelines now; I don't think we need them. So go View>Guides and click off Show Guides. Much better. So let's start using some of the nice features that we can only do in shape tweening. And you might find you hit a point where you go too far, and it starts to spin, or your shape goes flaky; Control+Z is your best friend when that happens.
You're better off going back to your original state, and back up your file. Now here he is coming down; kind of boring. Let's make him look more natural. And I am going to bend some of these a little bit. And on the squish, another good excuse here to have some fun. I love doing this; it's really nice. There used to be a classic test you would do in animation that involved taking a sack of flour, and trying to give it emotion. And this is like our version of a sack of flour. And if you are not into character animation, I strongly suggest you spend some time playing around with this sort of guy.
It's a fun way, and we'll be doing a little bit more with him, this simple square, to give you a feel for some of the potential. So let's play that. And there we go! It's a sphere squishing, and popping into a square. That will have some pretty cool applications later on. So on to the next!
Get unlimited access to all courses for just $25/month.Become a member
107 Video lessons · 34122 Viewers
94 Video lessons · 23818 Viewers
100 Video lessons · 4311 Viewers
83 Video lessons · 9325 Viewers
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.
Your file was successfully uploaded.