Fintan is a Senior Flash Platform Developer based in Dublin, Ireland. He currently specialises in the creation of multimedia activities for the Education sector. He keeps an active blog about Rich Internet Application development at flashfellowship.com/blog. Level: Advanced
Technology: AS2.0, XML, XLEFF
Assumed knowledge: Know how to create an FLV file, basic understanding of AS2 (including the use of listeners and classes, using components)
Overview
Level: Advanced
Technology: AS2.0, XML, XLEFF
Assumed knowledge: Know how to create an FLV file, basic understanding of AS2 (including the use of listeners and classes, using components)
Overview
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
First you need to create a new
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;
[code]<cuepoints>
<cuepoint>
<cuename>c_pt_0</cuename>
<cuetime>1</cuetime>
<subtitle>This is text for the 1st cuepoint</subtitle>
</cuepoint>
<cuepoint>
<cuename>c_pt_1</cuename>
<cuetime>3.5</cuetime>
<subtitle>This is text for the 2nd cuepoint.</subtitle>
</cuepoint>
</cuepoints>[/code]
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;
[as]var theContent:XModel = new XModel();
var listener = new Object();
theContent.addEventListener("onModelledObject", listener);
theContent.load("xml/cuepoints.xml");[/as]
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.
[as]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);
}
}[/as]
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;
[as]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
}[/as]
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;
[as]//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;
}[/as]
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.
END