Creating a Talking-Head Flash Video

Additional Requirements

Apple QuickTime 6 or 7

Download

The product page for Macromedia Dreamweaver 8 shows some videos in a pod called Customer Success Stories. If you take the time to check them out, you will find guest appearances by my Community MX colleague Stephanie Sullivan as well as myself (see Figure 1).

The interesting thing about these videos is that the dark, neutral color in the background wasn't actually part of the set when I was interviewed. It was added during the editing phase of the video process (also called "post-production"). The videographers shot us against a bright green background—commonly called a "green screen"—then masked out that particular shade of green (a process called keying) and replaced that color with something more pleasing.

This tutorial shows you how to create a "talking-head" video in Macromedia Flash 8 that uses my own talking head (see Figure 2). The talking-head video will be created in Adobe Premiere Pro 1.5 and then run through the FLV Wizard and the Flash 8 Video Encoder, which converts the video from a QuickTime movie into an FLV file that you can place on a web page.

Note: If you know how to use Apple Final Cut Pro or another nonlinear editor that has keying filters, you can follow along the discussion.

Before I start, I want you to understand that this is very much a beginner's tutorial. The process of keying video can be quite complex. In fact, many digital video books devote entire chapters to this task. If you are familiar with the process, your first reaction will most likely be, "That isn't the way I would do it." It probably isn't and, in many respects, isn't how I'd do it either. Still, we have to start somewhere. This tutorial reviews the basic workflow to make it happen.

If you don't have a video application yet—or even any inclination to learn how to edit video—that is fine as well. I can assure you, however, that you will be asked sooner than later to produce a Flash video with an alpha channel. It is for this eventuality that this tutorial is designed to familiarize yourself with what the video editor will do before handing you the QuickTime movie or FLV file.

If you watch any television news, you've seen the keying technique in action. Weather forecasters use it all the time. The meteorologist stands in front of a radar image and points out important weather patterns in the background. If you observe the studio during the broadcast, the scene looks rather odd. The weather person stands in front of a green or blue wall and points to it while delivering the news, simultaneously looking at a monitor which shows them standing in front of the appropriate radar image. The green or blue color in the background is keyed out of the video signal and replaced with the radar image.

In many respects, you are already familiar with keying video if you know how to create masks in Adobe Photoshop or Macromedia Fireworks. As with masking, you target a color to be removed and then manipulate the edges and add a bit of feathering to smooth out the transition between the subject and the background. Both Premiere and Adobe After Effects use plug-ins for this task.

In Figure 3, you can see the mask that is applied to the video in Premiere. Anything within the black area will be masked. This type of mask differs from one in a graphics application, however, because it moves. For example, if I were to lean to the right, the white area would adjust itself to accommodate my movement. This is an important concept to grasp, especially in Flash Professional 8. If I place the video in a movie clip and attach a Drop Shadow filter to the mask, the shadow moves and changes shape in conjunction with the changing shape of the video mask.

The first thing you need to do is find out what you are working with. It is important when creating video that the project settings match those in the source file or you will be setting yourself up for problems at a later date.

Open the CMXGS.mov file (see the sample code download) in QuickTime and select Window > Show Movie Info (or press Control+I). The Movie Info dialog box provides you with the information you will need to create the project file in Premiere (see Figure 4). This tells you that the movie will have to be 320 x 240 pixels (a standard size for web video) and that the frame rate is to be 25 frames per second. The audio in this project is mono and 44.1 kHz.

Adobe Premiere has been around for well over a decade. In many respects, it has become entrenched as a video editing standard in the PC world. Prior to the introduction of Apple Final Cut Pro on the Macintosh side, Premiere was the de facto cross-platform editor. As Final Cut Pro caught on, however, Adobe gave up on the Mac OS version and made Premiere into a Windows-only application.

Creating a talking-head video in Premiere is rather simple:

1. Open Premiere and select New Project on the splash screen (see Figure 5). Projects are wonderful documents because they keep your work and any effects you may have applied to the project intact. This is very handy when clients start asking you to make changes later on.

2. When the New Project dialog box opens, click the Custom Settings tab and set the following values in the General section of the dialog box (see Figure 6):
   • Editing Mode: Video for Windows
   • Timebase: 25.00 frames/second
   • Frame Size: 320 horizontal and 240 vertical (4:3)
   • Pixel Aspect Ratio: Square Pixels (1.0)
   • Sample Rate: 44100 Hz

In the Location field, target the folder to hold the project and all files used in the project. Finally, give the project a name. When you are finished, click OK.

Feel free to use the folder containing the files for this tutorial as your project folder. Regardless of what you do, don't change the folder's name or location after you create the project. Because Premiere stores a lot of the files associated with a project in this folder, changing the name or the folder's location will break all of the links to the files used in the project. If you must ever change a project folder's location, select Edit > Preferences > Scratch Disks and make the location change in that dialog box.

3. When the Premiere workspace opens, select File > Import and import the CMXGS.mov file into your project. When the file appears in the Project panel, select it and click the Play button to preview the video.
4. Drag the video from the Project panel to the Video 1 layer in the Timeline. Notice that the video is now composed of an audio and a video layer and that the Monitor window opens (see Figure 7).

Take a close look at the green background in the Monitor window. Notice that it's not really solid green; there are color gradations here and there in the background. The time you take to study the background is time well spent because it determines which keying effect to use. The standard Green Screen Key filter won't be able to "get" the various shades of the green in this particular background.

The direction you take next depends on what version of Adobe Premiere you have: the stand-alone retail (or "tryout") version or the one that comes bundled with the Adobe Video Collection. The latter version shares a couple of extra filters with Adobe After Effects—one of which is the Color Key filter I like to use. Although the stand-alone version does not contain this filter, you can accomplish most keying with the Chroma Key filter, which comes with Premiere by default.

For those of you who have the Chroma Key filter only, read the next section; if you do have the Color Key filter, skip to the later section, "Keying with the Color Key Filter."

Keying with the Chroma Key Filter

Follow these steps to key out the green color using the default Chroma Key filter:

1. To start the process of keying out the green background, select Window > Effects to open the Effects panel. As you can see, there are a lot of effects that come with Premiere.
2. Navigate to Video Effects > Keying > Chroma Key in the Effects panel (see Figure 8). Drag the Chroma Key plug-in from the Effects panel to the thumbnail in the Video 1 channel.

3. To adjust the Chroma Key plug-in settings, select Window > Effect Controls. Changes you make are reflected in the image in the Monitor window. The Effect Controls dialog box contains three settings that you can adjust (see Figure 9):
   • Color: You can choose which color to remove by selecting it from the Color Picker or using the eyedropper to sample the color for removal.
   • Similarity: Similar to the Magic Wand tool in Fireworks 8 or Photoshop CS2, the Similarity value determines how wide a range of the selected color to remove.
   • Blend: This control blends the edges of the mask to smooth things out. If you're thinking of this effect as feathering on the edges of the mask, you are on the right track. In the case of Premiere, you are blending the edges of the mask with an underlying image placed under the video. Although this is not necessary in this instance—because there is nothing behind the talking head—it is a good habit to develop.
   • Smoothing: This is the amount of anti-aliasing that is applied to the edge of the mask: None makes the edge look ragged, Low applies a subtle blend, and High (shown here) applies enough to ensure a smooth edge and any content placed behind the video.

4. Drag the Eyedropper tool in the Color setting onto the green area of the clip in the Monitor window. As you drag the eyedropper, some of the green area turns black. This indicates the color to be masked. Release the mouse to sample the color.
5. Drag the Similarity slider to the right. As the green disappears, the background turns black behind the talking head. Pay particular attention to the hair and shoulders of the talking head. Try to remove as much green as possible. I found that a value of 54 turned out to be just about right.
6. Drag the Blend slider to a value of about 16. This slider adds some feathering to smooth the edge.
7. To preview your efforts so far, click the Mask Only button at the bottom of the Effect Controls dialog box. This turns on the mask. What you are looking for is a solid black background and a solid white talking head (see Figure 10).

   Tip: You don't have to use the sliders to make these adjustments. You can also click the values—the blue numbers—in the percentage area and drag to change them. This is a neat trick but I would suggest using the sliders until you are more comfortable with the interface. You can also double-click the values and enter them manually.

   Play around with these values until the apperance looks best to you.

Now you can skip the next section and continue with the rest of this tutorial on the next page to learn how to export the movie with the alpha channel.

Keying with the Color Key Filter

Follow these steps to key out the green color using the extra Color Key filter provided with the Adobe Video Collection:

1. To start the process of keying out the green background, select Window > Effects to open the Effects panel. As you can see, there are a lot of effects that come with Premiere.
2. Navigate to Video Effects > Keying > Color Key in the Effects panel (see Figure 11). Drag the Color Key plug-in from the Effects panel to the thumbnail in the Video 1 channel.

3. To adjust the Color Key plug-in settings, select Window > Effect Controls. Changes you make are reflected in the image in the Monitor window. The Effect Controls dialog box contains four settings that you can adjust (see Figure 12):
   • Key Color: You can choose which color to remove by selecting it from the Color Picker or using the eyedropper to sample the color for removal.
   • Color Tolerance: Similar to the Magic Wand tool in Fireworks 8 or Photoshop CS2, the Color Tolerance value determines how wide a range of the selected color to remove.
   • Edge Thin: This control expands or contacts the mask.
   • Edge Feather: This does exactly what it says. The transition between the edge of the mask and the subject can be rather abrupt sometimes. This control adds a small amount of feathering to the edges of the mask to smooth things out.

4. Drag the Eyedropper tool in the Key Color setting onto the green area of the clip in the Monitor window. As you drag the eyedropper, some of the green area turns black. This indicates the color to be masked. Release the mouse to sample the color.
5. Drag the Color Tolerance slider to the right. As you drag the slider, the black area expands. Pay particular attention to the hair and shoulders of the talking head. Try to remove as much green as possible. I found that a value of 91 turned out to be just about right.
6. Drag the Edge Feather slider to a value of about 1.6 or 1.8. When you remove the green, you will also notice that the edges of the talking head become pixelated. This slider adds a bit of feather to smooth the edge.

   Tip: You don't have to use the sliders to make these adjustments. You can also click the values—the blue numbers—in the percentage area and drag to change them. This is a neat trick but I would suggest using the sliders until you are more comfortable with the interface. You can also double-click the values and enter them manually.

   Play around with these values until the apperance looks best to you (see Figure 13).

The next section discusses exporting the movie with the alpha channel.

Now that you have keyed out the green screen in Premiere, you can create the QuickTime file that will be used later by the Flash 8 Video Encoder:

1. Click the Monitor window and select File > Export > Movie. When the Export Movie dialog box opens, navigate to the folder where you want to save the video and name the video TalkingHead (see Figure 14).

2. Click the Settings button to open the Export Movie Settings dialog box. This dialog box is key to successfully completing this exercise. Here you choose the file type for the video and select the appropriate codec that renders the alpha channel.
3. Click the General category and make the settings shown in Figure 15. Select QuickTime as the File Type. Also select the Export Video and Export Audio options. Selecting Add to Project When Finished ensures that you can return to these settings should you need to make changes after the video file is created. Select None for the Embedding Options; embedding a project in the file does nothing more than add information to the file's metadata by letting QuickTime know that the video is part of a Premiere project.

4. Click the Video category and make the settings shown in Figure 16. Select Animation as the Compressor codec and select Millions+ of Colors as the Color Depth setting. These two choices are important for creating video with an alpha channel. Selecting Millions+ of Colors will include the alpha channel created by the filter in the video. By contrast, selecting Millions of Colors will create a video with sufficient color but without the alpha channel.

5. Click OK to close the Export Movie Settings dialog box. When you return to the Export Movie dialog box, click Save. This opens a small dialog box showing the progress of the compression. It will close when the compression is finished.
6. Select File > Save to save the project file and the work you have done so far, and then quit Premiere.

   If you open the TalkingHead.mov file in the QuickTime player, you will be in for a surprise. The green screen is still there. Don't worry, however, because the alpha channel is there too. You just aren't using it—yet.

Once you have a video with an alpha channel, you need to convert it to the FLV (Flash video) format so it can play in Flash Player. You can accomplish this in one of two ways. The first is to use the Video Import Wizard in Flash Professional 8, which not only creates the FLV file but also lets you add the controls—called a "skin"—to the player. The second way is to use the Flash 8 Video Encoder. This stand-alone application appears when you install Flash Professional 8 and includes the ability to encode several videos at once.

To create an FLV file with the Video Import Wizard, read the next section. To create an FLV file with the Flash 8 Video Encoder, skip to the section after that.

Now that you have created the video, here is how to create the FLV using the Video Import Wizard in Flash Professional 8:

1. Open a new Flash Professional 8 document and select File > Import > Import Video to open the Video Import wizard. When the Select Video dialog box opens, click the Browse button and navigate to your talking-head video. When you open it, click the Next button to get to the Deployment screen. You are essentially being asked how the video will play in Flash Player 8.
2. Select the Progressive Download From a Web Server option and click Next to open the Encoding screen.

   This screen is where you create the FLV file that contains the alpha channel (see Figure 17). There are a few rules to follow regarding Flash Professional 8 and FLV files with alpha channels:

   • Choose one of the Flash 8 Profiles. The default is Medium Quality, which pegs the data rate for the FLV at 400 kbps and uses the On2 VP6 codec.
   • Alpha channels can be added to FLV files only if they use the On2 VP6 codec. Even though this is the default codec for the encoder, don't click Next just yet.
   • You must explicitly tell Flash Professional 8 to include the alpha channel in the Advanced Settings area of the Flash Video Encoder.

3. Click the Show Advanced Settings button to reveal the advanced settings. Select the Encode Alpha Channel option located under the Video Codec pop-up menu (see Figure 18).

4. Click Next to open the Skinning screen. Select None (this is a simple talking head, after all) and click Next.

   Note: These skins are your playback controls. The list contains 27 possible control styles that you can apply to your video. Choosing None (which I do here) assumes that the video will automatically play and that the user will have no control over that decision. I chose None simply because I wanted to see if the technique works.

   The other skins are self-explanatory. They fall into two categories: controls that sit on top of the video and controls that sit under the video. Skins that sit on top of the video become visible when the user moves the cursor over the video at runtime, while those that sit under the video contain "External" in the skin name. When you choose a skin style, you will see it previewed. Just be aware that you need to leave about 35 pixels of space on the Stage under the video component to accommodate external skin styles. If you don't do this, the skin will either be cut off or not appear at all. This is because all skins are external SWF files.

   After you apply a skin style, the skin's SWF is copied from your Flash application folder to the same folder as the SWF containing the video. You must upload both the SWF containing the video and the SWF containing the skin to the web server.

5. The next screen that appears asks you to determine where the files will be saved. Click Finish to open the Save As dialog box. Enter a name for the FLA file (the FLV will be given the same name) and click Save.

   You will been shown the progress of the FLV creation (see Figure 19). After the FLV is created, the Flash Video Encoding Progress dialog box closes and you are returned to the Stage, where an FLVPlayback component is visible.

6. To see if your mask "takes," add a new layer under the video and place an image in this new layer. I used a graphic from Community MX in Figure 20. Content placed below a video containing an alpha channel will become visible.
7. Save the file and press Control+Enter (Windows) or Command+Return (Mac OS) to preview your talking-head video (see Figure 20).

Congratulations! You've created a Flash video file with an alpha channel that can show whatever image you want behind the talking head. To learn how to encode video with the Flash 8 Video Encoder, read the next section. Otherwise, read about where to go from here.

The other way of encoding video is to use the Flash 8 Video Encoder, which ships with Flash Professional 8. This stand-alone application does one thing that the Video Import Wizard doesn't do: It can encode a number of videos at once. Another major difference is that the Flash 8 Video Encoder does not give you the option to "skin" the video. This you must do in Flash. All that the Flash 8 Video Encoder does is produce an FLV file:

1. Launch the Flash 8 Video Encoder. When the main screen opens, drag the video file from Windows Explorer or the Macintosh Finder into the queue area of the dialog box (see Figure 21). You can also click the Add button and navigate to the folder where the video is located to do the same thing. Dragging and droping a video file directly is much quicker.

2. Select the video in the queue and click the Settings button to open the Flash Video Encoding Settings dialog box (see Figure 22). The default codec for Flash Professional 8 is the On2 VP6 codec. The dialog box also lists a number of preset profiles. The only codec that permits the alpha channel in the video is the On2 VP6 codec. If you are targeting Flash Player 7 or need to use the the Sorenson codec, which won't encode an alpha channel, then select one of the Flash 7 profiles. (As in the Video Import Wizard, you need to make another adjustment before you can create an FLV with an alpha channel.)

3. Click the Show Advanced Settings button to expand the interface (see Figure 23). Click the Encode Alpha Channel option. If you chose the Spark codec from the pop-up menu, this button will be grayed out. Notice that the preset now changes to "Custom Settings." Click OK to return to the queue view.

By the way, there is a lot of power under the hood in the Advanced Settings area. The three tabs—Encoding, Cue Points, and Crop and Trim—allow you to tweak the video stream, add cue points to the FLV file so that it triggers Flash events, and trim a video image so that it fits the precise physical size of your project.

The encoding options are broken into two areas: Encode Video and Encode Audio. Here you can change such settings as the codec, video frame rate, key frame placement, and video quality. Although you can resize a video here, consider doing it in a video editing application instead. If you reduce a 320 x 240 pixel video to 240 x 180 pixels here, you will not realize any file size reduction. Doing the same thing in a video editing program, however, will make the file size plummet.

Notice the two numbers for the data rate. The real data rate—how fast the information streams into the user's browser—is calculated by adding the audio and video rates together. In the example shown in Figure 20, the data rate will be 496 kbps (400 kbps video + 96 kbps audio), which is too fast for a dial-up situation.

4. Select the video in the queue and click Start Queue. You will see the progress of the encoding process and be able to see the video slowly play in the progress area as each frame is encoded (see Figure 24). When the encoding process is completed, a check mark will appear in the queue beside the video you just encoded. Now you can quit the Flash Video Encoder.

A really neat aspect of the Flash Video Encoder is that it remembers the settings you applied to the video. If you ever need to return to the encoder to redo something or tweak a setting, the videos will still be listed in the queue. All you need to do is select the video, click Settings, and make further adjustments before generating another FLV file.

The next section describes how to bring the FLV file you just created into Flash Professional 8 to create a SWF file for playing in Flash Player.

Now that you've created the FLV file using the Flash 8 Video Encoder, you need to bring it into Flash Professional 8 to create a SWF file to play it in Flash Player. The major difference between using the Wizard and the Encoder is you will need to attach the skin in Flash. Here's how:

1. Open a new document in Flash Professional and drag the FLVPlayback component from the FLV Playback – Player 8 Components panel on to the Stage. You will see a black rectangle appear with an FLV icon in the middle.

   Note: Video containing an alpha channel can play back only through a Flash 8 component. You cannot use the components in the Media – Player 6-7 Components panel for this purpose.

2. Click the instance of the component on the Stage and click the Parameters tab in the Property inspector. You use this panel to set the path to the FLV file you just created and add the skin.
3. Click contentPath in the Parameters tab and then click the input area to open the Content Path dialog box.
4. Click the Browse button and navigate to the FLV you just created. Click OK to accept the selection.
5. Back in the Property inspector, scroll down the list of parameters to the Skin parameter and click the input area to open the Select Skin dialog box (see Figure 25). Click the pop-up menu and select a skin. Each choice you make appears in the Preview area of the dialog box. When you choose your skin, click OK.

   Note: One thing to keep in mind about choosing skins is that some of them (with the word "External" in the skin name) hang below the area used by the FLVPlayback component. Be sure to leave about 35 pixels at the bottom of the movie to accommodate the controls if you choose an external skin.

6. Add a new layer and drag that layer under the component layer. Add a movie clip, another video, or an image to this layer and test the movie.

   In Figure 26, I used a photo that I took of the traffic on 42nd Street in New York City. I added it to Layer 1, placed the FLV Playback component Layer 2 (above the image), and set the parameters for the video in the Property inspector.

Congratulations! You've created a Flash video file with an alpha channel that can show whatever image you want behind the talking head.

Where to Go from Here

The ability to make a video with an alpha channel constitutes a significant leap in the ability to incorporate video, talking-head video, and rather spectacular banner ads into web pages. The process in Flash doesn't require any extra hardware, software, or even advanced web development knowledge. In many respects, if you can click a mouse, you can add video to a web page.

Start playing with this technique both in a video editing application and Flash. Although I used Adobe Premiere for this discussion, both Adobe After Effects and Apple Final Cut Pro contain a number of extremely powerful keying filters. Learn how to use them.

If you have access to a video studio or your local TV station, see if you can be invited to a "green screen" shooting session. Pay careful attention to how the background is lit to reduce shadows. If you want to shoot your own video and add an alpha channel, shoot the subject against a solid—color background—a white wall or other solid color—and start playing with the resulting footage. It may not be "professional grade" but you have to start somewhere.