Tutorials

Create a complex mask in Flash 8

by Tom Green and Jordan Chilcott

As you learned in “Frame video with a mask”, a simple mask is a great way to frame your video in Flash® 8. Once you master that technique, it’s time to advance your game, and create a more complex image mask.

In our example, one of the authors has a phone sitting on his desk that contains an Information screen. He has wistfully looked at the phone on several occasions and wondered, “What would this look like if it were a video screen?” The great thing about Flash is it can be used to play these what-if games and turn a phone’s information display into a video display.

To follow along with this tutorial, download the ComplxMsk_Files.zip file.

Download (ZIP, 1076K)

Get started

Before we start, now would be a good time for you to discover a “gotcha” that is a part of the FLVPlayback component: The component really hates it when you distort the component using the Free Transform tool. It especially dislikes it when you skew the component. The implication of this is you will be doing a lot of unnecessary fiddling and tweaking to get a video to fit into an oddly shaped area (see Figure 1).

Figure 1: The FLVPlayback component is not exactly “distortion-friendly.”

The solution is to use a video object from the library instead of the component. Let’s put a video in a phone, shall we? To get started, create a new folder named Phone and place a copy of the BMX.flv file that you downloaded into your new folder.

1. Open the Phone.fla file that you downloaded. When the file opens, you will notice we have placed the phone and the screen on separate layers and left a layer open for the video and another for the actions (see Figure 2).

Figure 2: It starts with a phone.

• If you look at the screen in the phone, you will notice it is a little wider at the bottom than the top and that the sides angle in as they move upward. This is due to the perspective of the photograph. Playing a video that is rectangular in a trapezoidal area is simply not going to work. It will look a bit odd, which is why we suggest you closely match the geometry of the video to that of the area covering it.

You won’t get an exact fit because the component and the video objects are not vector-based. The sides of the object, when manipulated by the Free Transform tool, can’t be changed independently of each other. They all change. Moving the center point to a handle only freezes that side in place, and the other three edges will move in relation to the center point.

There are two solutions to this issue. The first is to draw a shape in Flash that matches the shape of the cutout and to use that shape to mask the video. On the surface, this sounds like a great solution, but is actually duplicating effort because that will also be the purpose of the hole in the phone. The other is to change the shape of the video object to approximate the shape of the cutout.

2. Move the Video layer above the Phone layer and turn off the visibility of the Screen layer. Open your library and select New Video from the Library pop-down menu. When the dialog box appears, name the video or leave the name suggested and click OK. You will see a small TV camera in the library.
3. Select the Video layer and drag the video object from the library onto the Video layer. Give the video object the instance name of myVideo in the Property Inspector.
4. With the video object selected, click the Free Transform tool and manipulate the shape of the object to approximate the shape of the screen area. Don’t forget to move the center point—that little white dot—to make changing the sides, as shown in Figure 3, easier for you. When you have finished, move the Video layer below the Phone layer and turn on the visibility of the Screen layer.

Figure 3: Use the geometry of the mask area to determine the shape of the video object.

5. Save the file. Click once on frame 1 in the Actions layer and open the Actions panel.
6. Click once in the Script pane and enter the following code:

var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
myVideo.attachVideo(ns);
ns.play (“BMX.flv”);

If you test the piece right now, you won’t see anything because the video is under the screen. To fix that, select the screen, and reduce its Alpha value to about 45–50 percent. Now test the movie (see Figure 4).

Figure 4: The video phone.

Even though the video is somewhat distorted, it still looks fine in the viewer. However, the end result is, in many respects, an optical illusion. The user’s eyes will match the video to the geometry of the hole. If you go to the Vodafone Future Vision site, you will see this illusion used quite deliberately. For example, in the Entertainment section, Lisa has a “Visual Bracelet,” which she uses to keep in touch with her friends. If you select Experience, you will watch Lisa get invited out that evening by a couple of her friends. The video plays under the bracelet, and the curve of the bracelet also gives the illusion of the video being curved to follow that geometry.

There is obviously a small problem with your video. The words on the screen still show through. You can fix this by carefully using the clone tool in either Adobe Photoshop® or Fireworks® to paint over the word with blank areas of the screen. Another neat trick is to simply create a new movie clip and draw a square in the clip using the Rectangle Tool in the toolbox, sample a green pixel in the screen, and fill the square with that color. Then all you need to do is to slide the Screen layer under the Phone layer and place the movie clip there. Resize it to fit the hole and apply about 50–60 percent opacity. If you want to try it, replace the Screen1 movie clip with the ScreenVid movie clip in the library.