One of the most exciting features of the new On2 VP6 codec is its capability to utilize alpha channels within video content. Flash 8 on its own can not create a true alpha channel for a video clip — you need to use a dedicated video effects application such as Adobe After Effects 6.5 or Adobe Premiere Pro 1.5 to create a matte for the video track. The process of selecting areas of the video to mask for transparency is known as keying. Essentially, you use the video application to select a key color, which will be used to create a mask for the video. The accuracy and sharpness of a mask depend on the quality of the keying plug-in. Adobe After Effects offers several keying plug-ins to help you professionally matte your video content.
For the purpose of our coverage in the Macromedia Flash 8 Bible, we'll provide you with the QuickTime .mov files that already have masks created by Adobe After Effects Pro 6.5. The general process for keying involves a series of steps:
Acquire video footage. To successfully mask a subject in the video, you should shoot the subject against an evenly lit green screen or blue screen. You may have seen special effects footage shot on such screens, for action thrillers such as The Matrix.
Import the footage into a video effects application. Using a program such as Adobe After Effects, you can add the footage to a composition. Within the composition, you can add key filters to select the green or blue areas of the content.
Render the footage with an alpha channel. Once you have key filters in place, you can render the footage with an alpha channel. You need to use a video codec that supports alpha channels, such as the Animation codec. In After Effects, make sure you choose RGB + Alpha in the Channels menu of the Video Output settings.
Encode the footage with the On2 VP6 codec. After you have the rendered QuickTime file, you can process the file with the Flash 8 Video Encoder or Sorenson Squeeze. In the Flash 8 Video Encoder settings, make sure you choose the Encode alpha channel check box.
In the next two sections, we demonstrate how to encode alpha video footage in both Flash 8 Video Encoder and Sorenson Squeeze 4.2.
In this section, you learn how to compress footage of our dog Stella that was shot against a green screen. The footage already has an alpha channel that was created in Adobe After Effects. You superimpose the footage of Stella on a static .png image imported into a Flash document.
On the CD-ROM |
Make a copy of the stella_alpha.mov file found in the ch17/source folder of this book's CD-ROM. |
Open Sorenson Squeeze 4.2, and import your copy of the stella_alpha.mov file.
From the Format & Compression Settings pane, expand the Macromedia Flash Video grouping and drag the VP6_256K_Stream preset to the job list.
Once the preset is added to the clip, expand the preset below the source clip. Double-click the VP6 Pro codec listing to open the Audio/Video Compression Settings dialog box. Within the Video area of the settings, choose 2-pass VBR in the Method menu. For Frame Rate, choose 1:1. Select the Compress Alpha Data check box. Select the Auto Key Frames Enabled check box. Review the settings shown in Figure 17-41. Click OK to accept the new settings.
Click the Squeeze It! button to begin the encoding process. When Squeeze finishes, rename the new .flv file to stella_alpha.flv.
Tip |
You can modify the output destination and filename from Squeeze by right-clicking the preset's name in the job list and choosing Modify Output File Name. |
In Flash 8, open the live_action_starter.fla from the ch17/alpha_live_action folder of this book's CD-ROM. Save the document as live_action.fla, in the same location as the .flv file created in Step 4. This document already has a background .png image on the Stage, as well as a masked image of a branch near the trail.
Create a layer named vWin, and place it between the bg_mask and bg layers.
Open the Library panel (Ctrl+L or z+L). Click the options menu of the panel (in the top-right corner) and choose New Video. In the Video Properties dialog box, choose Video as the Type option (see Figure 17-42). Click OK.
Drag an instance of the new Video symbol from the Library panel on the Stage, at frame 1 of the vWin layer.
Select the new Video instance, and in the Property inspector, name the instance vWin. Set the width to 152 and the height to 180. Position the X value at 154 and the Y value at 180. See Figure 17-43.
Note |
The dimension 152 x 180 uses the same aspect ratio as that of the source clip. |
Create a new layer named actions, and place this layer at the top of the layer stack. Select frame 1 of the actions layer, and open the Actions panel (F9, or Option+F9). Add the following code. The code creates a new NetStream instance to play the stella_alpha.flv file, and attaches the stream to the vWin instance.
var vWin:Video; var nc:NetConnection = new NetConnection(); nc.connect(null); var ns:NetStream = new NetStream(nc); ns.play("stella_alpha.flv"); vWin.attachVideo(ns);
Save the Flash document, and test it (Ctrl+Enter or z+Enter). The footage of Stella should be superimposed between the graphic of the branch and the forest background, as shown in Figure 17-44.
On the CD-ROM |
You can find the completed files in the ch17/alpha_live_action folder of this book's CD-ROM. |
You can also export 3D modeling video from your preferred 3D application. Most 3D applications can export video footage rendered with an alpha channel. In this section, you take a 3D model of a wasp and render it as an animating video mouse cursor in the Flash movie. If the cursor is near the top of the movie, the wasp video scales smaller. As the cursor moves to the bottom of the movie's Stage, the video scales larger.
On the CD-ROM |
Make a copy of the wasp_alpha.mov file from the ch17/source folder of this book's CD-ROM. |
Note |
Many thanks to Beau DeSilva at Schematic for creating the awesome video footage of the wasp. |
Open the Flash 8 Video Encoder application. Add the wasp_alpha.mov file to the queue.
With the clip selected, click the Settings button. In the Flash Video Encoding Settings dialog box, choose the Flash 8 - Medium Quality encoding profile. In the Encoding tab, select the Encode video alpha check box.
Choose the Crop and Trim tab, and enter 140 for the left and right trim values. Enter 40 for the bottom trim value (refer to Figure 17-45).
Go back to the Encoding tab, and check the Resize video box. Type 185 for the width, and 221 for the height. Click OK to accept the new settings.
Click the Start Queue button to begin the encoding process.
When the wasp_alpha.flv file is finished rendering, go to Flash 8 and open the 3D_model_starter.fla document in the ch17/alpha_3D_model folder. Save this document as 3D_model.fla, in the same location as the wasp_alpha.flv file.
Create a new layer named vWin, and place the layer above the bg layer. Repeat Steps 7 and 8 from the previous exercise, creating a new Video object on frame 1 of this layer.
Name the instance vWin in the Property inspector. Even though the wasp_alpha.flv has different dimensions than those of the vWin instance, you do not need to change the width and height in the Property inspector. You add ActionScript code that dynamically resizes the instance in the next step.
Create a new layer named actions, and place it at the top of the layer stack. Select frame 1 of the actions layer, and open the Actions panel. Add the code shown in Listing 17-7. The core features of the script are outlined in the following list:
ns.onStatus: This handler detects status changes with the video playback. When the video reaches the end of the clip, the NetStream.Play.Stop event occurs. At that point, the video should rewind and automatically repeat. The seek() method can go to a new point in the clip and resume playback.
ns.onMetaData: This handler is invoked when the .flv file's metadata is loaded. Here, the vWin instance's width and height are set to the true width and height of the .flv file. Because onMetaData() fires whenever the video repeats, the bInited variable makes sure that the vWin instance is only resized once. After the instance is sized, the onMouseMove() handler is invoked to set the initial scale of the vWin instance.
onMouseMove: This handler fires whenever the user moves the mouse cursor. Here, the scale of the vWin instance is set to a factor of the mouse's Y position (_ymouse/4). The vWin instance is also snapped to the mouse cursor's position.
Listing 17-7: Using Alpha Video as a Mouse Cursor
![]() |
var vWin:Video; var bInited:Boolean; var nc:NetConnection = new NetConnection(); nc.connect(null); var ns:NetStream = new NetStream(nc); ns.onStatus = function(oInfo:Object):Void { if(oInfo.code == "NetStream.Play.Stop"){ this.seek(0); } }; ns.onMetaData = function(oData:Object):Void { if(!bInited){ vWin._width = oData.width; vWin._height = oData.height; bInited = true; onMouseMove(); } }; onMouseMove = function(){ vWin._xscale = vWin._yscale = _ymouse/4; vWin._x = _xmouse - (vWin._width/2); vWin._y = _ymouse - (vWin._height/2); updateAfterEvent(); }; vWin.attachVideo(ns); ns.play("wasp_alpha.flv"); Mouse.hide();
![]() |
Save the Flash document, and test it (Ctrl+Enter or z+Enter). The video loads into the vWin instance, and as you move the mouse cursor, the wasp video scales based on the cursor's location, as shown in Figure 17-46.
On the CD-ROM |
You can find the completed files in the ch17/alpha_3D_model folder of this book's CD-ROM. |
Web Resource |
We'd like to know what you think about this chapter. Visit www.flashsupport.com/feedback to send us your comments. |