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. 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.

Share & Enjoy


 

  1. Melinda Armbrust (Reply) on Wednesday July 9, 2008

    This is awesome! I’m glad to see this as to help others add captioning. I really think it’s so important for deaf people like me to watch videos and not be left out by not knowing what people are saying on videos online. I appreciate you posting this!

  2. GMoP (Reply) on Wednesday July 9, 2008

    Thx, this is a much better solution for us than entering cue points; something most people never really figure out. XML to the rescue. Thx again.

  3. Beverley Boudreau (Reply) on Wednesday July 9, 2008

    Fantastic! Thanks for the accommodation. Now you can use the software to caption your tutorials:)
    (and please use “Deaf” or “deaf” viewers but never “hearing-impaired”)

  4. Kirsten (Reply) on Wednesday July 9, 2008

    Thank you!
    This was very helpful.
    Is there a way to start with CC turned off and then to have the button turn it on if wished? That may sound simple and dumb but when I’ve tried to set that up it breaks the button and I’m not sure why.

  5. Ewald van Es (Reply) on Wednesday July 9, 2008

    Great stuff! I have it working in an advanced video player I am building. The only question I have is how to create a multi language closed caption. Do I need multiple xml files for that or can it be done from just one xml file (the help from Adobe says you have to deal with the track parameter but I can’t figure out how) Is there anybody out there with an answer to this question?

    • Alan Kelly (Reply) on Wednesday July 9, 2008

      You must’ve gotten a reply already, but here’s what I know. If your original “source” language content is truly and accurately transcribed and closed-captioned, that’s the source for any machine translation (bot) to translate to a “target” even if bots don’t get subtleties and nuances of the “target” language, but still the machine translation serves those with no “source” In considering transcription for later purposing into machine language translations, it is best to avoid buzz words, heavy slang, although high technical material may be left untranslated (that’s good). AK

  6. cj (Reply) on Wednesday July 9, 2008

    you can embed captions in the flv, to bypass using xml, and then use a cc skin made for this purpose.

    See Captionate

  7. john dally (Reply) on Wednesday July 9, 2008

    Thank you!
    This was very helpful.
    Is there a way to start with CC turned off and then to have the button turn it on if wished?

  8. Danny (Reply) on Wednesday July 9, 2008

    Thanks, this was helpful. Is there a way to get captions to work with a video streamed from a Flash Communication Server?

  9. santiago csirke (Reply) on Wednesday July 9, 2008

    You saved my life! I was just looking for this to add it to my school project! Shakespeare’s Animated Films with close captions in Spanish, but not adult language… our slang!!!!! They’re gonna love me!

  10. oknats (Reply) on Wednesday July 9, 2008

    thank you! :D

  11. chris (Reply) on Wednesday July 9, 2008

    This is a great tutorial!

    Everything worked except numbers are not showing up in the captions and also some punctuation-any ideas?

  12. [...] For a Lee Brimelow tutorial on Closed Captioning for Flash CS3 Click on this link! [...]

  13. Jay (Reply) on Wednesday July 9, 2008

    Hi, this is a great tutorial!! Only wish i had found it sooner.

    Could you post some more info for using this to internationalize the content, i presume its something to do with the “en” statement?

  14. joel (Reply) on Wednesday July 9, 2008

    using the files listed I followed the tutorial through several times, but each time the captions that display are cut off visibly. the top half of the words are cut off. is there a way to adjust where they are placed or display on the video?

  15. djwolfo (Reply) on Wednesday July 9, 2008

    Fine, but how to automatically generate this fu… Timed Text-XML Format with Adobe Software (e.g. Sounbooth) ? Or does anybody know a converter: FLVCoreCuePoints XML (from Soundbooth) >> Timed Text-XML ??? Thanks

  16. Lori (Reply) on Wednesday July 9, 2008

    Is there a way to embed the video and other files with the export so everything is contained all in one file?

  17. [...] I stumbed upon this a few days ago whilst reading Layers magazine (a great publication). If you are a user of the (not so new anymore) Flash CS3 then you may have noticed the new Closed Captioning component.  From the looks of this article it is super easy to implement this into your video.  All you need in a n XML file! Plus you can style the text however you want! For more details follow the link. [...]

  18. Jamster (Reply) on Wednesday July 9, 2008

    This is AWESOME! Thanks! The best part is that the captions are selectable!

  19. Jamster (Reply) on Wednesday July 9, 2008

    Kirsten, you can always use the captions button component along with the captions component (in CS3 and CS4). You can always change the art on the caption button….

  20. Josh (Reply) on Wednesday July 9, 2008

    Is there any way that you can have the captioning appear at the top of the video? Any help would be much appreciated. Thanks.

  21. Eric Bersh (Reply) on Wednesday July 9, 2008

    Lee, is it possible to have a semi-transparent background for the text? I don’t want to do a solid color as it will hide too much of the video.

  22. steven (Reply) on Wednesday July 9, 2008

    hey how do i change the font size if you could email me with the response

  23. David (Reply) on Wednesday July 9, 2008

    Thank you for this information. While Its been out for a while I’m very happy to have found this post. Does anytone know of a turnkey system which will allow me to cut and past everything of not have to make everything in Flash all the time? I work for a video production company not really a web design company. I don’t know that much about flash. thanks!



Planet Photoshop Photoshop World KelbyOne Lightroom Killer Tips Scott Kelby