Using the skins and Flash 8 Professional's FLVPlayback component, it becomes very easy to show the captions embedded in FLV files by Captionate. The skins provide a 'CC' button for displaying captions and virtually no actionscript is needed to add captioning support.
In this article we will see how you can use the new skins. As it's very easy to use the skins and have a FLVPlayback component that supports Captionate captions, in order not to have a very short article, we will also look into a few commonly asked questions in Advanced Topics section.
Download the MXP file to your local drive from this page. (If you have trouble downloading by clicking on the link, right click on it and choose 'Save Link As' or 'Save Traget As').
Double click on the MXP file. Macromedia Extension Manager should launch and install the package.
You'll also need an FLV file with captions embedded by Captionate.
Using the New Skins
This is how you normally use the FLVPlayback component:
Launch Flash Professional 8.
Create a new FLA (File | New, Flash Document).
Drag and drop FLVPlayback component from Components panel to stage.
Click on the component, in Property Inspector choose Parameters tab.
Set the contentPath parameter to your FLV.
Optionally set the skin parameter.
Press CTRL+ENTER to test the movie
For using new skins with captioning support, you only need to choose one of the new skins at step 6. New skins have the same names as the standard skins but they start with the string 'Captioned'.
Press CTRL+ENTER to test the movie. You'll see that you now have a 'CC' button which can be used for toggling captions.
How to have the 'CC' button clicked by default...
You may want to start your video with 'captions on' by default. For this you'll need to wait until the skin is loaded as below :
var listenerObject:Object = new Object();
listenerObject.skinLoaded = function(eventObject:Object):Void
var captionDisplay = eventObject.target.skin_mc.captionDisplay;
if (captionDisplay) captionDisplay.toggled = true; // Toggle the captions
Note that the above code assumes your FLVPlayback component instance is named flvPlayback_flvp in the last line.
You can also set the following properties similarly:
How to chage the displayed language track...
Captionate lets you embed multi-language captions, captions for each language is called a language track. If you have more than one language track in your FLV, you can change the displayed language by setting the skin_mc.captionDisplay.lang property as below (assuming your component instance is named flvPlayback_flvp):
flvPlayback_flvp.skin_mc.captionDisplay.lang = 1;
The number you assign is the language track number (starts at 0). You also should be able to change it by assigning a language code sting like "en-us".