Animations and Interaction - Echoing Layers

(Page 8 of 11 )

Layers below the mask layer that are not masked are fully visible. Although you may have several masked layers beneath a mask layer, none are blocked by or revealed by the mask layer unless they're indented beneath the mask layer or one of its masked layers.

If you duplicate the background layer and paste it below a darkening filter layer, when the mask passes over the masked layer, it appears to lighten. To see how this works, we'll expand the mask document from the preceding section. Use the following steps for the expansion:

1. Add three layers and drag them to the bottom of the layer column. Name the bottom layer Echo Background, the second from the bottom, 35% Dark Filter, and the third from the bottom, Sky.

2. Select the Sky layer and right-click the mouse to open the context menu. In the menu, select Properties and click the Masked option. The layer title will indent and change to a masked layer.

3. Select the Background layer, select everything, and copy the contents of the background. Click the Echo Background layer and select Edit, Paste in Place from the menu so that an identical background is beneath the original background image.

4. In the 35% Dark Filter layer, draw a black rectangle the same size as the Stage. Convert it to a Graphic symbol, and in the Property Inspector adjust the alpha level to 35%. Now the second background should appear darker than the original, and when all layers are locked, all you should see is the dark background layer and a circle where the mask covers.

5. In the Sky layer, insert a yellow linear gradient rectangle. Rotate the rectangle so that the lighter side is on the bottom. Size the rectangle so that it fills the Stage horizontally and from the top of the Stage to the horizon line. When the round mask goes over the yellow gradient sky, it appears to be the moon lighting up the dark. Figure 4.27 shows the revised document.

Figure 4.27 - The mask lighting up the top background.

Using filters and echo layers, you can do much more with masks. Although you can have multiple masked layers, you can only have a single object serve as the mask. However, a document can have as many mask/masked combinations as you want.

Moving Masks with a Guide

One of the peculiarities of Flash is that a guide layer cannot be placed above a mask layer. Therefore, you cannot create a motion guide for a masking object. However, using a workaround and a little ActionScript 2.0, you'll find that setting up a motion path for a masking object is not difficult at all. Extending the previous example, the following steps show you how:

1. Add two layers above the Mask layer. Name the top one Actions and the bottom one Guide.

2. Select the Guide layer. Click the Add Motion Guide button to add a motion guide layer. Draw a guideline in the motion guide layer and then lock the layer. (See Figure 4.28 for an idea of how this looks.)

3. In the Guide layer (beneath the motion guide layer), draw a small circle and convert it to a movie clip. Give it the instance name guide_mc.

4. Add a keyframe to Frame 30 of the Guide layer, click Frame 1, and add a motion tween. Still in Frame 1, drag guide_mc to the beginning of the guide path. Then click Frame 30 and drag guide_mc to the end of the guide path. Test it to make sure that guide_mc follows the motion path.

5. Open the Library panel and change the circle object used for the mask from a Graphic symbol to a movie clip. To make the change, click the object in the Library panel, click the i icon at the bottom of the panel to open the Symbol Properties dialog box, and then select Movie Clip Behavior. Provide the instance name mask_mc for the movie clip.

6. In the Actions layer, Frame 1, add the following script:

   guide_mc._visible = false;
   guide_mc.onEnterFrame = function() {
   mask_mc._x = guide_mc._x;
   mask_mc._y = guide_mc._y;
   };

Once you're finished, test the movie. Figure 4.28 how the Stage looks when complete.

Figure 4.28 - A guide path for the movie clip mask to track.

Basically, all you've done is to add an addressable object (guide_mc) to a motion path, add another addressable object to the Mask layer (mask_mc), and provide code that instructs the masking object to follow guide_mc. Because guide_mc shouldn't be visible at all, its _visible property is set to false.

---

Mask Uses Script to Follow Another Movie Clip's Guide Path - The motion tween was not removed from the Mask layer; however, it could have been. The moving mask object is not being tweened from one frame to the next, but instead it is being repositioned by the changes in its _x and _y properties, mimicking guide_mc. Therefore, you can remove both the motion tween and the keyframe in Frame 30 in the Mask layer.

---

Dragging a Mask

Before we end our discussion on masking, one more technique you may find useful is dragging the masking object. In this way, you can design documents where the user drags the mask to reveal different information. To see how this works, just remove Frames 2–30 (press Shift+F5 on all selected frames) in the sample mask movie, remove all motion tweens, and add the following code to the Actions layer frame:

mask_mc.onPress = function() {
startDrag(this);
};
mask_mc.onRelease = function() {
stopDrag();
};

Now the "moon" mask can be dragged anywhere the user wants. Although this is not especially useful in this movie, in designs where user interaction is encouraged, having the user drag an object is one way to get him or her involved.

This chapter is from Macromedia Flash MX Professional 2004, by Bill Sanders (Sams, 2004, ISBN: 0672326051). Check it out at your favorite bookstore today. Buy this book now.

Next: Timeline Effects >>
 

More Flash Articles
More By Bill Sanders

Comments On: Animations and Interaction

>>> Be the FIRST to comment on this article!