Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In Flash Professional CS5: Animation Projects, Paul Trani shows how to create dynamic and visually rich animations in Flash Professional CS5. This course demonstrates how to create and import assets, and then take those assets and bring them to life with dynamic motion. It also shows how to create more unique and natural movement by adding special effects, 3D, masks, and even bones to animate characters. Exercise files accompany the course.
A great way to reveal content is by creating a mask and then animating it, and that's what I want to do with these branches is I want to create a mask that animates and then reveals this branch as if it's growing. And I want to do it for both of them as well. But the first thing I need to do is I need to put each one of these branches on its own layer, and currently they're both on this Trees layer. An easy way to put items on their own layer is just by doing a Ctrl+Click or right-click, and you can distribute to layers.
When I do that notice that it does put both of these branches on their own layer and actually names them what the movie clip is called. So these are the - sort of the tree design. That looks good. I don't need this layer, so I'll just select it and then click Delete, and now I can start building a mask for this branch up here. I'm going to first create a new layer, and I'm going to call this layer, mask. Then I'm going to go ahead and select the Oval tool, and I'm going to draw a circle, and I'm just going to pick any color I want.
It really doesn't matter because you are never going to see this color. I usually select a green, and you can adjust the alpha. So I'll make that about 50%, and then I'll just draw a circle. So this is going to be my mask. Use my Selection tool, and I'm going to drag it into the Library so I can convert it to a movie clip symbol and again, this is just going to be my mask. So that's what I'm going to call it, mask. Select OK. So that is my mask movie clip on this layer that's above this branch layer, this tree design.
And in order to mask out the content below this circle, all I need to do is right-click and select Mask. That will mask out everything outside of that circle or whatever is on this mask layer. And notice the icons change, and then it locks down those two layers. So in order to move the mask, you're going to have to unlock it. And now you can see why I made that circle semitransparent because you still want to see the content.
So I want to go ahead and have my mask exist off the stage, and I'll choose my arrow keys to kind of position it off the stage, kind of down below. And what I want to do now is I want to animate this mask, and again, this is a movie clip. It's on its own layer, so it should animate. So all I need to do is do a right -click and Create Motion Tween. It activates this Motion tween, and I can scrub down, say for instance about frame 59 roughly, and then I can move this circle.
I'm not only going to move this circle, but I'm also going to use the Free Transform tool and then make it larger as well, because I basically want to cover this entire branch, just like that. All right, so it adds that keyframe. If I scrub up back, you can see it animate. That looks like it will be a pretty good mask. But again, if I want to see it mask, all I need to do is lock those two layers. Now if I scrub back and scrub forward, you can see that branch being revealed.
I'll even hit the Enter key, and we can watch it closer to real-time. We can see that branch being revealed. All right, so far so good. And note, if you ever want to move a keyframe, what you need to do it is hold down the Command key, and then you're able to select that keyframe. So if I want to cut this in half so it was faster, I can click and drag that on down. So now this mask is going to happen a lot faster. I'm going to do the same thing for this tree branch down here.
So it's going to be the same process of adding a new layer, calling it mask, and then, from here, what I can do is bring on that mask circle that I made earlier. Position it sort of off the screen. Create a motion tween for it and notice how my order is a little bit different because I can create a motion tween right now by moving this mask later down in the timeline. So I have already created this motion tween, but I haven't applied the mask.
And I just point that out to show you that you can basically create a motion tween and then convert it into a mask. Okay, just like that. And now we have our two branches growing. Let's go ahead and watch this. I'll do a Control > Test Movie. It plays through, and you could see that branch grow. Okay, I'm going to go ahead and turn off the Bandwidth Profiler, and we can watch a replay again, and we will watch it to play through one more time.
Now there could be as many layers as I want that are being masked. It really doesn't matter. It doesn't have to be one branch or one item. It could be a whole entire scene that's being masked. But this was a quick example showing you how easy it is to mask out content and then animate it as if it's being revealed.
There are currently no FAQs about Flash Professional CS5: Animation Projects.
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.