Following is a quick tutorial on how to set-up and use the set of captioned FLVPlayback skins created by Michael Jordan.
This tutorial covers using the skins with ActionScript 2.0 cuepoints.
First off, download the set of skins. I’ve included them with this blog entry (because Adobe is notorious for moving and deleting pages), but there may be a newer version out there so check out this page, and/or Michael’s page.
Once you’ve downloaded and installed the skins fire up Flash and open a new document.
Import your .flv video and place an instance on the stage.
Name your FLVPlayer instance flvInstance.
In the Component Inspector set your skin to one of the Captioned skins you just installed.
Add the following code to the first frame of your movie, or add it to an .as file and include it into your .fla file.
// —————————————————————————-
/*
Defining cue points
We must define an ActionScript cuePoint object and a parameters object that contains the caption content
*/
// Example of a cuepoint that includes a speaker indicator:
var var_cuePoint_00_content:Object = { en: "Here we define our first cuepoint.", spk: "Ryan" };
// Now we define our time, the name of the cueoint and add the aforementioned object as the cuepoint’s parameters
var var_cuePoint_00:Object = { time: 2.05, name: "caption", type: "actionscript", parameters: var_cuePoint_00_content };
// Example of item without a speaker:
var var_cuePoint_01_content:Object = { en: "Here is the second cuepoint" };
var var_cuePoint_01:Object = { time: 4.05, name: "caption", type: "actionscript", parameters: var_cuePoint_01_content };
// Adding our cue points to our FLVPlayer instance
flvInstance.addASCuePoint( var_cuePoint_00 );
flvInstance.addASCuePoint( var_cuePoint_01 );
// Adding a listener for our FLVPlayback instance so you can see what’s going
var listenerObject:Object = new Object();
listenerObject.cuePoint = function(eventObject:Object) {
trace( "Elapsed time in seconds: " + flvInstance.playheadTime + "\n" );
for( var prop:String in eventObject ){
trace( "Property [" + prop + "] = " + eventObject[prop] );
if( prop == "info" ){
trace( "the info property" );
for( var infoProp:String in eventObject[prop] ){
trace( "Property [" + infoProp + "] = " + eventObject[prop][infoProp] );
}
}
}
};
flvInstance.addEventListener("cuePoint",listenerObject);
// —————————————————————————-
Compile your .swf, click on the "CC" button, play your FLV and you should see your captions as your video plays