Now, probably, the best thing about this technique is you can keep going as far as you need to. We've nested the arm and the head motions inside this vine movie clip and whatever we do to the vine movie clip on the Scene 1 timeline, that animation will be added to whatever is inside of it. Let's try going one level deeper.
Right now, we've got the head bouncing back and forth, but remember, the head itself is a movie clip. If we double-click inside the head, I'll just do it right here on Frame 1. I've got another timeline here. Whatever we do in this timeline where we passed into whatever the head does and further passed into whatever the vine does. So we can actually build this up into a very complex animation that would have been hard, if not impossible, if we tried to do this on a single timeline. Here's what I would like to do inside the head. Let's have the monkey change his expression as he is flying through the jungle. We've got access to all the graphics that make up the monkey's face. So I am just going to start with the mouth for an example, but we could do the eyes, the nose, the ears, pretty much whatever graphic we have got available to us.
Now once again, I'll probably need to take anything that I want to move and isolate it. But that's going to be easy because, of course, we've got our own layers in here as well. So let me rename Layer 1 as the head layer and let's work with the mouth first. So I am going to create a layer just to put the mouth on. We'll insert a layer right above head, I'll change that name to mouth. I'll hit Enter just to complete that name change and I'll just want to go back down to the head layer and see if we can pull that graphic off.
When I select the element, you can see that it's already setup as a group and at this point, we've a choice. We can maintain this group that we're using for the head and just go inside and extract the mouth out of it or I could probably just ungroup this since the group isn't really performing any special function for me right now. I'll go ahead do that because we can always use layer selection to access all the different pieces of the group. Now if you want to group an element, the keyboard shortcut is Ctrl+G or Command+G on the Mac and if you want to ungroup an element, keyboard shortcut for that is Ctrl+Shift+G on the PC and Command+Shift+G on the Mac.
Now we've just got some normal shapes. I'll click away from it just so I can go back in and select that mouth shape and since we are going to be animating it separately, I am going to put it on its own layer. We'll cut it out of the head layer, we'll go up to the mouth layer and Paste in Place. Remember, that's Ctrl+Shift+V or Command+Shift+V and we're going to want to animate this. So you might have noticed while we were cutting and pasting that we left a hole in the monkey's head of the shape of this mouth. Now we can see that by hiding the mouth layer for a moment, I'll zoom in here just a little bit and since I had nothing selected, it didn't center anything for me. So I am just going to hold the Spacebar down so we get the access to the Hand Tool and I can pane back down to where we've got the graphics of the monkey head.
Now this isn't going to be too hard to fix, but if I change the monkey's expression, I certainly don't want to have a mouth-shaped hole in his head. So what I am going to do here very quickly is use the Eye Dropper Tool that'll let me access the color of the rest of his face. When I click that and pick up the brown color, you can see that the program has already switched me out to the Paint Bucket Tool and I am ready to just drop it right in and fill that spot up. That way if we animate or move the mouth, we won't be seeing any gaps behind it and I'll just click the Show/Hide control and we'll bring the mouth back in.
For animating the mouth, what I would like to do is have the mouth completely change shape and that sounds to me like a Shape Tween where we are morphing from shape to another. Now normally, people would be thinking, oh! But we're using a Movie clip here. What I'd like to point out is, when you're working in a timeline, you want to make sure that your tween rules apply just to that timeline. It doesn't matter that we are working inside of a symbol. In order to create a Shape Tween, what matters is what is inside that symbol and in this case, what we have access to is a shape. So we can set a Shape Tween right in this timeline and what we'll end up with is a Shape Tween nested in a Motion Tween which is nested in another Motion Tween. Let's set that up. I am going to go back to my Selection Tool here and what I'll need is a few more keyframes for the mouth. Now I was just going to do a simple animation. So let's say we do it about 20 frames here.
The first thing I am going to do is just extend my timeline out to 20 frames so that everything is on the screen and I'll do that by clicking in both layers and dragging down and I'll use my F5 keyboard shortcut to add frames to the timeline and now my animation is 20 frames long.
Now for the mouth layer, I am just going to add a couple of different shapes for the mouth inside, but I want it to end up as the same shape it starts out so that it loops seamlessly. Since we don't have any other keyframes added at this point, the easiest way for me to copy that frame out to the end is actually just to add a keyframe. I'll click on Frame 20 for the mouth layer and just press F6 and now we've got a copy of that shape in both locations.
Now I want to add a little different shape in the middle. So I'll click in between these two frames at let's say, Frame 7 and instead of using F6 which will copy the mouth shape from the first one over, I am just going to use F7 since I want to draw a completely new shape. That gives me a blank keyframe. I don't have to do any deleting and I can just go right over to my tools and set up whatever we want the shape to be.
I'll use my Oval Tool here and since I want this to match a little bit to what the mouth look like, I am going to set up my settings for this drawing element to be the same. I'll set the Stroke to No Stroke so that way it will only be creating a fill and I'd like to set the color of the fill to match the color of the nostrils here. So I'll just pick that up from the graphic itself. Now we can go in and make the monkey's mouth and to give him a little movement here, I am going to make a couple of changes to the mouth shape before we go back to the big smiling wide shape that we started out with.
I will add a keyframe around Frame 10 and now I've copied that shape into Frame 10 and while I've got this selected, I am going to go ahead and make another keyframe somewhere around Frame 12. We'll press F6 again and now I've got three copies of the same shape. But I can go back to the middle one, I'll switch over to my Selection Tool and I'll click away from the graphic to deselect it and that will give me access to the outline shapes. So I can change the shape of the monkey's mouth here right in the middle.
Now I am moving the playhead to give me a little preview of what we got going here. I've got a little change in shape and we can fill in those blank spaces by adding Shape Tweens to pretty much every keyframe pair here. So I am just going to select the first keyframe and I am going to Shift+Select out again to the first keyframe of the last pair. I'll use my right-click again, and of course you can use Ctrl+Click on the Mac if you only have a one-button mouse to access that Context menu and here I am going to choose Create Shape Tween and now we have a smooth transition from the different mouth shapes.
Now let's test our movie and see what we've got. There we can see the mouth, the head, everything flowing in unison. I would also point that it's not really obvious from this point how our animation is broken up. We see it as a single smooth animation playing out in our final SWF file. If we just go back to Scene 1 and take a look at that timeline, you zoom out here just a little bit so we get some perspective. I would like you to imagine doing this entire animation with only this timeline. I think you would ag
Comments