Basic knowledge of Flash and ActionScript 2.0. If you already have an FLV file captioned with Captionate, you can skip ahead to learn how to display the captions using the FLVPlayback skins with captioning support.

User level

Beginning

Additional Requirements

Flash Professional 8 or

Flash CS3 Professional

FLVPlayback Skins with Captioning Support extension

Download from the Flash Exchange

Captionate from the Manitu Group

Learn more

Note: While it may be helpful to have this Flash video captioning solution to follow this article, it is not necessary. If you do not yet own Captionate, e-mail the makers of Captionate at support@captionate.com for a trial version or purchase the application from them directly. Captionate costs approximately US$60.

The FLVPlayback component skins with captioning support make it easy to provide captions for Flash video without having to write a lot of ActionScript code. The skins were originally developed to display captions embedded in FLV (Flash video) files using Captionate, but they will also display captions embedded in specially formatted Flash Video Encoder or ActionScript cue points.

This tutorial teaches you how to add captions to your Flash video files using Captionate or cue points, and how to display those captions in a Flash movie using the FLVPlayback component and the FLVPlayback component skins with captioning support.

Note: These skins are for use with the Flash Professional 8 and ActionScript 2.0 version of the FLVPlayback component. If you are doing a project targeting Flash Player 9 and ActionScript 3.0, you should use the ActionScript 3.0 version of the FLVPlayback component in Flash CS3 Professional, the FLVPlaybackCaptioning component, and a Timed Text XML file (DFXP). You can find more information in the Adobe Flash CS3 accessibility design guidelines.

Before you get started with this tutorial, you may wish to watch a presentation by the author about captioning an FLV file:

Demo: Captioning an FLV file using Captionate (4:00)

Transcribing your video

The first step to captioning your Flash video is to create a transcript in digital format. Type your transcript into a text file using a carriage return to delimit each caption. You can use Flash-compatible HTML tags to style your text or to add a line break within a caption; for example:

( whispering ): Quiet please.

Transcribe all dialog and any meaningful sound effects, such as a door knocking or a telephone ringing, in your video. You can use Unicode characters in your transcript.

While Captionate provides a data structure for defining an array of the speakers in your caption tracks, it may make sense to indicate changes in speaker in the transcript file (as in the following example), so that the file can be used for a plain-text transcript as well:

        <p><i>( speaking French ): </i><br/><b>George:
    </b> Bonjour, Marie.</p>

<p><b>Marie: </b> Bonjour, George.</p>

<p>Voilà une sucette.</p>

<p><b>George: </b> C'est pour moi?</p>

<p><b>Marie: </b> Oui, c'est pour toi.</p>

<p><b>George: </b> Merci, Marie!</p>

<p><b>Marie: </b> De rien, George.</p>

To learn more about conventions in captioning and how to format your transcript, you may find helpful the Suggested Style Guide provided by the Caption Center of the Media Access Group at WGBH-TV, the public television station in Boston, Massachusetts.

Adding captions to your video using Captionate

After you create a transcript text file, you will want to embed the caption data and assign times to the captions using Captionate.

Captionate from the Manitu Group is a desktop application for Windows that embeds data into FLV files. The embedded data can then be retrieved from the FLV file as the video is played through Flash Media Server or by progressive download. Captionate provides an easy-to-use interface for entering and editing the data, and for previewing the FLV file.

Captionate supports three types of embedded data with different properties:

Markers define simple cue points with an optional string label.
Captions define multiple language tracks of caption or subtitle data.
Cue points are defined using the Flash cue point format. Cue points can have an optional and variable number of Name:Value pairs and type information as Navigation or event.

I'll use the captions format in this tutorial, but I will also explain how to define captions using Flash cue points that are compatible with the FLVPlayback component skins with captioning support.

Captionate has thorough help documentation that I won't attempt to reproduce here. Instead, I'll focus on how to import caption data from a plain-text file:

Launch the Captionate application.
Select File > Open from the File menu and browse to locate and open the FLV file to which you intend to add captions. The file will open into the main Captionate window (see Figure 1).

Figure 1. Main Captionate window

Select File > Import > Captions from Plain Text, which will open the Import from Plain Text dialog box (see Figure 2), which enables you to import lines from a plain-text file and type or paste any text, which will be converted to captions.

Figure 2. Importing captions from plain text

Enter the name of your text transcript file into the File Name text box or click the button labeled with an ellipsis (...) to browse for the file. Click Import to load the text file into the text area labeled Text for caption conversion. Click OK to convert the text to captions and to transfer the new captions to the Assign Caption Times dialog box (see Figure 3).

Figure 3. Assigning caption times

In the Assign Caption Times dialog box, press F9 to start the video preview.
Press F12 repeatedly while the video is playing to assign a caption in the captions list to the current playhead time. Here are a few keyboard commands that you may find helpful while previewing the video:
- F9: Play/Pause
- F12: Assign Time
- F5: Go back 10 seconds
- F6: Step back 0.5 seconds
- F7: Step forward 0.5 seconds
- F8: Go forward 10 seconds
- ALT+F9: Stop
Click OK to close the Assign Caption Times window and return to Captionate's main window after you have assigned a time to each caption. The newly imported captions with their assigned times will appear in a list under the Captions tab (see Figure 4).

Figure 4. Captionate main window showing captions and their assigned times

In the main window, you can edit caption properties in place. When you select a caption property, the playhead goes to the time code of the caption unless View > Do not Seek Selected Item Time is checked. You can adjust the playhead position using the timeline controls and assign the current playhead time to a selected caption by pressing F3 or by selecting Utility > Set Item Time to Playhead Time.
Note that if the Video Preview Window is open, the times to which you can seek can only correspond to the time codes of key frames in the preview video. In order to be able to seek to any time, Captionate provides the option to use the audio of the current FLV file for preview. Select File > Choose Video for Video Preview, and select "Use the audio from the current FLV file" from the list of choices for the video preview. Click OK. The Video Preview window will open using only the audio of the current FLV file, and you will be able to seek to any time in the file.
Test the FLV file by selecting Utility > Test FLV or by pressing Ctrl+Enter.
Select File > Save or press Ctrl+S to save the FLV file with the embedded caption data when you have finished entering your captions and adjusting the caption times.

The captioned FLV file is now ready for use with the FLVPlayback skins with captioning support. You can close Captionate.

Displaying the captions

If you haven't already, download and install the Captioned FLVPlayback Skins extension from the Flash Exchange. (You may also need to download and install the Adobe Extension Manager if you don't already have it installed on your machine.)

Open Flash Professional 8.
Create a new Flash document by selecting File > New > Flash Document.
Save the Flash Document (FLA) file to a working directory.
Drag and drop an instance of the FLVPlayback component from the Components panel to the Stage. Select the component and assign an instance name to it in the Properties inspector (for example, myFLVPlayback_flvp).
Click the Parameters tab for the FLVPlayback component instance. Set the contentPath as the path to the captioned FLV file.
Select Skin in the Parameters tab for the component. Click the magnifying glass icon button to open the Select Skin dialog box.
Choose one of the "captioned" skins from the pop-up menu (for example, CaptionedSteelExternalAll.swf).
Set autoPlay to false in the Parameters tab. From an accessibility standpoint, it is preferable for video playback to be user-controlled.
Press Ctrl+Enter to test the movie.

The FLVPlayback component skin controls will include a CC button for toggling the display of the captions. With the caption display toggled on, the captions will appear automatically as the video plays.

If all you want is captions on the screen, you're done. Read on if you want to customize the display further.

Customizing the caption display

The FLVPlayback component skins with captioning support have several properties that can be set at runtime using ActionScript. Here are the properties and their default values:

        captionDisplay.toggled = false;
captionDisplay.font = "_sans";
captionDisplay.textSize = 16;
captionDisplay.textColor = 0xFFFFFF;
captionDisplay.textShadowColor = 0x000000;
captionDisplay.backgroundColor = 0x000000;
captionDisplay.backgroundAlpha = 60;
captionDisplay.embedFonts = false;
captionDisplay.overlay = true;
    

Because captioning support is built into the skin, the skin must be loaded before you can change any of the properties of the caption display. You can make sure the skin is loaded by listening for the skinLoaded event dispatched by the FLVPlayback component. The ActionScript below shows how to toggle the captions on once the captioned skin has loaded:

        // define a listener object
var listenerObject:Object = new Object();
// define a skinLoaded event handler
listenerObject.skinLoaded = function (eventObject:Object):Void
{
    // this is technically a hack since the skin_mc is
    // a private property of the FLVPlayback component 
    var captionDisplay =
    eventObject.target.skin_mc.captionDisplay;
    if(captionDisplay){
        // Toggle the captions on
        captionDisplay.toggled = true;
    }
}
// register listenerObject to handle "skinLoaded"
    event.
// this code assumes that your FLVPlayback component
    instance is
// named "myFLVPlayback_flvp"
myFLVPlayback_flvp.addEventListener("skinLoaded",listenerObject);
    

The caption text gets its formatting from a TextField.StyleSheet that can be accessed using the captionDisplay.styles property. The default styles are defined by a style named body. You can override or add to the default style definition by changing the style properties of the body style. The following ActionScript example demonstrates how to center the text for all captions:

        // define a listener object
var listenerObject:Object = new Object();
// define a skinLoaded event handler
listenerObject.skinLoaded = function (eventObject:Object):Void
{
    // this is technically a hack since the skin_mc is
    // a private property of the FLVPlayback component 
    var captionDisplay =
    eventObject.target.skin_mc.captionDisplay;
    if(captionDisplay){
        // create a copy of body style object
        var bodyStyle = captionDisplay.styles.getStyle("body");
        // add textAlign property to center-align text
        bodyStyle.textAlign = "center";
        // override to default body style with the
        // centered text style
        captionDisplay.styles.setStyle("body",
  bodyStyle);
    }
}
// register listenerObject to handle "skinLoaded"
    event.
// this code assumes that your FLVPlayback component
    instance is
// named "myFLVPlayback_flvp"
myFLVPlayback_flvp.addEventListener("skinLoaded",listenerObject);
    

For maximum flexibility, you can define styles using an external stylesheet, which can be loaded at runtime as in the following example:

        // define a listener object
  var listenerObject:Object = new Object();
// define a skinLoaded event handler
listenerObject.skinLoaded = function (eventObject:Object):Void
{
    // this is technically a hack since the skin_mc is
    // a private property of the FLVPlayback component 
    var captionDisplay = eventObject.target.skin_mc.captionDisplay;
    if(captionDisplay){
        // load external stylesheet
    "captions.css"
        captionDisplay.styles.load("captions.css");
    }
}
// register listenerObject to handle "skinLoaded"
    event.
// this code assumes that your FLVPlayback component
    instance is
// named "myFLVPlayback_flvp"
myFLVPlayback_flvp.addEventListener("skinLoaded",listenerObject);
    

Assigning tab indexes

The FLVPlayback component skins with captioning support were designed with keyboard and screen reader access in mind. The class mx.video.skins.AccessibleSkin assigns a text label to each of the FLVPlayback controls. The AccessibleSkin class also provides the method assignTabIndexes for assigning tab index values to the FLVPlayback controls and incorporating them into the logical tab order of your Flash application. The assignTabIndexes method accepts a start index as a numeric parameter, iterates through the FLVPlayback controls assigning a unique tab index value to each control, and returns the next available tab index number.

        // The starting tabIndex for the FLVPlayback controls
var nextTabIndex:Number = 10;
// define a listener object
var listenerObject:Object = new Object();
// define a skinLoaded event handler
listenerObject.skinLoaded = function (eventObject:Object):Void
{
    // this is technically a hack since the skin_mc is
    // a private property of the FLVPlayback component 
    var accessibleSkin = eventObject.target.skin_mc.accessibleSkin;
    if(accessibleSkin){
        // It's best to wait a frame until
        // all FLVPlayback controls initialize
        var intID:Number;
        intID = setInterval( function(){
            // assign tabIndexes starting at nextTabIndex
            nextTabIndex =
  accessibleSkin.assignTabIndexes(nextTabIndex);
            // trace the next tab index after
            // FLVPlayback controls
            trace( nextTabIndex );
        clearInterval(intID);
        }, 100 );
    }
}
// register listenerObject to handle
"skinLoaded" event.
// this code assumes that your FLVPlayback component
    instance is
// named "myFLVPlayback_flvp"
myFLVPlayback_flvp.addEventListener("skinLoaded",listenerObject);

    

Creating a new captioned skin

The best way to create a captioned skin SWF file is to copy one of the skin files that come with the FLVPlayback Skins with Captioning Support extension and use it as a starting point.

Note: The installation location for FLVPlayback component skins has changed from Flash Professional 8 to Flash CS3 Professional.

Using Flash Professional 8

You can find the FLA files for all the captioned skins in the following folder:

Windows: Hard Disk\Documents and Settings\user\Local Settings\Application Data\Macromedia\Flash 8\language\Configuration\SkinFLA
Mac OS: Hard Disk/Users/user/Library/Application Support/Macromedia/Flash 8/language/Configuration/SkinFLA

You can find the published SWF files for all the captioned skins in the following folder:

Windows: Hard Disk\Documents and Settings\user\Local Settings\Application Data\Macromedia\Flash 8\language\Configuration\Skins
Mac OS: Hard Disk/Users/user/Library/Application Support/Macromedia/Flash 8/language/Configuration/Skins

Using Flash Professional CS3

You can find the FLA files for all the captioned skins in the following folder:

Windows: Hard Disk\Documents and Settings\user\Local Settings\Application Data\Macromedia\Flash 8\language\Configuration\FLVPlayback Skins\FLA\ActionScript 2.0
Mac OS: Hard Disk/Users/user/Library/Application Support/Macromedia/Flash 8/language/Configuration/FLVPlayback Skins/FLA/ActionScript 2.0

You can find the published SWF files for all the captioned skins in the following folder:

Windows: Hard Disk\Documents and Settings\user\Local Settings\Application Data\Macromedia\Flash 8\language\Configuration\FLVPlayback Skins\ActionScript 2.0
Mac OS: Hard Disk/Users/user/Library/Application Support/Macromedia/Flash 8/language/Configuration/FLVPlayback Skins/ActionScript 2.0

If you wish, you can customize the captioned skins following the guidelines for Creating a new skin in the Flash 8 documentation, but they have a few additional features. The captioned skins include library symbols for defining the Captions button and its various states, which are modeled after the Volume Mute button states:

        CCButton
    on_mc (CCButtonOn)
        up_mc (CCButtonOnNormal)
        over_mc (CCButtonOnOver)
        down_mc (CCButtonOnDown)
        disabled_mc (CCButtonOnDisabled)
    off_mc (CCButtonOff)   
        up_mc (CCButtonOffNormal)
        over_mc (CCButtonOffOver)
        down_mc (CCButtonOffDown)
        disabled_mc (CCButtonOffDisabled)
    

The CCButton symbol is added to the Stage as a foreground symbol with the instance name fg1_mc. An instance of the CCButtonOffNormal symbol is added to the layout_mc symbol, also with the instance name fg1_mc.

The following ActionScript code, or code similar to it, is present in each skin with captioning support. It imports the CaptionDisplay, CaptionButton, and AccessibleSkin classes and instantiates them:

         // import caption classes
    import mx.video.captions.*;
    // import accessible skin class
    import mx.video.skins.*;
    // Define an init object
    var initObj:Object = new Object();
    /* Override defaults
    initObj.font = "_sans";
    initObj.embedFonts = false;
    initObj.textSize = 16;
    initObj.textColor = 0xFFFFFF;
    initObj.textShadowColor = 0x000000;
    initObj.backgroundColor = 0x000000;
    initObj.backgroundAlpha = 60;
    initObj.overlay = true; // false for "over"
    skins
    initObj.toggled = false;
    */
    // instantiate the CaptionDisplay class with
    this._parent as the
// target FLVPlayback component instance, and initObj to
// override default styles
    var captionDisplay:CaptionDisplay =
        new CaptionDisplay(this._parent,initObj);
    // define a new CaptionButton, fg1_mc, to toggle
    captions for
    // the CaptionDisplay instance named captionDisplay
    var captionButton:CaptionButton =
        new CaptionButton(fg1_mc,captionDisplay);
    // create an AccessibleSkin instance for this skin
    var accessibleSkin:AccessibleSkin =
        new AccessibleSkin(this);
    // anchor the fg1_mc (our captionButton) to the right
    when the
    // FLVPlayback skin resizes
    layout_mc.fg1_mc.anchorRight = true;
    

You can find a good example of a customized skin on the website for the National Geographic exhibition Tutankhamun and the Golden Age of the Pharaohs (see Figure 5).

Customized FLVPlayback Component Skin with captioning support on KingTut.org

Figure 5. Example of customized skin with captions

Watch the video (4:00)

Using cue points

As I mentioned before, the FLVPlayback component skins with captioning support can work with the embedded cue point format in Flash 8 or with ActionScript cue points. This may offer some advantages if you already have captions in some other format, or if you want the FLVPlayback component skin to be able to display captions when the user seeks or drags the scrubber bar.

When using Flash 8 or ActionScript cue points to store the caption data, define the cue points with the following properties:

name: Define any cue points you wish to be interpreted as captions by the name caption.
time: The time at which the cuePoint event will be triggered in seconds.
type: Caption cue points should be either event or actionscript cue points.
Add one or more of the following as parameters for each caption cue point:
caption tracks: Define each caption track as a separate parameter. With multiple tracks, you can name each track using an index number (for example 0, 1, 2...) or a string (for example: en-us, fr, and es). Enter the caption value for each track you define (for example: My dear, guests...). The captions can contain Unicode characters and HTML.
spk (optional): Add a parameter with the name spk to display the name of the speaker for the caption. If you omit it, no speaker name will be displayed along with the caption.

Where to go from here

The explosion of Flash video on the web must not leave behind those users who are deaf or hard of hearing. Just as the FLVPlayback component and skins make it easy to add Flash video to your websites, Captionate and the FLVPlayback component skins with captioning support make it easy to provide captions for Flash video. I encourage you to use them to make your Flash video projects more accessible to all users. You can find more information in the Adobe Flash CS3 accessibility design guidelines.

Flash CS3 Professional ships with a new component for adding closed captions to Flash video. The FLVPlaybackCaptioning component works with captions loaded from a Timed Text XML file (DFXP). To find out how to caption FLVs with the FLVPlaybackCaptioning component, read Using the FLVPlaybackCaptioning component in the Flash LiveDocs.

The skins discussed in this article remain relevant for Flash video projects targeting Flash Player 8 and using the ActionScript 2.0 version of the FLVPlayback component. The latest version of the skins included in the FLVPlayback Skins with Captioning Support extension have been updated to include support for timed text as well:

Download from the Flash Exchange

You can find definitions of the FLVPlayback and FLVPlaybackCaptioning ActionScript 3.0 classes, which provide properties, methods, styles, and events that you can access to interact with these components, in the ActionScript 3.0 components and language reference.

Also check out the Flash Quick Start, Building Flash video projects: Getting started with the ActionScript 3.0 FLVPlayback component, in the Flash Developer Center.

Flash User Forum

04/23/2012	Auto-Save and Auto-Recovery
04/23/2012	Open hyperlinks in new window/tab/pop-up ?
04/21/2012	PNG transparencies glitched
04/01/2010	Workaround for JSFL shape selection bug?

Flash Cookbooks

02/13/2012	Randomize an array
02/11/2012	How to create a Facebook fan page with Flash
02/08/2012	Digital Clock
01/18/2012	Recording webcam video & audio in a flv file on local drive

Captioning Flash video with Captionate and the captioning-supported FLVPlayback component skins

by Michael A. Jordan

Content

Modified

Page tools

Requirements

Prerequisite knowledge

User level

Additional Requirements

Flash Professional 8 or

Flash CS3 Professional

FLVPlayback Skins with Captioning Support extension

Captionate from the Manitu Group

Transcribing your video

Adding captions to your video using Captionate

Displaying the captions

Customizing the caption display

Assigning tab indexes

Creating a new captioned skin

Using Flash Professional 8

Using Flash Professional CS3

Using cue points

Where to go from here

More Like This

Flash User Forum

Flash Cookbooks

Products

Solutions

Industries

Help

Learning

Ways to buy

Downloads

Company