Animation and Effects with Macromedia Flash MX 1002004 [Electronic resources] نسخه متنی

About Masking

In this chapter, you add several different kinds of effects to a simple website built entirely in Flash. You use several techniques to achieve these effects, one of which is by using masks.

Masks are commonly used in Flash for a variety of creative effects. A mask is similar to a window placed over content, that reveals and hides different parts of the "masked" layers below it. You can see through a mask to the layer (or layers) beneath the mask - essentially, you cover up what you want to see. Anything solid on a mask layer is like the window, and the background area of the mask layer is the part that hides the content beneath (Figure 8.1).

A mask can be any of the following objects:

filled vector shape

text

movie clip instance

graphic instance

A mask layer can contain only a single movie clip instance, graphic instance, or text field. If you use vector shapes and a movie clip, the vector shapes mask but the movie clip does not. If you must mask using multiple shapes, contain them inside a single instance, nest instances, or use vector fills instead.

Masks can be animated or static; therefore, you can have the mask tween over another layer below to create special effects. You can tween a mask over tweening layers. You can even have two masks tweening over several layers. There are so many creative possibilities when you work with masks.

Creating masks

Masks are simple to create. To create a simple mask, follow these steps using a new FLA file. Import an image into the Library (File > Import > Import to Library), and drag the image from the Library onto the Stage.

Click Insert Layer on the Timeline to create a new layer. Make sure that the layer is above the layer with the image. On the new layer, select the Oval tool and draw a shape over a portion of the image.

When you finish, right-click (Windows) or Control-click (Macintosh) the layer name of the top layer (contains the circle). Select Mask from the context menu. After you select this option, both layers lock and the bottom layer indents, as shown in the following figure. The layers must be locked for the mask to appear as it will in the final SWF file while in the authoring environment.

You can mask multiple layers by dragging more layers beneath the mask layer. If you change your mind and don't want the layer masked, just drag it outside of the indented layers or select Modify > Timeline > Layer Properties and then choose Normal. You can apply animation to the mask layers as well, such as motion or shape tweens.

You can also create interesting effects with animated masks. In a new FLA file, import two images that are the same size as the Stage (or resize the Stage to match the two images). Put image 1 on Layer 1 and image 2 on Layer 2. Then, center both images on the Stage so they overlap.

Insert a third layer. On this layer, create a movie clip that will be the mask for the top image. Right-click or Control-click the layer name and select Mask from the context menu. Inside the movie clip mask, create an animation on the Timeline. In this example, motion tweens and shape tweens combine to create the mask (Figure 8.3).

Put a stop action (stop();) on the final frame of the mask's tween (as shown in Figure 8.3), and make sure that the end of the tween animates so the entire Stage fills with a shape (meaning that the entire masked image is revealed).

Click Scene 1 in the Edit Bar to return to the main Timeline. Lock the mask and masked layer, which displays the beginning of the mask animation on the Stage (Figure 8.4).

Select Control > Test Movie to play the SWF file. You see the animated mask effect, which reveals the second image. If you incorporate a similar animation into a gallery, you can use this kind of effect as a transition between two images.

This example, called mask.fla, is on the CD-ROM within the 08/bonus folder.

Setting a mask using code

You can also set a mask using ActionScript. You can select a movie clip instance and set it as a mask for other objects on the Stage. The movie clip can still animate or interact with the user (such as have draggable properties, and so forth). Another advantage of using code to set a mask is you can toggle the mask on and off at runtime.

Chapter 6 for information on how to make a movie clip draggable.

Click Insert Layer to create a new layer on the Timeline. Select frame 1 of the Timeline, open the Actions panel, and then type the following ActionScript into the Script pane:

myClip_mc.setMask(mask_mc);

You can also remove a mask from myClip_mc at runtime. Create a button symbol, and drag an instance of it to the Stage. Select the instance, and give it the instance name my_btn in the Property inspector.

Select frame 1 of the Timeline. Open the Actions panel again, and type the following ActionScript:

my_btn.onRelease = function() {
mask_mc._visible = false;
myClip_mc.setMask(null);
};

The first line of the button code (mask_mc._visible = false;) makes the mask movie clip invisible so it doesn't show over the top of the movie clip when you remove the mask. Then you remove the mask for myClip_mc by passing null to the setMask() method.

Limitations of masking

There are several limitations involved with using masks in your FLA files.

If you need to mask device fonts, you must convert the text field into a movie clip and mask using a movie clip mask. If you use non-rectangular shapes to mask the text, the mask assumes the dimensions of the bounding box instead of the shape. Your visitors must have Flash Player 6 r40 or greater to see masked device fonts.

You cannot mask a masking layer.

Masks do not work inside buttons.

Masks applied using the setMask() method can only mask movie clips.

You cannot use alpha or semi-transparent fills with masks. Masks are always solid.

You cannot mask using strokes, only fill shapes.

In this chapter's project, you use an animated mask to create a transition effect.

Masked Loading Animations

Sometimes animated masks are used to make shapes appear to "grow" in a SWF file or make it look like an image is "filling up" or appearing particularly for loading effects. To do this, animate a mask over the shape using a motion tween that makes the box larger in size to gradually cover the shape on the lower layer. Sometimes you might overlap two images (as in the previous example) and hide one while you make a second one appear, as shown in the following figure.

A loading animation overlaps two images stacked above each other, and animates a mask to make the second"filled"image appear while the file loads.

Using Transitions for Effects

Transitions are one of the great benefits of using Flash to create a website. Transitions refer to an animation or effect that occurs when a visitor clicks on a new page in a Flash document. You can create transitions that simulate movement between two pages of content on a Flash website using motion and shape tweens or even frame-by-frame animation. There are many kinds of transition that you can add to a FLA file, too. A transition might be a simple effect that plays, or it might make the current page disappear and a new page appear.