• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Using a Mask

You can use a mask layer to create a hole through which the contents of one or more underlying layers are visible. You can group multiple layers below a single mask layer to create sophisticated effects. You cannot mask layers inside buttons.

In the following exercise, you'll use a mask to mask the contents of two of your movie's layers. You should still have neptune14.fla open from the preceding exercise.

1.
Click the lock/unlock all layers button (the padlock icon) at the top of the timeline to lock all the layers in the movie.

You took the time to set up your animation and place your symbols precisely, so you don't want to mess them up. Locking all the layers will prevent anything from happening to your project while you work with other layers.

2.
Select the Blue Vector Graphic layer, and choose Insert > Layer. Name the new layer Header Mask, and insert a blank keyframe at frame 2 of this layer.

You are going to use this new layer to create a mask for what will become the header of your movie. The header will include the contents of the Blue Vector Graphic layer and another layer that you'll add soon.

3.
In frame 2 of the Header Mask layer, draw a rectangle with no stroke, bright green fill, and a corner radius of 0 . Use the Info panel to set the width to 580 , the height to 100, and the X, Y coordinates to 10, 10.

TIP

If you need to open the Stroke, Fill or Info panel, choose Window > Panels, and choose the appropriate panel from the submenu. Remember, though, that you can also change the stroke and fill from the Colors area of the toolbar.

This rectangle is going to be your mask. It doesn't matter what color the fill is, but this exercise uses a very visible color so that you can see it among all the other elements on the stage.

4.
Right+click (Windows) or Control+click (Macintosh) the name of the Header Mask layer, and choose Mask from the contextual menu.

This step turns the Header Mask layer into a mask for the layer below it, which is the Blue Vector Graphic layer. Only the area covered by the rectangle in the Header Mask layer (the mask layer) shows through in the Blue Vector layer (the masked layer). Flash locks the mask and masked layers automatically. Icons identify the mask and masked layers in the timeline.

5.
Select the Background Graphics layer, and choose Insert > Layer. Name the new layer Header Graphic. Insert a blank keyframe at frame 2 of this new layer.

You are going to add some content to this new layer, which is destined to become part of the header.

6.
Drag an instance of the Whale Shark symbol from the Header Graphics folder in the library onto the stage; place it in frame 2 of the Header Graphic layer. Use the Info panel to position the symbol at X: -435 and Y: -15.

At this point, the instance of the Whale Shark symbol looks horrible; the effects used to create it run off the edge of the graphic. You don't want your users to see that, so you're going to mask its layer so that only the important stuff shows through.

7.
Select the Header Graphics layer, and choose Modify > Layer. In the Layer Properties dialog box, click the Lock checkbox and the Masked radio button; then click OK.

You used the Layer Properties dialog box in Lesson 2, so it should look familiar.

After you modify the Layer properties and click OK, the layer becomes masked by the Header Mask layer. The edges of the Whale Shark graphic are now hidden, giving your developing site a nice clean look.

8.
Save your movie in the MyWork folder as neptune15.fla.

Your movie is coming along nicely. Now it's time to make things move around a bit.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint