Video support in Flash is nothing new. In Flash 8, however, video support has been improved dramatically. Both the new FLVPlayback component and support for an 8-bit alpha channel open up new possibilities for Flash animators and developers.
In the past, any Flash “alpha” video had to be hacked together-with less than satisfactory results. In Flash 8 you simply link to a Flash Video (FLV) file that has an alpha channel, and that’s it-any objects or animations will show through in the background. This results in vastly improved user experiences in your video-based Flash applications.
This article will help you to get started creating and importing alpha videos into Flash. You will key a sample video file and see a simple application that demonstrates the new alpha video technology. If you are a Flash developer who is interested in gaining a basic knowledge about keying your video and incorporating it into your applications, then this article is for you.
So How Does This All Work?
Alpha video in Flash 8 is now available thanks to the incorporation of the On2 VP6 video codec in Flash Player 8. In addition to offering a huge increase in quality over the old Sorensen codec, On2 VP6 enables you to encode an 8-bit alpha channel directly into FLV files.
Users familiar with video editing will know that creating alpha channels is a fairly straightforward process. Any popular video editing application can do this, such as Adobe After Effects, Apple Final Cut Pro, and the Avid suite of products. With the Flash Video Encoder (which works with any of these products), creating alpha channels is as simple as selecting a check box during export to incorporate your alpha channel.
Shooting Alpha Video for Dummies
Green- and blue-screen technology is widely used in film and video for keying (short for chroma keying)-the process of extracting a specific color range from a video and replacing that color with transparency (alpha). This technique is commonly used to insert stock footage into a background or composite two scenes into one. To do this, you shoot video against a green- or blue-screen background and then remove it easily in the editing environment.
This process has been around for years in the movie and TV industries but only recently has it become accessible to the general public. When prepping a video for keying, it is important to keep the following in mind:
Shoot the video against a solid green- or blue-screen background. Consistent use of that color is critical.
Use a high-quality video camera if possible. Video captured with a webcam, for example, can be very difficult to key because of the high level of visual noise. MiniDV is more difficult to key than higher quality, lower compression formats.
Know your camera. Because every camera is different, find out what settings it has before you start filming. Here are a few questions to keep in mind when doing this:
Does your camera have white-balance controls?
Does it have autofocus?
Does it have any color-enhancement settings you can use?
For example, in a test shoot our character had a nice orange color before we started shooting it against a solid blue background. However, in our first attempt at filming, the character turned red and the blue background turned dull gray. So, if you can, lock your white balance before shooting. Refer to your owner’s manual to achieve the best results you can. This applies to locking your camera’s focus too. For a quick result, place a test object on the screen, find the perfect focus level, and then lock it. Or just turn off the autofocus feature altogether and focus manually.
Light your set and characters properly. In general, you have more control over your lighting in a studio setting. However, you can also shoot in an area that has a solid light source, such as floodlights or outdoors.
Shoot lots of video. Video shoots are usually costly and time-consuming to set up, so always film more than you think you’ll need. You can always edit it down later. Reshooting scenes later may be difficult.
Keep notes. Because you will want to shoot lots of video, take notes of the time indexes of nice-looking shots. Notes don’t have to be full of details; just take down the minutes and seconds where the clip starts.
Test, test, and then test again. We all do this when programming, so why not apply that to video? Take some time for test shots-the more time you can spend testing, the better. Bring five-second shots into your video editing program and see how the colors turn out, and how easy it is to remove the background from your video. If it doesn’t look right, change some settings and try again.
Ultimately if your project requires high-quality video, you will most likely need to hire professional studio and video personnel to film your video for you. If this option is not available, then rent some professional video equipment and set up your shoot in your basement or back room, where you can control the environment the best. For experimental work, you should be able to get away with a consumer camcorder and some bright reading lights.
Keying 101
This section looks at one of the simplest ways to key video for use with Flash 8. The sample files that accompany this article include a video file (Sample.mov), located in the assets directory, with which you can play. Note that the process of keying a video varies from video to video and application to application. The basic process follows these steps:
Create a new project in After Effects (File > New Project).
Create a composition (Composition > New Composition). In the Composition dialog box, select your video options and set the size, length, and other settings that may apply to your project. In the case of this sample, use a size of 640 x 480 with a duration of 4:24 (the size and length of the Sample.mov file).
Import your source video file (File > Import > File). Find the Sample.mov file, click Open, and drag it to your work area.
Open the After Effects Filters panel (Windows > Effects & Presets). You will see a category called Keying.
The Keying category shows the default keying effects you can use with After Effects.
You can also use plug-ins to expedite this process. If you plan to create a lot of alpha videos, or your project has the budget to cover the cost, you might want to look into using them.
In this case, use the Color Key effect, which simply extracts the color that closely matches the source color you choose. Drag this effect from the Effects Panel onto your video. Don’t worry about ruining your source file; After Effects uses layers to control effects.
Select the eyedropper to the left of Key Color and select the background color of your video.
The first option below Key Color is Color Tolerance. This slider tells After Effects how much color in the range of the selected background color to remove. For this example, choose a setting of about 54, which removes an adequate amount of color.
The second option, Edge Thin, “pulls” in the color bounds around your subject, removing color that the Tolerance setting couldn’t remove. You don’t need to adjust this setting for the First Color Key effect.
The third setting, Edge Feather, softens the edges from where the color was removed. Setting this to 1.1 gives your video a softened, more final look.
Note: Keep in mind when creating your own alpha video that keying is not the only option available to you. You can also set custom masks, manually erase the background (good for cleaning up open areas that keying cannot remove), or find a plug-in that does a lot of the keying for you. Macromedia video pros recommend dvMatte Pro AE when working with plug-ins for Adobe After Effects. Try different techniques to see what works for you.
When working with the Sample.mov file, I found it necessary to layer four color keys onto the video. What this does is remove the different ranges of green from the background. Figure 2 shows the settings I used. Doing this removes a majority of the background color. You could also use the Eraser tool to remove other color remnants to finalize the video.
Export this video as an FLV file. If you installed Flash 8, you’ll see an Export to FLV option in After Effects. Select File > Export > Macromedia Flash Video (FLV), name the file Sample.flv, and click Save. This opens the Flash Video Encoder settings dialog box, in which you can change your FLV settings.
If you don’t have After Effects, or you have another video editing application that doesn’t support the FLV format, then export to another video format that supports alpha channels and use the Flash 8 Video Encoder to convert your file to the FLV format. Keep in mind that using the actual Flash Video Encoder has a few benefits over the After Effects FLV Encoder option. For example, you can add cue points to your video before encoding. Using this feature can save you lots of time and effort later on. Flash 8 Video Encoder also supports the crop and trim options.
To encode the alpha channel, click the Show Advanced Settings button and click the Encode Alpha Channel option (see Figure 3). You can change the other settings as required. However, other than the Encode Alpha Channel feature, the default settings are fine for this example. After you select your settings, click OK. The FLV file will be saved to the location you chose earlier.
Importing and Using Alpha Video
Now that you have your new alpha video file, import it into Flash. The new video import wizard in Flash 8 uses a four-step process to import your videos (File > Import Video):
The first screen enables you to browse for your FLV file. Locate the Sample.flv file in your assets folder and click Next.
The second screen enables you to specify up to four settings for deploying your video. For this demo, use the default option Progressive Download from a Web Server. Click Next to continue.
The third screen is where you apply your skin to the video player. Select the skin you would like from the pop-up menu and click Next.
That’s it! You will see a confirmation screen of your import. Click Finish. The FLVPlayback component will be dumped on the Stage for your use. Note that you can’t see a live preview of your FLV file in the Flash IDE. You need to publish your file to see the results.
I have created a simple demo that uses four pieces of alpha video. It shows how you can use multiple videos at once, change backgrounds at runtime, and yet use the interface controls under the video files. It also uses some of the new Flash 8 video features such as the FLVPlayback component. Play the demo below; the source is available as part of the ZIP sample file that accompanies this article.
Play the demo: Alpha Video in Action
Where to Go from Here
The possibilities with using alpha video are endless. You can dynamically change the background of a video, integrate video into traditional animation and games, or overlay an interactive guide over your content with no loss of quality. (See the Sample.fla file found in the ZIP sample for an example). Bear in mind that the use of video comes with a steep bandwidth penalty-evaluate your target market before including video in your commercial projects.
The scope of this article covers only the basics of alpha video. There is no dearth of resources available to you if you would like to probe further into this subject. Start with the following resources:
Creating Light Spill for Better Composites by John Starr Dewar
Chroma Key Lighting by Studio 1 Productions
Chroma Key Basics for DV Guerrillas – Part 1 by Charles Roberts AKA Chawla
Wes Gorgichuk is a Flash developer with gskinner.com, an industry-leading Flash development company. Over the past five years he has worked in all aspects of multimedia, from designing to progamming and everything in between. But Flash has always been his passion. Walt Disney said it best: “It’s kinda fun to do the impossible”and it is, especially with Flash.
