Captionate - Using FLVPlayback skins with Captionate captioning support

On October 24, 2006, FLVPlayback component skins (by Michael Jordan) that support Captionate captions was made available for free by Adobe (at Adobe Accessibility blog).

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.

Summary: Install the MXP, choose one of the new skins and you are done.
Requirements
You need Adobe/Macromedia Flash Professional 8 installed (Make sure you have the latest FLVPlayback component. Version 1.01 is available for download at Macromedia Flash Support Center). You also obviously need to download and install the skins available as an MXP from Adobe Accessibility blog at http://blogs.adobe.com/accessibility/2006/10/captionskins.html.

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.

That's it!.

Advanced Topics

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
	}

	flvPlayback_flvp.addEventListener("skinLoaded", listenerObject);

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:

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

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

Please send any feedback about this article to support@captionate.com

Copyright © 2006 Manitu Group. All rights reserved. All trademarks acknowledged.