CorelDRAW X5 Unleashed Multimedia Training DVD CorelDRAW Unleashed Training Boot Camp CorelDRAW Graphics Suite X5 Upgrade Download Free Trial CorelDRAW Graphics Suite X5 Full Version Download Free Trial CorelDRAW Graphics Suite X5 Education Edition Download Free Trial CorelDRAW Premium Suite X5 More Web capabilities!

Flash 5 Tutorial 3: Using Masking in an Animation

© 2000 by David Karlins. All Rights Reserved.

In the first two tutorials of this series, I've provided quick examples of using animation and shape morphing to generate splash screens and animated logos. I'll assume, for the purpose of this tutorial, that you already worked your way through the first two projects, and have a basic understanding of Flash layers and frames. With that under our belts, this tutorial will explore using masking to create a unique animation effect for splash screens or logos.

Masking can be used in static graphics, but it takes on a much more dynamic role in animation. Think of yourself as a movie director, able to point a focused lens at various elements of a scene. And, able to zoom in and out as well. A mask layer in Flash functions like that movie camera, while other layers provide the "scene" being "shot" with the mask functioning as a camera.

Before we jump into this tutorial, a friendly reminder that if you need Macromedia Flash 5, you can order it here and help cover the cost of this site. And, of course, you can also pick up a discounted copy of my Complete Idiot's Guide to Flash 5 while you're here as well! You'll find the tutorials in this series closely match the topics covered in the Idiot's Guide.

Create the Masked Layer First

To keep our example manageable, we'll use a single graphic as our bottom layer. And, again to keep the project tutorial-sized, I'll animate only the mask. After you work through this tutorial, you can feel free to enhance the project by animating the underlying layer as well.

First, I'll import the Graphics Unleashed logo as shown at right. To keep myself organized, I've renamed the layer Logo (double-click on the default name "Layer1," and type a new layer name). If you have either a bitmap or vector based graphic to use, import it into Flash now (choose File, Import, choose a file type and navigate to your file).

This "bottom" layer will become the masked layer - the one that is exposed (or hidden) by activity in the mask layer we are about to create.

Create a Mask Over the Logo

First, we'll create two layers - a mask layer, and a masked layer. Then we'll create a mask object to expose part of the logo. In Flash, the mask object will look like it is covering part of the masked layer. But when the file is run as a Flash movie, the masking object will do just the opposite - it will reveal the part of the underlying image that it moves over.

1. Insert a new layer (choose Insert, Layer), and if necessary, drag the new layer to the top of your layers, and name it "Mask," as shown here. (Rename a layer by double-clicking on the old layer name, and typing a new name)


2. With the mask layer selected in the Flash Timeline, choose Modify, Layer, and click on Mask in the Layer Properties dialog box, as shown here. After you OK the Layer Properties dialog box, the mask layer appears with a down arrow next to it.


3. Next, convert the Logo layer to a masked layer by choosing Modify, Layer, and clicking on the Masked options button in the Layer Properties dialog box. After you OK the dialog box, the mask layer appears indented in the Timeline, as shown here.


4. Now it is time to create a graphic on the mask layer that will serve as a "porthole" into the masked layers below. A simple form of a mask is to just create an animated circle, like you see here. First select the Mask layer. Then use Flash's Oval tool (Press "O" to select it) and draw a circle on the mask layer. The mask "lens" will appear with a fill (whatever color fill happens to be selected). Don't pay any attention to that - when the mask shape functions in a viewer, it will be a window into the underlying object. You can preview the effect of the mask by choosing Control, Test Movie to open your (one frame) movie in the Flash viewer.

Animating the Mask Layer

Time to animate the mask layer. Here we'll achieve the effect produced when the circle moves around over the masked layer.

1. Click in frame 60 in the Mask layer, and press F6 to generate a keyframe with the content of the first frame in the movie (for a little more discussion of keyframes check out the first tutorial in this series.
2. Click on frame 60 of the Logo layer (the masked layer), and press F6 here as well. We now have generated 60 frames in each layer, which we can animate, using the animation techniques introduced in the first tutorial in this series.
3. Even though our mask object hasn't moved, we'll insert animation now. This will have a helpful side-effect of automatically transforming our mask object (the circle) into a symbol, so that when we do change its size and location animation will be applied to the changes. Do this by clicking anywhere in the Mask layer, right-clicking (Mac folks choose Command+click), and choosing Create Motion Tween from the context menu.

4. Click on frame 60 in the Mask layer. Select the circle in frame 60, and right-click (Command+Click) and choose Scale from the context menu. Use the sizing handles to enlarge the circle (and move it) so it covers the entire logo, and center it over the logo, as shown here. We have defined an animated mask object that gets bigger, and moves over the center of the underlying logo to "reveal" it as the animation plays. To test your masked animation at this point, choose Control, Test Movie. Close the Flash viewer when you're done.
5. We'll complete this animation effect by having the mask object get smaller, and move completely off the bottom right corner of the logo. This will create the effect of the logo disappearing, and then appearing again starting at the top left corner as the animation loops. Add an additional 60 frames to the animation by shift-clicking to select frame 120 in both layers of the Timeline. Click to select the frames from 60-120 in the Mask layer (use Shift+click to include frame 120). Right-click (Command+click) on any of those frames. Choose Create Motion Tween to animate the changes you are about to make in the location and size of the mask circle.

6. In the Mask layer, select frame 120. Resize the mask circle by making it smaller, and move it off the right, bottom corner of the logo, as shown here.

That's it! Your animated masking should look something like above.

More Fun...Animate Both Layers

You can enhance your masking effect by adding motion tweening to the Masked layer as well. Use F6 to insert some keyframes, and move the location of the logo in the new keyframes. Add motion tweening to the frames in between keyframes, and experiment. The animation at the top of this tutorial shows the animated logo with motion in both the mask, and masked layers.

Here we see selected frames indicating motion on both the mask, and masked layers. On the mask layer, the circle moves and gets larger and smaller. On the masked layer, the logo moves around underneath the moving logo. The frames below illustrate how the two layers move in relationship to each other to create a more dynamic masking impact.

Discuss the articles with David in the Graphics Unleashed Discussion Forums

Choosing a Web Authoring Tool · Eight Steps to Implementing a Web Site · Step 1: Grabbing a Domain Name · Step 2: Publishing Your Web Content - Finding a Web Server Provider · Step 3: Develop Your Web Strategy · Step 4: Design and Create Your Site · Step 5: Publish and Test Your Site · Step 6: Promoting Your Site · Part I: From CorelDRAW to the Web · Part II: Creating Web Page Background JPEG Files · Part III: Creating a Hover Button in CorelDRAW

Flash 5 Tutorial 3: Using Masking in an Animation · Flash 5 Tutorial 2: Creating a Logo with a Shape Transition · Flash 5 Tutorial 1: Create a Splash Screen

Clipart, Fonts & Other Artwork			Training	Add-ons	Textures
Bonus Content Packs Spring Unleashed V1 Summer Unleashed V1 Sports Unleashed V1 Fall Unleashed V1 Halloween Unleashed V1 Thanksgiving Unleashed V1 Winter Unleashed V1 Symbols Unleashed V1 Fruit Unleashed V1 Signs Unleashed V1	US Flags Unleashed V1 Music Unleashed V1 Icons Unleashed V1 Buttons Unleashed V1 Stick People Unleashed V1 Computer Unleashed V1 Sports Unleashed V2 Weather Unleashed V1 People Icons Unleashed V1 World Flags Unleashed V1 Clipart Unleashed	1200+ CorelDRAW Brushes Vehicle Templates for Vehicle Wraps Free Fonts 1000 Seamless Stripes Stick Figure Volume 1 Ult. Flames Mega Pack Ult. Flames Mega Pack 2 Ult. Ornaments Mega Pack 1400 Seamless Textures	CorelDRAW X6 Training DVD CorelDRAW X5 Training DVDs CorelDRAW X4 Training DVDs Click 'n Learn Tutorials CorelDRAW 0-60 Training Jeff Harrison's FUNdaMENTALs CorelDRAW Training Session On-Site Training Session Phone Consultation CorelDRAW Unleashed Magazine	Design Base Automation Tool for CorelDRAW X3-X6 ROMCat Resources Docker QR Codes Docker EZ Metrics Smart Designer CoCut Pro	Wood Metal Stone Terrain Fire & Ice Ground & Plants Floor, Wall & Bricks Fiber Tile & Path Marble Crystals

Copyright © 1995–2013 Unleashed Productions, Inc., All Rights Reserved.