Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating and animating a mask

From: Flash Professional CS5: Animation Projects

Video: Creating and animating a mask

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.

Creating and animating a mask

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.

Show transcript

This video is part of

Image for Flash Professional CS5: Animation Projects
Flash Professional CS5: Animation Projects

25 video lessons · 23502 viewers

Paul Trani
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Flash Professional CS5: Animation Projects.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.