Captions for Video with Flash CS3

In: Articles

By Tom Green

Published on June 4, 2007

The hype that has sprung up around the release of Adobe’s CS3 Studio products has virtually ignored the one feature that many people would instantly consider a critical reason for buying the Studio or the upgrade.

If you were to believe Adobe, this is the greatest software release of all time. Meanwhile, many consumers are excited about the new features in Dreamweaver CS3, Illustrator CS3, Photoshop CS3, Flash CS3, and Fireworks CS3. Having been involved in the testing process for the apps, I can be forgiven for my indifference to the chatter. When you use it, play with it, and crash it day in and day out, you become a bit jaded. At least I was until I dug into Flash for a book I was writing and discovered a feature that no one was talking about. (Don’t believe me? As of this writing, it has yet to be mentioned by Adobe and was totally overlooked during the unveiling in March.) The feature: the captioning component in Flash Professional CS3.

If there was one thing holding back the broad acceptance of Flash video on the web, it was its sheer inaccessibility to the hearing impaired. I have to admit, when I first started talking and writing about Flash video, I overlooked the fact that people who can’t hear weren’t able to get in on the fun—until the day I received an email from a complete stranger. The message was:

I love your books and tutorials! They are very well explained. I have a question. Have you done any tutorials on how to add captions to videos? For example, there is a CC button in your Talking Head Video box. I would love to learn how to write CC for that. I am deaf and would strongly advocate for all websites that have videos to have captions but that won’t happen right away due to money and timing. I will be making a small Talking Head video introducing myself in sign language, but I want to have captions for hearing people to know what I am saying.

This bucket of ice water actually hit me on two fronts. The first was that there wasn’t much easily available information about captioning videos. It wasn’t because it couldn’t be done, it was that it just wasn’t easy. The second was the last line of the email. I had never even considered closed captions for the hearing but, when you really think about it, it is indeed a two-way street.

In response, I whipped up a Flash 8 tutorial on how to add captions to video because, to be honest, I was feeling rather guilty. This tutorial, Video Captioning, has become one of the most-viewed tutorials on my site. When I stumbled across the captioning component in Flash CS3, my first thought was about the sender of that email, because his concerns regarding money and timing were no longer an issue.

This new component is dead simple to use and, best of all, requires zero knowledge of ActionScript 3.0. It also has tremendous possibilities for Flash designers.

The nuts and bolts of the captioning component

The captioning component, which has the official name of FLVPLaybackCaptioning, is tucked in with the video components when you install Flash CS3. This component does not work solo. It must work in tandem with the FLVPlayBack component, meaning, there must be instances of both components on the stage for this one to work.

Image 1: The component is in the video components.

This component isn’t a magic bullet. Just because you drag it onto the Flash stage doesn’t mean captions will magically appear in the video. Here is what you need to do to make it work:

• Watch the video and note the times and the text.
• Create one of two types of XML documents. I’ll explain one of them shortly.
• Link the XML document to the captioning component in Flash, or embed the XML into the FLV.

As you’ll see, it’s very simple to use.

In the exercise that follows, and in the second part of this series, we are going to add captions, using both methods, to the same video. For those passionate about web standards, the first method 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 article.

Using 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:

<?xml version="1.0" encoding="UTF-8"?> <tt xml:lang="en" xmlns=http://www.w3.org/2006/04/ttaf1      xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">   <head>     <styling>       <style id="1" tts:textAlign="right"/>       <style id="2" tts:color="transparent"/>       <style id="3" style="2" tts:backgroundColor="white"/>       <style id="4" style="2 3" tts:fontSize="20"/>     </styling>   </head>   <body>     <div xml:lang="en">       <p begin="00:00:00.25" dur="00:00:03.25">         Dreamweaver users now have access to Flash video.          Didn't have it before.       </p>       <p begin="00:00:04.20"dur="00:00:03.07">         And if you were to talk to a Dreamweaver user about          three or four years ago       </p>       <p begin="00:00:08.03" dur="00:00:01.04">         and ask, "You want to put video on a web page?"       </p>       <p begin="00:00:09.11" dur="00:00:04.00">         They would look at you and go          "Yeah.Dude.Yeah.Right.Uh Huh. Next."       </p>     </div>   </body> </tt> 

As you may have gathered, the format is a bit different from what you may be accustomed to when writing an XML document. This is because you need to follow 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 will notice that 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 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.” Alternatively—and this is really a matter of taste—you can omit dur and replace it with end, which means, “This is where the caption stops being visible.”

In this example, the first caption would appear 25 milliseconds into the start of the video, and remain visible for 3.25 seconds.

Where do you get those timing numbers? You can use the time code in the FLV Encoder to find them, 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.

Here’s how to hook 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<-code>-and-the-flvplayback<-code>-components-are-on-the-stage. <-li>
3. select-the-flvplayback<-code>-component-on-the-stage-and-click-the-"/files/includes/images/images-articles-green_captions-image03.jpg" alt="Coloring the stage"/>
Image 3: The SelectSkin 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.
7. One last step: Select the FLVPlaybackCaptioning component on the stage, and click on the Parameters in the Property Inspector.
9. 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.
11. 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.

As I said, this is dead simple to do, and I would be surprised not to see video showing up on sites where it was previously banned because it wasn’t accessible. Also, don’t forget the other great use for the captioning feature—to display foreign language subtitles in videos.

Image 5: The video plays and the captions appear.

The amazing disappearing caption and how to fix it

Of course, as with anything that is supposedly simple to do, there is a gotcha. You will 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. Here’s how to deal with this one:

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 /files/includes/default.css color, in Flash, is white.
5. In the text properties, select Multiline 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 (I used the name TimedTextExample2, but you can name it anything you wish) and test it.

   Image 7: Captions under a video.

Conclusion

As you have seen, adding captions or subtitles to Flash video is no longer a complicated process. All you need to do is create the XML document, link it to the new captioning component in Flash CS3, and you are good to go. This is a major leap forward when it comes to addressing a client’s objections to using video on web pages—their concern about visitors with disabilities. The really great thing about this feature, from our perspective as designers and developers, is how simple it is to accomplish and manage. If the timing is out or a caption is wrong, you simply change a few words or numbers in the XML file.

The second method—moving the captions into a Dynamic Text box—also provides Flash designers with a rather interesting opportunity. It doesn’t necessarily have to be used for the spoken word. For example, if you have a video showing off a new car, you can actually have the features of the car being shown, and appear elsewhere on the page. The only limit placed on this technique will be the one you put on your creativity.

Most important, I can now respond to my anonymous deaf person. His reservations about web video…

I would love to learn how to write CC for that. I am deaf and would strongly advocate for all websites that have videos to have captions but that wont happen right away due to money and timing.

…are now a thing of the past and maybe, just maybe, he and I can one day engage in a rather lively two-way video conversation.

Related Topics: Flash, Accessibility, Audio