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.  A sample FLV file is provided, along with sample subtitles, but you can also use your own if you wish.

First step:  Create the Flash file

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.

var arr_cue_points:Array = new Array();
listener.onModelledObject = function(eventObject:Object):Void {
 var cuepoints:Object = eventObject.modelledObject; 
 for(kk=0; kk<cuepoints.cuepoint.length; kk++){  
  var cueObj:Object = new Object();
  cueObj.cueTitle = cuepoints.cuepoint[kk].cuename[0].text;
  cueObj.cueTime = cuepoints.cuepoint[kk].cuetime[0].text;
  cueObj.cueText = cuepoints.cuepoint[kk].subtitle[0].text;  
  
  arr_cue_points[cueObj.cueTitle] = cueObj;
  createCuepoint(cueObj.cueTitle, cueObj.cueTime);    
 }
}

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
}

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;
}