Join Paul Trani for an in-depth discussion in this video Creating animation inside animation, part of Flash Professional CS5: Animation Projects.
- View Offline
The great thing about symbols is that they contain their own timeline. That means you can animate the contents of the symbol while animating the symbol itself. And that's what I am doing with this fish. I can have the fins flap while it animates across the screen. So I have this Background layer locked, and what I am going to do is I am going to select all the parts of this fish and drag it into the library. And I'm going to convert the convert this to a movie clip, and it can be called fish.
So there's my movie clip. So if I double- click on this fish, notice that I have a new timeline right in here. And notice that I'm inside of the fish movie clip. So let me just zoom in on the contents here. So, notice it contains different movie clips and my first goal is to put all of these movie clips on their own layer because they're all on layer 1. Well, what I can do is with my Selection tool, I am going to select all these graphics.
I will do a right-click, and I'll distribute to layers. That takes all the content and distributes it to layers. So I have the fin, the body, and then the tail. In fact, I don't even need this layer 1, so I'll click that trashcan and delete it. So I do want to animate couple of different body parts, so I am going to go ahead and extend out the timeline for these three layers to about frame 15, just by doing a right-click, and Insert Frame.
Currently, nothing is happening. I am hitting the Enter key and nothing is going on, but I do want to animate, starting with the fin. So I want the fin to actually pivot from the right side. So in order to do that, I need to move this registration point right here. So I am going to go ahead and select my Free Transform tool. I'm able to move that registration point just to the right side, just like that. And now, when I scale it, or whatever, you can see that it's going to pivot it from that point. I have it set up.
Now all I need to do is do a right- click, and create a motion tween, so it turns that layer blue. Now, in about 7 frames, well that's when I can adjust this. So maybe I'll sort of scrunch it in, and maybe I'll even skew it so if I roll over that line right there, I can sort of skew it down if I want to. Something like that, so it animates at an angle, so starting position, ending position.
And then I need to scroll out to frame 15 and then bring that back into place, kind of like that. Ending position. Starting position. We can see that fin flap. Looks pretty darn good. Now, let's go ahead and take the tail, and we're going to do the same thing. Again, using Free Transform tool, I can move that registration point, just like that. I'll do a right-click and create a motion tween.
And it's the same process of going in about 7 frames and then sort of scrunching up the tail. Let's make it a little more dramatic, maybe kind of like that. And I can skew it if I want to put it at an angle and then frame 15, I can bring it back like that and then stretch it back out. And notice how the ending frame and the first frame are the same. You can also use your Transform panel. So if go to Window, down to Transform, I can open up that Transform panel.
And as you'll notice, the width isn't quite 100%, so I can type into 100% right there. Notice this skew. It says 1.8. Well, I want that to be 0. I can enter in 0, right there. So if you want exact control you can use your Transform panel. But what I have going on now, if I just hit the Enter key, you can see that the fin and the tail are kind of flapping appropriately. So let's go back to scene 1. I am going to click on scene 1. And my timeline in scene 1 is just 1 frame.
So if I do a test movie, we should see that fish animate. And I'm pointing that out to you because it shows that the timeline for a movie clip is independent of the main timeline. I can have this be a pretty robust animation, and yet it will play through, regardless of what's going on on the main timeline. So my next step is to move this fish across the screen.
But what I am going to do is I'm actually going to take this fish right here, and I'm going to drag him into the library. And I'm going to make this new movie clip symbol, and I am going to call it fish animation. This is going to be a symbol that's going to contain my fish animation. Select OK. Now, I am going to just change my view so I can see everything. So I'm going to do a Show All. Now I can see the entire screen, all the content.
And what I want to do now is just kind of position this sort of off to the side over here. But remember, this is my fish animation movie clip, and I haven't animated anything in here. So I am going to double-click on that fish, and this is the fish animation movie clip. And what I can do in this movie clip is I can animate this fish. So I am going to animate him across the screen, let's say in about to 30 frames. So I'll extend the timeline by selecting Insert Frame.
And starting position is going to kind of off the screen over here. And I can go ahead and do a right-click, and create a motion tween, because I want him to move from over here, clear over to about frame 30. So now I can drag him right over here to this side of the screen. And if I scrub the timeline, you can see the fish go. In fact, if I hit Enter, you can see he goes pretty fast. So I am going to go ahead and extend out this timeline just by clicking and dragging on the right side.
So there's my fish moving across the screen. Again, we're inside of fish animation. And you know what's inside of this fish is, of course, my animation of the fins, so we're three levels deep. But again, I have an animation that's inside of another animation. My main timeline is still only one frame long. So let's do a test movie.
See my fish swim across the screen. All right, that looks pretty good. But you might be wondering, why did I put this fish animation in its own movie clip? Well, I did that so I can add multiple fish. So, I'm going to go ahead and extend my main timeline out to about 40 frames, and I am going to add a new layer. And on this new layer, I am going to drop on another fish, and I am going to use that fish animation.
So I can drop on another fish, right here on this new layer, that I will evenly name to fish. And with this new fish, I can have that new fish coming at about frame 10. Another thing I can do, since this is another instance of the movie clip, is I can scale it up, and that manipulate this all I want. This might be even larger than that. There is my larger fish that's going to enter at about frame 10.
I can do that a couple more times if I want to. I'll just do it one more time. Again, drop on a fish, and this one's going to be smaller so I'll shrink it down, and then position it, say, right there. And lastly, I will move that movie clip in. These three animations are going to play, but I still need to extend out this main timeline a little more, just so each one of these animations have time to play, because my main timeline loops through.
So I am just going to go ahead and scrub down here to about frame 100 and insert a frame. So that's how long my timeline is, so these three fish will play. So let's go ahead and try this out. I'll do a test movie. There is my three fish, and they actually go pretty fast. And this one actually disappears sooner, but take a look at what happens. These movie clips actually loop.
So if you have animation inside of a movie clip, it's going to loop over and over again. So this is just a quick example of how you can animate the contents of the movie clip, and then turn around and animate the movie clip itself, and use it as many times as you want.
- Creating graphics and reusable assets
- Importing graphics
- Making an object move
- Animating a mask
- Using and customizing motion presets
- Morphing shapes
- Animating in 3D
- Adding bones to a character
- Controlling the Timeline with ActionScript
- Randomizing content