In this lesson, you will be introduced to the special effect of masking.
INTERACTIVE Flash DEMO
Masking is a special effect technique that enables you to hide and reveal objects within a specific shape or mask. A mask is like a window that reveals certain objects as they move across the area of the window. We can use masks with motion tweening to reveal one part of the tween at a time. Here is a motion tween of a line of mice.
Here is the same motion tween of the same line of mice adding a mask technique. The line of mice is passing in front of the picture frame mask and each mouse is revealed as its head comes into the center of the tween. The mask in Flash reveals what is under it.
The picture frame is a merely a graphic I used to make it seem more realistic. The mask is really just a rectangle shaped like the inside area of the picture frame. In the Flash authoring environment, I made the mask turquoise blue but the color never shows in the final movie. Here's the image of the stage with the blue rectangular mask in position on the picture frame. The mask will not show in the final movie. It can be any color. It will just identify the area and shape that will reveal any objects in the layers that are masked to that mask layer.
Here, I have moved the orange mouse into the frame and under the mask. It appears that you can no longer see the right part of the mouse that is covered by the mask but you'll see soon that it is really the right part of the mouse ONLY that will be visible.
To see the effect of the mask, you must lock the mask and masked layers. When I lock the mask and masked layers below, you can only see the part of the mouse that is under the blue mask. The remaining mice are hidden. The mask reveals whatever it is masking. The picture frame and white background layer are not masked even though they are in layers below the mask layer because they are not part of the masked set. Their icons are the original cream/yellow color of the layer properties icon.
The turquoise rectangular area is the mask. Anything that is on a layer below the mask and is linked to the mask as 'masked' will be revealed when you test your movie. Look at the layers. There are two new icons to the left of the layer name. The top layer named 'the blue square' is the mask. The mask layer is masking the layer below it which I named 'the mice'.
The masked layer is identified in two ways:
the layer icon and name are left-indented from the other layers and the icon is a blue patterned icon of the layers property icon. A mask layer allows you to show and hide objects on layers below the mask.
Making a Simple Mask
Open a new movie and name it mask3.fla. Change the background color to black and the size to 400 x 100.
Create a new layer in the Timeline named mask. Double-click on the icon to the left of the layer name to open the Layer Properties window.
When you select 'Mask' as the Type of Layer, the icon to the left of the layer name changes to a mask icon with a blue pattern center.
We will mask objects on layers below the mask layer we named 'mask'. Select Layer 1. Select the rectangle tool with no stroke and a linear rainbow gradient. The linear rainbow gradient is a preset gradient which you can access from your fill color palette. It's the color chip on the bottom right of the swatches. Drag out a gradient rectangle to fill the entire stage. Use the Align Panel to center the gradient shape to the stage. Save your work.
Name Layer 1 gradient. Now, we want to define the gradient layer as the layer to be masked by the layer above it. There are several ways to do this. You can click on the icon to the left of the layer name to bring up the Layer Properties Window. You can go to the Modify Menu - Modify>Layer... to open the Layer Properties Window. You can right-click on the layer and select Properties... from the context-sensitive menu. Or, you can drag the gradient layer up to the mask layer and let go. I'm going to right-click and open the Layer Properties Window and select 'Masked' from the Type options.
The gradient layer is now masked by the mask layer. The layer name is indented below the mask layer and the icon has changed from the original cream layer icon.
Go back to frame 1 of the mask layer. Select the oval tool with a bright pink color and draw a filled oval with no stroke. Use the Info or Properties Panel to resize it to 48x48. Save your work.
Select the pink circle and convert it to a symbol by going to the Insert Menu - Insert>Convert to Symbol or F8. Name it pink circle. Make it a movie clip symbol. Center the pink circle vertically on the stage and drag it to the left side of the stage.
Select frame 20 of both layers and Insert Frames. (F5).
Select frame 20 of the mask layer only and insert a keyframe. (F6). In frame 20 of the mask layer, drag the pink circle symbol to the right side of the stage. Holding the Shift key as you drag will keep it on the same vertical line to create a straight line from the left to right side of stage. Save your work.
Select any frame from 1 to 19 of the mask layer and create a motion tween in the Frame Panel. Save your movie and test your movie. Is your circle changing colors as it moves from the left to the right side of the stage? It should be. If not, review the steps and do a bit of troubleshooting.
Notice your layers. Is the gradient layer locked? If you unlock the gradient layer and scrub through your movie in the Flash authoring environment, the mask will not show. You will see a pink ball moving over a gradient background. If you lock both the mask layer and the gradient layer and scrub through the movie, you will see that the gradient is only revealed when the ball is on top of it. The shape of the ball acts as a window to reveal whatever is under it at any given time. Think of a mask as a window that can move around and display what's below it.
More Practice
Now we'll try some variations of our mask3.fla. Save your movie as mask4.fla by going to the File Menu - File>Save As mask4.fla. Unlock any locked layers.
Remove the motion tween from the mask layer. Remove the keyframe from frame 20 of the mask layer by right clicking in frame 20 and selecting Clear Keyframe from the context-sensitive menu. Select frame 1 of the mask layer and use the Align Panel to center the pink ball to the stage. Save your work.
Select frame 1 of the gradient layer. Group the gradient shape by going to the Modify Menu - Modify>Group or pressing Control + G. Add a keyframe in frame 20 of the gradient layer. In frame 20, move the gradient rectangle so that its left edge is at the left edge of the pink ball. In frame 1, move the gradient rectangle so that its right edge is at the right edge of the pink ball.
Create a motion tween in frame 1 to make the gradient move across the stage from left to right. (Remember that you must either group a shape or convert it to a symbol in order to create a motion tween.). Save your work.
Scrub the playback head through frames 1 to 20. What do you see? I see a gradient enter from left side of the stage and go across the stage behind a stationary pink ball in the middle. Now, lock both the mask and gradient layers and scrub the playback head through frames 1 to 20. Save and test your movie.
You can drag more layers below the mask layer or select the layer and go to the Modify Menu - Modify>Layer... to bring up the Layer Properties Window and select masked for the Type. You can create shapes on your layers first and then convert them to mask and masked layers. Work with the layers unlocked to create the content in your layers. When you are ready to see the mask effect, lock the layers and scrub the playback head or test the movie.
Layers are not locked in this image.
Layers are locked in this image, revealing the masking technique.
Flash only uses fills to create the shapes for the mask layer. If you create something with strokes, the strokes won't show up. Convert strokes to fills with a command in the Modify Menu. The mask color won't show up when the layer is locked and functioning as a mask. The color is to let you identify the shapes you are using to create the mask.
As you're developing your content, a good way for you to see what you're hiding with the mask is to create the mask out of a transparent color. You can do this by going to the Color Mixer Panel and setting the alpha lower than 100%. If your mask is already a symbol, go to the Color: drop-down menu of the Properties Panel and select the alpha option from the drop-down menu and reduce below 100%.
Using Different Shapes for Masks
You can select different shapes for masks. Try using a word as a mask. Select a large font size, bold weight. Use it to mask images on layers below it. Make sure all the layers are linked to the word mask as masked. It's helpful to break apart the text since all users may not have the font you selected installed on their machine. Breaking apart the text will let you be certain that the font will be displayed the same amongst all users. However, the font is no longer editable once you break it apart. After you break apart the text, you can convert it to a graphic symbol.
The mask and masked layers are unlocked in the image below.
The mask and masked layers are locked displaying the mask technique.
This movie uses several masked layers linked to one nature text mask layer. Notice above the mask layer is a regular layer named 'nature outline only'. When you view the movie, you'll see the outlines of the word nature. Remember that outlines and strokes don't show up in the mask layer.
In order to create the mask window in the shape of the nature letters, I created text but when I played the movie, the text shape was not easy to read as text.
To remedy this, I created a text layer above the mask by copying the text from the masked layer and pasting it in the same place. I used the Info Panel to get the location the same for both. You can also use Control + Shift + V to paste in place.
Then, I used the ink bottle to stroke the text with a dark outline color. I then selected only the fill of the text and removed the fill to leave only the outlines in the layer above the mask named 'nature outline only'.
This is just a light and simple movie to illustrate that I have used tweens on most of the masked layers. The apples are falling off the trees from top to bottom. The clouds are moving from right to left in the sky. The sun is rising above the hills. The trees and blue sky are static. The nature text mask layer is static. The nature outline only layer which is not part of the linked masked set is static.
Remember that in order to tween the graphics, I had to convert them to symbols or group them. In order to let all users view the font properly, I broke apart the text to convert it to a graphic bitmap which makes it not editable any longer as text. In Flash, the area and shape of the mask is like a window that reveals what is masked below it.
Have fun creating some interesting masks. The following mask (same as the one on the top of the page) requires advanced programming and is not included in the scope of this course.
Masking Tips:
The shape in the shape layer determines the visible part of the stage.
The object in the mask layer is only visible directly under the mask shape.
You can have multiple objects in the mask layer.
Lock the mask and masked layers to see the mask effect.
Can you create a spotlight effect using a mask effect? If you can't figure it out, you can do a search at one of the Flash sites offering open source files and tutorials.
Please continue to the next section of this lesson.
