Tutorials

Frame video with a mask

by Tom Green and Jordan Chilcott

Video is often treated like a television picture. It sits in a video object or the FLVPlayback component and you see the full screen. This isn’t, as Martha Stewart would say, “a bad thing.” Still, this is Flash® we are using here, and there are a lot of other possibilities for the use of video beyond simply sticking it on the Stage or manipulating it. Sometimes you may want it to actually appear inside an object, such as a circle, or framed within a custom viewer. In other instances, video is to be treated like a movie clip and otherwise manipulated in a series of creative ways. This is where masking comes in.

Masking video is not exactly a complex subject. There really are only two methods of masking video. The first is to use a masking layer in Flash, and the second is to use an object with a hole in it that lets the video show through. That’s it. Real simple. Where the complexity comes through is how the mask is applied and used, as shown in Figure 1.

Let’s get creative!

Figure 1: Dynamically generated movie clips and a color effect can turn a simple video into something spectacular.

Create a simple mask

You will inevitably reach a point where you are literally trying to stick a “square video” into a “round shape.” Obviously that isn’t going to work. You will need to use a masking layer in Flash.

To complete this tutorial, download the sample files:

Download (ZIP, 920k)

You can also download the Chapter 7 files for the Foundation Flash 8 Video
book from the friends of ED website at www.friendsofed.com/downloads.html. Alternatively, you can use similar files of your own.

1. Open a new Flash document and use these settings:
   
   • Width: 320
   • Height: 240
   • Stage Color: #333333
2. Add a layer, drag a copy of the FLV Playback component into layer 1, and set its X and Y positions in the Property Inspector to 0 to tuck it up against the top-left corner of the stage.
3. Set the contentPath of the component to the BMX.flv file that you downloaded.
4. Select layer 2 and draw a circle on the layer (any circle will do!).
5. Right-click (Windows) or Control-click (Mac) on layer 2 and select Mask from the context menu. When you do this, the icon for layer 2 will change to show a mask; the layer 1 icon will also change and the layer name will indent. This means the video in layer 1 is being masked. You will also notice that both layers are locked.
6. Save and test the movie. The video will play inside the circle (see Figure 2).

Figure 2: Use a masking layer in Flash to create a simple video masking effect.

Use a mask created in Illustrator CS2

Now that you know how to use a simple shape as a mask, let’s look at how a complex shape can be used. In this example, we created a simple circle in Adobe® Illustrator® CS2, selected it, and applied the Roughen filter to give the shape a lot of odd nooks and crannies. Then we applied a 0.5-point Chalk Scribble brush stroke to the edges of the shape. This gave us the rather “funky” shape shown in Figure 3. It will make a perfect mask for the BMX video.

Figure 3: Illustrator has quite a few tools, filters, and effects that can be used to create masks.

With the mask created, we saved the image and simply dragged it from the Illustrator page to layer 2 of the Flash stage.

The relationship between Flash and Illustrator is an odd one at best, and we suspect that Adobe will make the placement of Illustrator images into Flash a bit more intuitive than is currently the case. The suggested method of placing Illustrator images into Flash is to use the File > Import to Library method. This results in a rather cryptic dialog box asking about converting the image, converting the layers, and some rather mysterious options that involve rasterizing, invisible layers, and text blocks. Even then, the image comes in as a graphic and requires a bit of extra work on your part to make it into a workable mask.

With the mask in its proper location, we simply distorted it to fit the stage dimensions with the Auto Transform tool, then applied the Mask option to layer 2, and, when we tested the movie, the BMX video played through the inside shape of the drawing (see Figure 4).

Figure 4: The mask from Illustrator is applied.

What about the cool strokes around the Illustrator shape? Where did they go? When an object is used as a mask, only the fill is used to determine the shape of the mask. This means any stroke around the object used as a mask is essentially discarded. Let’s bring the strokes back.

Now that you understand that any object used as a mask covers everything under it, you can see how to solve the lines issue. Simply place a copy of the mask object in a layer above the Mask layer. Here’s how:

1. Open the Simple 3.fla file that you downloaded.
2. Unlock layer 2 and select the mask on the stage. Copy the selection to the clipboard and relock the layer.
3. Add a new layer, select frame 1 in the new layer, and select Edit > Paste In Place. The copy of the mask will be placed directly over the original.
4. What you don’t want to do at this point is to test the video. It will be hidden by the white fill of the object in layer 3. Instead, click once on the object in layer 3 and press Ctrl+B (Windows) or Cmd+B (Mac). This breaks the object apart (you can also select Modify > Break Apart). Pressing that combination once separates the object into fill and stroke. Deselect the object on the stage.
5. Click the Fill area of the broken-apart object to select it—it looks cross-hatched—and then delete the selection. Just the stroke will be visible.
6. Test the movie (see Figure 5).

Figure 5: The strokes are placed on a layer above the mask.

Use an image as a mask

You have seen how vector line art can be used as a mask. Now we are going to look at how images can be used for the same purpose. Images offer all sorts of possibilities. For example, if you take a photograph of the billboards in Time Square, New York, each of those billboards can be used to hold a video. This technique is more common than you may think. For example, Vodafone makes extensive use of this technique in its Future Vision site (to access it, go to www.vodafone.com, click the Future Vision link at the top of the page, and select the high-bandwidth site option on the next page) as it places video in wristwatches, rolled-up Mylar, and other devices. It isn’t only corporations that use this technique to great effect. Hit the home page of Wefail, a Flash design studio—www.wefail.com—and you will see a motion graphic, which in very simple terms, is a collection of Flash movies and video, framed in an image (see Figure 6).

The first thing you have to understand is that images can’t be used as a mask. They can be used to mask content under them. This is an important distinction because if you were to put an image on a masking layer, the image would disappear. Flash sees an image as a bunch of pixels without a stroke around them. This means the image is seen, by Flash, as nothing more than a fill, which is why it disappears. Instead, you have to cut the shape out of the image and then save the image as a 24-bit PNG. Saving an image in this format preserves the transparency that shows through the “hole” in the image.

Figure 6: The Wefail home page.

Finally, using an image as a mask requires you to ask a simple question: “Does this look real?” Sometimes sliding a video under an object looks… well… like you slid a video under an object. This is because the designer didn’t take the time to match the shape of the video to the “hole” and the video, perspective-wise, has the wrong angles. Also, televisions have glass screens, and inevitably a photo of a television screen will have a highlight or reflection on it. Take the time to match the geometry of the video to the shape of the mask and to incorporate any screen reflections or highlights (which can be achieved using a combination of the blend modes and effects covered in the previous chapters) and your video will look more “real”.

1. Open the ImageMask.fla that you downloaded. You will notice we have included an image with a hole in it on a separate layer.
2. Add an FLV Playback component to the Video layer and set its contentPath to the BMX.flv video. Place the component so that you can see the component’s icon through the screen and then lock the layer containing the image.
3. Select the Free Transform tool, then click on the component and resize it to fit to dimensions of the hole in the image. Don’t merrily start yanking corners here and there or you will distort the video. Instead, move the component so that its upper-left handle is just a bit outside the upper-left corner of the hole. Move the center point—the white dot in the middle of the component—to the upper-left corner and, holding down the Shift key, drag the bottom-right corner up toward the top-left corner. This will maintain the object’s proportions.
4. Save and test the movie. Our BMX riders should go rolling across the screen (see Figure 7).

Figure 7: Scale the component to roughly fit the “hole” in the image. Note the placement of the center point in the upper-left corner. This ensures scaling is done from or to that point.