Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now we are going to animate the jump using the thumbnails from the previous section. Let's have a look. That's a nice simple little action. So let's double-click on this, go inside, and see that most of the work has been done through shape tweening. Okay, so let's move out again, and then you will notice also that the major action of physically moving from left to right is happening on the outer Timeline with a motion tween, and that helps us to nest a lot of the tweening action that happens here in place. It makes the tweening a lot simpler in Flash.
So I will show you how this is done in a little more detail. I am going to delete everything here, and reinvent the wheel. So let me get rid of all of these. I am going to remove the tweens. So we're basically back to square one, and let me show you how this is done. So I like to have the thumbnails inside the symbol of the Jump frame. So I am going to just click on this, go Copy Frames, hide it, and then go Edit. Now we can work entirely inside the carpet jump symbol. All you need for this really is a green rectangle. And we've copied the thumbnail, so let's make a new layer, and paste them in. And I think let's move the artwork to just off to one side where it won't get in our way.
I will move it down to a lower level. And if it's guided out, it won't export, so you can go to your outer layer, and it's hidden. Its a little work around that I use for hiding things away if I just want them for reference purposes, or to back up layers. Okay, so we're going to have basically 7 keyframes, and the guy is going to be in the same physical place, left to right, in the first three. So let's slap down F6; F6 on those points.
By 5, 6, and 7 he will be a little further over to this side. So let's make a keyframe here, and use Shift and the Arrow key, nudge it over maybe two or three clicks, and then hit F6 here and here. So we have two states, left and right, with 3 keyframes in each. And on Frame 4, that will be kind of between the two. So I will hit F6, and Shift+Arrow to the right maybe a couple of small moves, and then Shift and up to get the high point. And so now we have our beginnings of a very simple animation.
So now we can go in and push the secondary frames. So let's hit the Free Transform tool, or Q; on the second key, I am going to just drag down for the squash pose. Hold down the Alt key so that we symmetrically pull them to one side. Now, we have a nice transition. And the beauty of not having shape tweening activated right now is that you can see this transitions more cleanly between one and the other. I will make it a bit bolder, and this one will be the push off before it goes into the up pose.
So what I am going to do first is take the up pose -- because it's kind of the most important one, after the start and the end. And let's get that into whatever final position we want there; beautiful! Okay. Now, we need to go from the anticipation, and I am going to just push this down a little more so I can have a better idea of the final look of this. He is going from here to there, and he is going to work from anticipation, into the push, into this pose.
The problem is, when you work inside Flash, it's very hard to see where you're going from, and going to, and I like to have an idea about what my destination is. So what I am going to do is copy the up pose directly over the push off pose, so I can see where I am heading. Hold down the Alt+Option key, and drag onto this new layer. And now I am going to outline that, and padlock it. So now I know I am going from the squash, into the push off, and it's going here. So now I can begin on the Animation layer. And I feel snap on; we don't need snap. Make sure you have snap off.
Now, I can try to form my little dollar bill, or jumping green rectangle, magic carpet; whatever this guy is. We can pull him closer into that position. Now, you can see, he is heading in the right direction. So at this point he's heading into that one, the shoulder is heading into this one. It's moving fairly well. So now we can delete that little reference layer.
Looking at this now, actually, I can see I bent his back the wrong way here. In Frame 2, in my thumbnails, I had bent him that way, and that really works a lot better with this. So let's make sure that's consistent. And then we have the opposite thing happening on the way down here. This is Frame 5, where he is starting to approach the ground. So let's move into that, and we'll try to shape this. I can make another guide layer for this one too if I wanted it, but I think I can eyeball it. If you use the Bracket key, the Comma, and the Period near your spacebar, you can go back and forth a lot more easily.
That's feeling pretty good. Let me bring the shoulder down a bit. We don't want anything to stick, so you want a certain amount to movement between any two of these frames. And then Frame 6 will be the squash frame, alot like Frame 2. If you wanted to be quick and dirty about it, go to Frame 2, hold down Alt+Option and Drag. You can modify it too, of course, but it's a quicker way of getting you into the ballpark. Well, of course we have to reposition them, because this is in a different pose from over here.
So again, we can eyeball it, because he is squashing. That's not too bad. Okay, now we have our basic action posed out. Let's hide those thumbnails; we don't need them anymore. I am going to activate shape tweening. Be very careful you don't accidentally activate classic tween, or it will turn all of your frames into groups, and fake little symbols, and they won't shape tween. If that ever happens, or you do it by mistake, simply go to each symbol, and go Control+B to break it apart, and it goes back into being a shape again. And then you can change your tweening mode by right- clicking, remove the motion tweens, and go back to shape tweens.
It's very tedious, so please be careful; try it to avoid having to do it in the first place. This is a new behavior in CS4 and CS5. It didn't do that in earlier versions. So the next thing to do is, as you can see, some of the shape tweenings are misbehaving, so let's put some hints in. So Control+Shift+H, or Modify>Shape>Add Shape Hint. And as you can see, there are hints already there. That's because I deleted the original animation that we did for this course. So let's just remove all hints first and see what the new ones do. So that's fine.
As you can see, from 2 to 3 it's getting very strange. So I am going to apply some new hints. So Control+Shift+H. And I will remind you now before you do this, you really should back up your file. I don't think we will have any problems here, but shape hints will crash your computer from time to time -- or not your computer, but your Flash. Occasionally, you will create an animation the program really doesn't like. If that happens, Flash will simply choke, usually with no recovery. So you will have to restart the program and you will lose your work.
So I don't want that to happen to you. So as you can see here, I've put down 4 keyframes: A, B, C, D. And that works really nicely. Sometimes it won't work; if I had put A, B, C, D in that direction, it may not have worked. But for a simple shape like this, usually I will put down one, and if it makes the tweening better, then I know I am good, and I can move to the second one, and third, and the fourth, and so forth. Sometimes I get to the point where I'll just delete them all, and maybe start up here. I could go A, B, C, D. There is really no rhyme or reason; I can't give you one.
It's just something that you have to be a little patient with. But I have found very rarely can I not make something work, or at least get it close enough to be usable. So now I am just going to keep going, and apply the rest of these little things. It can be confusing, because you are applying the shape hints of one key over the shape hints of a previous one, but you will get used to it. I think the end results are well worth it. So as you can see from 5 to 6; same problem. So I could put down one key, one hint rather. And as you can see that's the effect of a single shape hint, and if I put down one more, you will see it will tighten it up a little bit more.
Sometimes one hint is enough, which is really nice when it happens. But in this case, this little guy, he needs all four. Now, whatever version of Flash you are using might be a little bit different, but they should work. I've used hints for years. And then into the final; great! That's it! Let's look at it again; super! So let's go to the outer Timeline, and big problem right now is he is kind of jumping in place, and we want him to jump across the screen.
So I am going to hit F6 here, F6 there, and I am going to hold down Shift, move the Arrow key four or five clicks that way, and I am going to activate classic tween, and now we have the horizontal jump. If you wanted to increase the vertical of the jump, hit F6 there, and push it up a couple, and you can then modify that. So this is also a good example of nesting your shape tweens inside a motion tween, which is one of the major processes that I use. One other thing to watch out for when you apply shape hints: be sure you are working on the right layer.
It's very easy to have this layer active, and you're applying hints, and you think you are applying them to this layer, and you're really applying them to a hidden layer. That can happen, and it's a waste of your time. So do always make sure that when you apply hints that you're working on the right layer that you're intending. And then you can create pretty nice little animations like this, with a lot of personality, with not that much work on your part. So I think we're ready to move on to some more interesting shape tween animation with the magic carpet.
Get unlimited access to all courses for just $25/month.Become a member
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.