This tutorial will show how to create subtitles on-the-fly from content stored in XML format. It assumes that you know how to create an FLV (Flash Video) file.
First step: Create the Flash file
First you need to create a new fla file and import the FLV file to the main stage. This is automatically wrapped in a FLVPlayback component. Give this the instance name of video1. A dynamic text field also needs to be created for displaying the subtitles. Assign this text field the instance name txt_output.
About cuepoints
Adobe describes a cuepoint as ‘a point at which the video player dispatches a cuePoint event while an FLV file plays’.
We will create a cuepoint for every point in the video that we want to display a subtitle. Cuepoints can be defined directly on the FLVPlayback Component’s Parameter Pane, located on the Component Inspector or the Properties pane. However, we will go a step further and create the cuepoints dynamically using Actionscript.
Each cuepoint requires; a name, the time (in seconds) when it will be displayed, and the text that will be displayed. This information will be stored in an XML file called cuepoints.xml and will follow this structure;
Parsing cuepoints.XML
The first thing to do is to get the subtitle information for each cuepoint from cuepoints.xml. We will use a Class developed by Antonio De Donitas called XModel. This is a very useful class that makes parsing XML files easier. The purpose of the XModel class is to convert XML data into an ActionScript object whose properties are named after the elements and attributes in the XML data.
The XModel class improves upon the built-in functionality of AS2 by:
- Reducing the amount of code required to access the XML data.
- Making your application-specific code much more readable and, therefore, much easier to extend and maintain.
Here’s a snippet of the code;
var theContent:XModel = new XModel();
var listener = new Object();
theContent.addEventListener("onModelledObject", listener);
theContent.load("xml/cuepoints.xml");
The use of the XModel class follows the same event-driven approach that is broadly used in Flash applications:
- Cuepoints.xml is loaded using an XModel instance called theContent.
- A listener object called listener has been created and registered so that it listens for an event called onModelledObject, which is triggered by theContent.
Detail of onModelledObject
onModelledObject stores the details of each subtitle in an array for later retrieval. XModel makes the parsing code a lot more meaningful and easier to follow since it allows you to access the xml content by referencing the actual node names. A function called createCuepoint() is also invoked for every iteration of arr_cue_points. Here is what this function looks like;
function createCuepoint(cTitle:String, cTime:String):Void{
var cuePt:Object = new Object(); //create cue point object
cuePt.time = Number(cTime);
cuePt.name = cTitle;
cuePt.type = "actionscript";
video1.addASCuePoint(cuePt); //add AS cue point
}
Code for createCuepoint()
The final line in this function adds the cuepoint to a FLVPlayback instance called video1.
Triggering cuepoints at runtime
Now we need to listen for cuePoint events that occur while the FLV file plays.
A listener object called listenerObject is created and registered to listen for the occurrence of cuePoint events. A cuepoint event is dispatched when the amount of lapsed time is the same as the time property for a cuepoint. Here’s what it looks like;
//populate cuepoints...
var lastCue:Number;
var listenerObject:Object = new Object();
listenerObject.cuePoint = function(eventObject:Object):Void {
var str_name = eventObject.info.name.toString();
_root.txt_output.text = arr_cue_points[str_name].cueText;
}
Handling cuePoint events
Every time a cuepoint is active, the subtitle text for that cuepoint (which is stored in the array we created earlier) is written to a dynamic textfield called txt_output.
Don't forget to add:video1.addEventListener("cuePoint", listenerObject); in your code.
If you require the source files, feel free to ask. :)
