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:
- Open Flash Video Encoder.
- Click the Add button.
- Locate file and click the Open button.
- Settings are set to Medium quality by default, change if desired.
- Click the Start queue button. Once the encoding is completed the FLV will be in the same directory the original file was located.
Open a new Flash CS3 document, and be sure to choose the ActionScript 3.0 document choice in the Start panel.
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.
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.
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.
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.
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.
Note: You may want to add the full URL path in the source paremeters if planning to display the video in a different directory.http://www.calstatela.edu/accessibility/video/news6401.flv
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.
To add captions below player
Add a new layer to the timeline and name it "Caption".
With the Caption layer selected, select the Text tool and draw out a text box under the video on the Flash stage.
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.
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.
In the text properties, select Multiline from the Line type pop down menu. This will ensure that the text isnít cut off.
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.
Save the movie and test it.
View the source code for this flash on the Source Code page.top
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:
You still have the freedom to choose a custom color.