With the release of Flash CS3, Adobe has made the process of adding closed-captioning information to video files a whole lot easier. Taking the time to provide captions for your video is not only helpful for hearing-impaired viewers, but captions are also very useful for those times when people just can’t listen to audio.

[If you’d like to download the files used in this tutorial to practice these techniques, click here to download the images for the flash tutorial. All files are for personal use only.]

1 GET THE FILES
Download the exercise files for this tutorial at www.layersmagazine.com and unzip them to your desktop. The files consist of a QuickTime video named captions.mov and an XML file named captions.xml, which will serve as the template for the caption information. The new FLVPlaybackCaptioning component in Flash allows you to easily incorporate captions from an external Timed Text (TT) XML file. The Timed Text format is a standards-based method of representing captioning information. The first step in the process is to write this XML file with your captions.

2 OPEN THE CAPTION FILE
Open captions.xml in your favorite editor. We’re using Dreamweaver CS3 as it has many handy features for editing XML files. You can use this XML file as a template for your future projects. Lines 1 and 2 are required and should never change. Lines 4 thru 8 define the head block, which contains styling information for the captions. Lines 10 thru 14 define the body block where your captions will be entered. Line 12 shows the format that the captions use followed by the actual caption. This paragraph tag can contain a begin time, a duration time, and a style definition.

3 ENTERING THE CAPTIONS
Open up the video file in a player that displays the playhead time. You’ll need to play the video and each time there is an appropriate break for a caption, pause the video and enter the information in the XML file. Unfortunately there is no easy way of automating this process without buying additional software. Each caption should be on its own line using the paragraph tag as shown in line 12 in the previous step. For each caption, enter the begin time and a duration time in the format of HH:MM:SS.m. For a complete list of possible parameters, look in the Flash help files.

4 SET UP THE FLASH MOVIE
Open Flash CS3 Professional and from the welcome screen, choose Flash File (ActionScript 3.0). Rename the first layer on the timeline to “video,” as it will contain the video and captioning components, and click anywhere on the Stage. In the Property inspector change the Frame Rate of the movie to 30. Create a new folder for your project and save this Flash file as captions.fla. Then, move your edited captions.xml file into this folder, as well.

5 IMPORT THE VIDEO
Select the first keyframe in the video layer. Select File>Import>Import Video. In the Import Video dialog, browse to the captions.mov video file and click Continue. Choose Progressive Download From a Web Server as the deployment type for your video, which will keep it externally from your Flash file and is appropriate for most situations. Click Continue. Choose an appropriate encoding method and click Continue. From the Skin menu, select SkinUnderPlayMuteCaptionFull. You need to choose a skin with the caption button included if you want to be able to toggle the captions on and off. Click Continue and then Finish to import the video onto the Stage.

6 ADD THE CAPTION COMPONENT
Now that you have the video component on the Stage, the next step is to add the captioning component. Open the Components panel by pressing Command-F7 (PC: Ctrl-F7). Twirl open the Video folder and drag out FLVPlaybackCaptioning onto the Stage. If there is only one instance of the FLVPlayback component on the stage, the captioning component will automatically hook itself up to the video component. Don’t worry about where you place the component, as it won’t be visible when you view your movie.

7 SET UP THE COMPONENT
The first thing needed to set up the captioning component is to point it to your XML file. With the captioning component selected on the Stage, open the Component Inspector by pressing Shift-F7. Set the Source property to captions.xml. Test the movie by pressing Command-Return (PC: Ctrl-Enter). You should see your captions display as the video plays. You can toggle the captions on and off by pressing the caption icon on the player. If you’re satisfied with the default look of the captions then you can stop here. The rest of this tutorial will explain how you can style the captions.

8 STYLING OVERVIEW
More than likely you’ll want to customize the look and feel of the captions in some way. Any style information needs to be added to the captions.xml file. In the Flash CS3 implementation of the Timed Text format you have the ability to change the font family, font color, font size, background color, text alignment, and text justification. For those familiar with CSS and HTML, styling the captions will be a very straightforward procedure.

9 CUSTOMIZING THE FONT FAMILY
Open up the XML file again in your editor. In the head block remove the “Add styles here” comment line. Enter the code shown in the graphic above. Within the code you’re creating a new style tag with an id of 1 and are setting the fontFamily property to _sans. Unfortunately, you can’t set the font to any old font on your system. You’ll need to set it to one of the device fonts in Flash. Your options include _sans, _serif, and _typewriter.

10 OTHER FONT OPTIONS
You can continue adding new style properties to the style tag. In the example shown above, we’ve added styles for the font color, weight, and size. The color property needs to be set with a valid hexadecimal color value, so we’re using #FFFFFF which will color the text white. We set the font weight property to bold to help it stand out better against the video, and finally, we set the font size property to 16. You should, of course, customize these values to your own liking.

11 CUSTOMIZE THE BACKGROUND
You have a couple of options available for customizing the background for the captions. The background color property can be set to a value of transparent to make Flash not render the background. This can make the captions hard to read depending on the color of your video. You can also set the background to a valid hexadecimal value similar to the font color property. In the code shown above, we set the background to transparent. Now that you’ve defined the style for your captions, you need to assign that style id to each caption by typing style=“1” after the duration time in each paragraph tag.

12 TEST THE FINAL MOVIE
Save the XML file and jump back over to Flash. Test the movie by pressing Command-Return (PC: Ctrl-Enter). You should now see your styled captions display as the movie plays. (To learn more about the full set of options available to you when using the FLVPlaybackCaptioning component, consult the Flash help files.) Taking the time to add captions to your videos is an important step towards improving the accessibility of your Flash movies. In government and educational settings you’ll more than likely be required to implement them into your projects.

More on Captions

In a previous issue of Layers (Sept/Oct 2006, p. 74), we showed how you could add simple captions using embedded cue points for scene changes. This technique works but it’s not best suited for doing full-blown closed-captioning as in this example. It’s much better to keep your caption text in an external file so that they can be easily updated later without having to re-encode the video file. This will also make things much easier if you need to internationalize your content so it can be translated simply by using a text editor. Using the Timed Text format also automates the process of doing captions as you can use the FLVPlaybackCaptioning component.

If you plan on doing a lot of captioning work, you may want to consider some dedicated software to help you out. MAGPie (http://ncam.wgbh.org/webaccess/magpie) is a popular free tool that runs on both Windows and Mac for creating Timed Text captions. Captionate (www.buraks.com/captionate) is a Windows-only tool for doing Flash video captioning and is very popular in the community.