Adding XML (DFXP) caption File to Flash: Working with Flash CS3

Adding XML (DFXP) caption File to Flash: Working with Flash CS3

Flash CS3 must be installed in order to create the video shown below.

You will need the XML caption file and a flash video file. If you have not converted
your video into a Flash video file (*.flv), below are the steps to do so:

To convert to FLV:

  1. Open Flash Video Encoder.
  2. Click the Add button.
  3. Locate file and click the Open button.
  4. Settings are set to Medium quality by default, change if desired.
  5. Click the Start queue button. Once the encoding is completed the FLV will
    be in the same directory the original file was located.



Getting Started

  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 file into the same folder your caption and video files are located.

    Components panel

  3. Select Window -> Component Inspector to open the Component Inspector panel, and select the FLVPLayback component on the stage and click the Parameters tab
    in the Component Inspector. We are now going to set the skin and link a video
    to the component.

    Component Inspector panel for FLVPLayback

  4. Double click the Skin parameter to open the Select Skin dialog box shown below.
    Select the SkinUnderPlayStopSeekCaptionVol.swf from the Skin pop down. Click the color
    chip and choose a color. Click OK to close the dialog box.

  5. Select Skin dialog box

    Note: You may also select a custom URL skin if you want to use the
    same skin for all your videos. Add the full URL path, you may use this's site skin:

    /sites/default/files/accessibility/video/SkinUnderAll.swf

    You still have the freedom to choose a custom color.

  6. Double click the Source parameter and, when the Content Path dialog box opens,
    select your Flash video file. Click OK to close
    the dialog box.

    Component Inspector panel for FLVPLayback

  7. Select the FLVPlaybackCaptioning component on the stage, and
    click on the Parameters in the Component Inspector.
    Click once in the source parameter and enter the name of your xml file.

    Component Inspector panel for Captioning

    Note: You may want to add the full URL path in the source paremeters if
    planning to display the video in a different directory.

    /sites/default/files/accessibility/video/news6401.flv
    /sites/default/files/accessibility/video/news6401.dfxp.xml____
  8. Save and test the movie. The captions appear abover the media controls. If you
    click the Captions button in the player, you can turn the captions on and off.

    Sample of test file

  9. top

    To add captions below player

    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 (Ctrl+F3), 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. Don’t forget to set the text color to black, because
      the default 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.

      Property Inspector

    6. Click once on the captioning component on the stage, and click the Parameters
      tab in the Component 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.

    Sample video.

    View the source code for this flash on the Source Code page.

    top