Flash Accessibility Design Guidelines

Homepage > Captions

The captioning component

The captioning component, which is popularly referred to as the FLVPLaybackCaptioning, is in with the video components when you install Flash CS3. This component does not work alone is must work in with the FLVPlayBack component. This means to you that there must be instances of both components on the stage for this one to work.

Image 1: The component is in the video components.

To start you need to do the following to make it work.

1. Watch the video and note the times and the text.
2. Create one of two types of XML documents. Described below.
3. Link the XML document to the captioning component in Flash, or embed the XML into the FLV.

Steps as easy as 1 - 2 - 3

For the next step, we are going to add captions, shown using both methods, to the same video. First method considers web standards and involves the use of Timed Text captions. If you go this route, you need to follow the standard laid out by the W3C. There is a lot to it but, in a nutshell, it requires you to create a specific type of XML document using the required tags. The full specification for Timed Text can be found at the W3C.

To get started, download the files used in this demo timedtext.zip.

Step 2: Timed Text captions

The FLVPlaybackCaptioning component allows for the display of captions in the FLVPlayback component through the use of a Timed Text (TT) XML document. If you open the captions.xml document in the TimedText folder you will see, as shown below, the Timed Text.xml code used in this exercise:

Note: The format is a bit different from your normal XML document. This is due to the specification used for captioning set by the World Wide Web Consortium, and the XML document prepared for use with the captioning component must follow that standard.

You can set the styling for the text, and that each caption needs to have a start and an end point. This means each caption must have a begin attribute, which determines when the caption should appear. If the caption does not have a dur (for duration) or end attribute, the caption disappears when the next caption appears, or when the FLV file ends. The begin attribute means, “This is where the caption becomes visible.” The dur attribute means, “This is how long the caption remains visible.” You can also omit dur and replace it with end instead, which means, “This is where the caption stops being visible.”

In this example, the first caption would appear 00 milliseconds into the start of the video, and remain visible for 3.11 seconds, end time 3.11.

You can use the time code in the FLV Encoder to find the timing numbers, or the new Preview parameter in the FLVPlayback component, or you can use the time code displayed in the QuickTime or Windows Media Player interfaces. Another place would be in the video editing software used to create the video in the first place, such as RAW, or what I used for this demo is Adobe Premiere Pro.

Step 3: Link captions to FLVPlayback component

Method 1: Link the Timed Text captions to the FLVPlayback component:

1. Open a new Flash CS3 document, and be sure to choose the ActionScript 3.0 document choice in the Start panel.
2. When Flash opens, select Window -> Components to open the Components panel, and drag a copy of the FLVPlayBack and FLVPlaybackCaptioning components from the panel to the stage. The captioning component won’t be visible at run time, so feel free to drag it onto the pasteboard. Save the file to the TimedText folder.
   
   
   Image 2: The FLVPlaybackCaptioning and the FLVPlayback components are on the stage.
3. Select the FLVPLayback component on the stage and click the Parameters tab in the Property Inspector. We is now going to set the skin and link a video to the component.
4. Double click the Skin parameter to open the Select Skin dialog box shown below. Select the SkinUnderPlayCaption.swf from the Skin pop down. Click the color chip and set the color to #2065A0, or to your choice. Click OK to close the dialog box.
   
   
   Image 3: The Select Skin dialog box now lets you choose the skin color.
5. Double click the Source parameter (in the previous version of this component, this parameter was named Content ) and, when the Content Path dialog box opens, navigate to the TimedText folder and select Captions.flv. Click OK to close the dialog box.
6. One last step: Select the FLVPlaybackCaptioning component on the stage, and click on the Parameters in the Property Inspector.
7. Click once in the source parameter and enter: captions.xml. You have just linked the captions in the XML document to the video.
   
   
   Image 4: Enter the name of the document containing the captions into the source parameter and you are good to go.
8. Save and test the movie. The captions appear under the Talking Head. If you click the Captions button in the player, you can turn the captions on and off.

Simple as 1 - 2 - 3! Also, another great highlight is the captioning feature to display foreign language subtitles in videos.

Image 5: The video plays and the captions appear.

Simply create the XML document, link it to the new captioning component in Flash CS3, and you are good to go. Your client and visitors with disabilities will thank you!!! Remember, if the timing is out or a caption is wrong, you simply change a few words or numbers in the XML file. Try it out!

Method 2: Link captions below video, also if controls cover captions here's the fix

Now for the second method, which can be a great benefit. You may notice that the captions appear over the video above the controls. This works really well if the controls are under the video. If you are using the “Over” series of skins, the controls will cover the caption, Oopps!!! Here’s how to fix it, or if you just want to place your captions below the video:

1. Add a new layer to the timeline and name it “Caption”.
2. With the Caption layer selected, select the Text tool and draw out a text box under the video on the Flash stage.
3. In the Property Inspector, select Dynamic Text from the Text type pop down menu, and give the text box the Instance name of CaptionBox.
4. Select a font and point size for the CaptionBox instance. I used Arial Black 14 point for this exercise. Don’t forget to set the text color to black, because the default color, in Flash, is "white".
5. In the text properties, select Multi line from the Line type pop down menu. This will ensure that the text isn’t cut off.
   
   
   Image 6: The dynamic text box is in place and ready for some captions.
6. Click once on the captioning component on the stage, and click the Parameters tab in the Property Inspector. Use these parameters:
   
   • autoLayout : False
   • captionTargetName: CaptionBox
   • flvPlayBackName: Auto
   • showCaptions: true
   • simpleFormatting: false
   • source: captions.xml
   The key here is to set the autoLayout to false, and add the text box instance as the captionTargetName parameter.
7. Save the movie and test it.
   
   
   
   Image 7: Captions are shown under the video.

This second method of moving the captions into a Dynamic Text box also provides Flash designers with a rather creative opportunity outside of using it for spoken word. For example, if you have a video showing off a product, you can actually have the features of the product being shown, and the details or specs appear elsewhere on the page. Simple as 1 - 2 - 3...never thought you would hear that about Flash CC. =) Go have fun and try it out!

Support for embedded cue points

The FLVPlaybackCaptioning component also displays caption data contained in embedded cue points. One advantage of using FLV cue points is that caption data exists within the FLV file, reducing the number of files to track. Captionate is a captioning tool that allows authors to add cue points to FLV files.

International support

The FLVPlaybackCaptioning component supports Unicode character display. This allows caption display for non-Western languages and for special characters such as the musical note that are familiar to viewers of captioning.

Back to the Top

Posted on February 10, 2008