Creating masks and masked content

show more Creating masks and masked content provides you with in-depth training on Web. Taught by Todd Perkins as part of the Flash Professional CS5 Essential Training show less
please wait ...

Creating masks and masked content

In Flash, masks reveal a portion of the content in a layer. This is a useful tool for when you are publishing Flash content. If I were to publish this file to the Web the parts of the bridge that come outside of the Stage might show, depending on the settings in my HTML file. Let's say I wanted to ensure that they are always hidden. So I only want to reveal the content that is the same width and height and area as the Stage. So I will do that by creating a mask to only reveal that portion of my content.

So I will create a new layer, I'll name the new layer mask. When I am masking content, I want to use a solid color shape, preferably a color that's not used anywhere else in your application. I really prefer bright colors when working with masks, so just in case they are accidentally not set to be masks they are very obvious to me. So I'm going to choose the Rectangle tool. Now when you are working with a Mask in Flash only the fill matters, so I never use a stroke, so I am going to get rid of the stroke by selecting stroke color picker, I am going to click the No Color button.

Then in the fill color picker I am going to choose a bright color that's not used here. Green will work pretty well. So I have my Rectangle tool selected and instead of trying to draw exactly the same sizes of Stage I am going to draw a rectangle that is any size, and then I will use the Align panel to set it at the same size as the Stage. So I will use this Selection tool, I will select the Rectangle, open the Align panel, make sure Align to Stage is checked and then I am going to click Match width and height in the Match size section and the rectangle of the same size as the Stage and then I just want to align it to the center of the Stage.

So I will click Align horizontal center and Align vertical center. So now I have this big green rectangle, and remember in Flash a mask reveals content. So everything that this rectangle is covering is going to show when this content is published in the Flash Player. So to set this layer as a mask and to mask Layer 1 I am going to right-click the mask layer and then I am going to choose Mask. There you go. The bridge on the overflow section of the Stage is now hidden by the mask, because the mask didn't cover that portion of the bridge.

It only covered the portions of the bridge that's on the Stage. You can tell that a layer is a mask layer because it has the Mask icon. That's a checkerboard oval with a black background. Layers that are masked by the mask layer have a checkerboard pattern but are rectangular and don't have that black background. Notice that both of these layers are locked. If I unlock either one of them then I don't see how the mask affects the content. So if you are going to preview a mask inside a Flash you will need to lock the mask and all the layers that are being masked.

I just want to point out really quick that you can also control masking through the Layer Properties dialog box, which can be opened up by clicking the layers icons. So this time we are not going to click the layer's name, just the layer's icon. This opens up the Layer Properties dialog, so that was a double-click and now I can change the type of layer. So if I want this mask layer to be a normal layer again I can Normal. I don't want that for right now, but it's just an option that you can do. So I can edit its name, chose to show or lock the layer, change the outline color of the layer to view it as outlines or to change the layer height.

I am not going to do any of that right now, I am just going to click Cancel. So that's how you control the masking for a layer. Let's say we wanted to mask multiple layers, to do that I am going to unlock Layer 1, I'm going to hide the mask layer. So let's say I wanted to mask the stroke on the outside, so I will select that stroke on the outside of my artwork and I am going to cut the artwork and I will create a new layer and I will make sure to drag this layer above the mask so it's not masked, you can see the normal layer icon there, and then I'm going to paste the stroke, using the Paste in Place command.

That's Shift+Command+V or Edit > Paste in Place. So now I want to mask this layer so all I have to do is drag it under the mask, and you can see that the layer placement line indents under the mask which is telling me that this layer is going to be masked if I release my mouse button here. So I'll release the mouse button and then Layer 3 is then masked by the mask. So I can add multiple layers to the same mask by dragging them just like this. So when you are working with masks you can reveal content in Flash.

Just make sure you're using a solid color shape and remember in masks the strokes don't apply.

Creating masks and masked content
Video duration: 4m 32s 7h 7m Beginner


Creating masks and masked content provides you with in-depth training on Web. Taught by Todd Perkins as part of the Flash Professional CS5 Essential Training

Flash Professional
please wait ...