Flash Article

Filtering XML data in Flash applications using ECMAScript for XML

E4X within the application

In this article, I discuss building an application that uses XML data and E4X to populate multilingual captions for a video display. This scenario is designed to give you insight into how to use E4X. A single XML packet is loaded into the application that will contain all the necessary captioning data. Rather than parse all the data into a complex data structure, you'll see how E4X can extract the data from the XML object and then use the data in different locations within the application (see Figure 1).

Figure 1. Video application that dynamically displays the caption based on the language selected

Application layout

The layout of the video application is simple. First, an FLVPlayback component is placed in the middle of the Stage to render the FLV video that is displayed in the application. Centered vertically beneath the FLVPlayback component is a dynamic text field to display the caption. Directly below that is an instance of a ComboBox component that allows the user to select the preferred language to display the video caption text.

The first node of the XML packet contains information about the various languages. This information is stored by the rest of the packet. The language data information is used by the application to populate the ComboBox, offering the available language options for the video captions.

For the purposes of this article, the caption text and the timing of the captions have been "borrowed" from the Flash CS3 Professional documentation. When working with the FLVPlayback component, you can add captions to the video by using the FLVPlaybackCaptioning component. It uses a Timed Text (TT) XML file for timings and captions, which is an open standard used for captioning and is essentially a DTD (Data Type Definition).

Talking in tongues

While multilingual captioning can be implemented using the FLVPlaybackCaptioning component, this article illustrates the concept of multilingual captioning as an example to demonstrate how easy it is to access complex structured XML data using E4X.

The XML code below is a portion of the XML packet that is used in the application:

<?xml version="1.0" encoding="ISO-8859-1"?>
<movieCaptions>
  <languages>
  <language name="English" code="eng"/>
  <language name="French" code="fre"/>
  <language name="German" code="deu"/>
  <language name="Italian" code="ita"/>
  <language name="Japanese" code="jpn"/>
  <language name="Spanish" code="spa"/>
  </languages>
  <caption cuepoint="0.500">
  <eng>I had just joined Macromedia in 1996,</eng>
  <deu>Ich hatte gerade Macromedia 1996 verbunden,</deu>
  <fre>J'avais juste joint Macromedia en 1996,</fre>
   <ita>Avevo
  unito appena Macromedia in 1996,</ita>
  <jpn>私はちょうど1996年にMacromediaを結合した、</jpn>
  <spa>Acababa de ensamblar Macromedia en 1996,</spa>
  </caption>
</movieCaptions>

Note: The various translations used in this example have been translated online using translation software; hopefully the translation results of the captions are somewhat accurate.

The original XML data consists of one <languages> node and multiple <caption> nodes. As you can see when analyzing the XML, the items in the <languages> node contain both name and code attributes. In the <caption> node, each translated caption is surrounded by tags that correspond to the code attribute of each available language.

Page 2 of 4

Previous Page

Next Page