Mask & Alpha Effects in Flash CS5

A mask is like a "hole" through which underlying layers are visible.  A mask item can be a filled shape, a type object, an instance of a graphic symbol, or a movie clip.  To create a mask layer, you place a mask item on the layer that you want to use as a mask.  Instead of having a fill or stroke, the mask item acts as a window that reveals the area of linked layer(s) that lie beneath it.  The rest of the mask layer conceals everything except what shows through the mask. For this lesson two Flash techniques will be investigated:

• The mask effect
• Fading an object in

Let's begin with the Mask effect.

Step One: Open the BOAT7.FLA.  Start by creating a new Movie Clip Symbol (CTRL-F8). Call it Mask

Step Two: First, we need two new layers for a Mask Effect: a Mask layer where the mask will be placed; and a Masked layer (underneath) which the mask will reveal. Create these two layers and name them.  Be sure they are in the order shown below.

Step Three:On the Masked (lower) layer create a simple rectangular color bar, using the rectangle tool , which will be revealed through the Mask layer. The fill color is up to you.

Step Four: Finally, create a simple motion tween animation for the color bar in the masked layer, AND place a keyframe at the end of the mask layer so that both layers are the same length, (use the F6 key to create a keyframe). Below is what it will look like. Go back to lesson 3 if you forget how to create a motion tween.

Step Five: Now, on the mask layer, create a title for your movie using the Text tool to drag out a text box similar in size to the one shown below. In the Properties Panel, set the font size to 72 pt, the Family to Arial, the Style to Bold, the Color to Red and make sure that Multiline is showing in the Behaviour dropdown as shown below.

Step Six: RIGHT-CLICK on the tiny icon (circled in yellow below) next to the name of the mask layer. Scroll down the fly-out menu and choose the Mask option.

Notice how the layers have changed

Whatever appears below the mask layer with an icon like the masked layer will be masked.

Step Seven: Next select the text box with the selection tool and hit CTRL-B twice to break apart the text. This needs to be done to simplify the letter objects so that Flash can use them as a mask.

Fading In and Out

Each instance of a symbol can have its own color effect. Flash has 4 color effects: brightness, tint, alpha (tranparancy), advanced. To set color and transparency options for instances, you use the Property Panel. When you change the color and transparency for an instance in a specific frame, Flash makes the change as soon as it displays that frame. To make gradual color changes, you must apply a motion tween. When tweening color, you enter different effect settings in starting and ending keyframes of an instance, and then tween the settings to make the instance's colors shift over time.

OK, now let's place the newly created title into our movie. 

Step Eight: Go back to the main timeline in the movie editor by selecting Scene 1 . Create a new layer (name: title).

Step Nine: Place the movie by dragging it from the library (F11) to the upper left corner of your Stage. You must also extend the length of the keyframe on the title layer to fit the length of the main timeline as shown below.

Step Ten: Right click anywhere between frames 1 and 48 on the title layer and select Create Motion Tween from the pop-up menu.

Step Eleven: Now, move the red timeline marker with the selection tool to frame 48 (the last frame). This is where the image will be completely faded out.

Step Twelve: Then click the Mask symbol once on the stage with the selection tool to select it.

Step Thirteen: Next, open the Properties Panel, and select Alpha effects from the Color Effect pull-down menu.

Step Fourteen: With the red timeline marker still on the last frame, adjust the alpha (or transparency) slider to 0 making the mask symbol completely invisible on the last frame.

Step Twelve: Test your movie, by pressing CTRL-Enter. Save as:  BOAT8.FLA

Back to home