Coding the application

The application uses instances of the XMLList class to store the language and caption data once the XML packet has been retrieved. This makes it possible to use the E4X operators to process the XML data. First, you'll declare two instances of the XMLList class, naming them captions and languages respectively, as shown below:

var captions:XMLList = new XMLList();
var languages:XMLList = new XMLList();

Next, you need to retrieve the XML. This is accomplished by creating an instance of the URLLoader class and calling its load method, which in turn uses an instance of the URLRequest class to fetch the XML packet:

var captionsXMLLoader:URLLoader =
  new URLLoader();
captionsXMLLoader.load(new URLRequest("assets/translated_captions.xml"));
captionsXMLLoader.addEventListener(Event.COMPLETE,
  captionsXMLLoadedHandler);

In the example above, the code is loading the XML from a local path. However, there's no reason why you couldn't load the XML using a URL to a file on the network instead.

The application needs to consume the XML data once the packet has completed loading; the addEventListener method initiates the function call once this has occurred. The listener is added in the last line of code in the example above.

Now it's time to write the function. In the code example below, you are creating a new function called captionsXMLLoadedHandler. First, the function creates a local variable named captionsXML that is assigned to the data retrieved by constructing a new XML object. Once the retrieved data is correctly typed as XML, you can use the methods included in the XML class to retrieve the data. In the next line, the captions XMLList is populated with the child nodes from the local variable.

As I mentioned previously, the first node of the XML packet retrieved is a listing of the languages used for the captions. Notice the path used to retrieve that data for the languages XMLList:

function captionsXMLLoadedHandler(eventObj:Event):void {
   var captionsXML = new XML(eventObj.currentTarget.data);
   captions = captionsXML.children();
   languages = captionsXML.children()[0].children();
   setCuePoints();
   setLanguages();
  }

The data stored in the captions and languages XMLLists is then used to set initial values for the application. The captions XMLList sets the cue points of the FLVPlayback component so that an event is fired to change the caption that is currently displayed. The languages XMLList populates the ComboBox component which offers the user the list of specific languages that can be displayed. These actions are handled by calling the appropriate functions from within the captionsXMLLoadedHandler function detailed above. The first function called is setCuePoints.

The code for the setCuePoints function is shown here:

function setCuePoints():void {
var i:int = 0;
  for each(var prop:XML in captions) {
    var captionData:XML = prop;
     
    my_FLVPlybk.addASCuePoint({name:i.toString(),
    time:Number(captionData.@cuepoint)});
     i++;
  }
}

The setCuePoint function uses a for loop to iterate over the captions using the FLVPlayback component's addASCuePoint method to add the cuepoint attribute of each node. The cue point's name attribute is assigned the current value of i, while E4X is used to extract the cue point attribute of the current item in the XMLList.

Next, construct a new DataProvider object and analyze the setLanguages function:

import fl.data.DataProvider;
var dp:DataProvider = new DataProvider();
language.dataProvider = dp;
var selectedLang:Object = new Object();

function setLanguages():void {
   var i:int = 0;
   for each(var prop:XML in languages) {
   var languageData:XML = prop;
   dp.addItem( {
  label:languageData.@name, data:languageData.@code } );
   i++;
 }
 selectedLang = language.dataProvider.getItemAt(0);
}

The setLanguages function relies on some additional code because it is adding structured data to the ComboBox component's dataProvider. The dataProvider is created and assigned to the ComboBox component in the first two lines in the code example above. Using E4X filtering, the code in the for loop adds the name and code attributes extracted from the languages XMLList to the dataProvider by using the addItem method in each iteration of the loop.

A variable named selectedLang is assigned the value of the first item of language's dataProvider. This variable is used to determine the current caption whenever the ComboBox component changes. It is important to set a default value for the ComboBox's initial value before any selection is made, in case the user doesn't select a different language from the ComboBox as the application runs.

Page 3 of 4

Previous Page

Next Page