Captions for Video with Flash CS3 (Part Two)

In: Articles

By Tom Green

Published on July 9, 2007

In Captions for Video with Flash CS3 (Part One), we showed you how to add captions to a Flash video file using the Timed-Text XML standard. In this article, we’re going to look at another method of captioning: embedding the XML directly into the FLV file. In very simple terms, the XML document will contain the cue points for the captions. When one of those cue points is reached, the caption appears over the video.

There are actually four ways of adding cue points to an FLV. They are:

• Manually add the cue points when the FLV is created in the Flash Video Encoder.
• Add the cue points using the FLVPlayback component’s parameters.
• Add them using the addASCuePoint() method in ActionScript.
• Insert them through the use of an XML file.

The first two methods are the most problematic. Add a cue point using either method and it is hard wired into the FLV. If the timing is wrong or a change is required, your only option is to re-encode the FLV and manually add the cue points…again.

The last two methods are the most flexible. If a change is needed, it can quickly be done in the code or the XML document.

The embedding method is a bit different from the Timed-Text approach. You will be adding Event cue points to the video. When it comes to Flash video, there are two types of cue points that can be added: Navigation cue points and Event cue points. Navigation cue points navigate, seek, and are used to trigger ActionScript methods. When you create a Navigation cue point, Flash will insert a key frame at that point in the video. Event cue points are the most common. They tell Flash to do something—for example, toss up a caption—when they are encountered.

The XML used in this case is a lot different from the code in the previous article. Here’s the XML we will be using:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?> <FLVCoreCuePoints>   <CuePoint>     <Time>0240</Time>     <Type>event</Type>     <Name>fl.video.caption.2.0.0</Name>     <Parameters>       <Parameter>         <Name>text</Name>         <Value>           <![CDATA[             <font face="Arial, Helvetica, _sans" size="12">               Dreamweaver users now have access to Flash video.                Didn't have it before.             </font>           ]]>         </Value>       </Parameter>       <Parameter>         <Name>endTime</Name>         <Value>4.1</Value>       </Parameter>     </Parameters>   </CuePoint> </FLVCoreCuePoints>

This is the syntax you must use. You are opening yourself up to a world of grief if you move outside of it. The first line is the XML declaration, and the second line tells Flash that anything between the FLVCoreCuePoint tags is to be used within the various cue points.

Each cue point must be enclosed between <CuePoint> tags. The <Time> tag is the start time for the cue point. It must be expressed in milliseconds. The next tag, <Type>, tells Flash the type of cue point to expect—in this case, an Event cue point—and the tag following it is the cue point’s name.

The rules regarding the naming of cue points have been set by Adobe and can’t be bent. The <Name> tag must be fl.video.caption.2.0, followed by a series of sequential numbers which guarantee the uniqueness of the name. In this exercise, the names are fl.video.caption.2.0.0, fl.video.caption.2.0.1, and so on.

The parameters also contain the styling data for the text appearing in the caption and the end time for the caption. The <endTime> element requires a different value from that used in the <Time> element. It’s expressed in seconds rather than milliseconds, and dictates the point at which the caption disappears from the screen. Using the XML example above, the caption will appear 240 milliseconds after the start of the video and end at the 4.1-second mark.

There are a couple of other cue points that need to be added. The easiest way of doing that is to simply copy and paste the entire CuePoint element and paste it in front of the </FLVCoreCuePoints> tag. From there you simply need to change the times and the text.

Embedding XML into an FLV

With the XML document in place, let’s look at how it gets embedded into the FLV.

1. Open the Adobe Flash CS3 Video encoder. Drag the video to be captioned into the queue window. Click the Settings button to open the Encoding Settings window.
2. Name the file. I called mine FinalHead. Click the Video tab to open the video settings. To encode this particular video, I used these values:
   • Video codec: ON2VP6
   • Max data rate: 300 kilobits per second
   • Frame rate: 15

   
   Image 1. The video encoding settings are applied.

3. Click the Audio tab to open the audio settings. Reduce the audio data rate to 64 kbps (mono).
4. Click the Cue Points tab to open the Cue Points window.
5. When the Cue Points window opens, click the Browse button—it looks like a folder—to open the Load Cue Points File dialog box. Navigate to the XML file you will be using. Select it, and click the Open button.
6. When the dialog box closes, you will be returned to the Cue Points window. The Cue Points will appear.
7. Click on the first one and you will be taken to that point in the video. The parameters from the XML document will also appear.
   Image 2. The Cue Points and their parameters from the XML document are imported, intact, into the FLV.
8. Click the OK button to return to the Render queue. Click the Start Queue button to encode the video. When it finishes, quit the Encoder.

Playing an FLV with Cue Points in Flash

The final step in the process is to create the Flash file. Here’s how:

1. Open a new ActionScript 3.0 document in Flash CS3 Professional. You are going to need to use both the new FLVPlayback and Captioning components. When the new document opens, immediately save it to the same folder as the FLV.
2. Add a new layer to the timeline. Name the new layer Captions and the first layer Player.
3. Select Window > Components to open the Components panel. Drag a copy of the FLVPlayback component into the Player layer, and a copy of the FLVCaptioning component to the Captions layer. By simply dropping the FLVCaptioning component onto the Flash stage, you have enabled the use of the captions in the FLV. The thing I adore about this is it allows me to work code-free. image-3.<-strong>-the-components-are-added-to-the-flash-stage. <-p> <-li> <-ol>

   the-final-step-in-the-process-is-to-hook-the-flv-file-you-created-into-the-flvplayback-component.-follow-the”/files/includes/images/images-articles-green_captions2-image04.jpg” alt=”Selectin a skin”/>
   Image 4. The skin is selected and a Captions button is a part of the skin.

4. Double-click the Source Parameter to open the Content Path dialog box. Navigate to the FLV file. Select it and click Open. When you return to the Content Path dialog box, click OK to close it. You should see not only the FLV file in the parameters, but the Cue Points embedded into it will also appear in the Cue Points parameters.
   Image 5. The FLV and the embedded Cue Points appear in the FLVPlayback component’s parameters.
5. Save the movie and test it by pressing Ctrl-Enter (PC) or Command-Return (Mac). I’ve created an example file so you can see it in action.

Conclusion

As can see from these two articles, Flash video is well on the road to accessibility. In this article we showed you how create the XML file that contains the cue points, how to embed them into an FLV file and then, through the addition of the FLVCaptioning component to the stage, enable the captions to appear in the video.

If you have been following this series you may be wondering which method is the best method. If you are passionate about web standards, then the Timed Text way is for you. If you aren’t, either method works. In the final analysis, your client doesn’t care how you got the captions to appear; he or she only cares that they are there.

• Add to Magnolia
• Add to My Yahoo!
• Add to Newsvine
• Digg this story
• Add to Del.icio.us

Related Topics: Flash, Audio, Accessibility