Writing the Client-Side ActionScript

This section explains how to parse the XML document and create the dynamic playlist.

As I mentioned, all the ActionScript you are using for this project is contained in external files. Begin by creating an ActionScript file called VideoSource.as in Dreamweaver or in your favorite text editor.

Step 1: Format the Playlist Box

Assign values to the rowHeight and Selectable list properties, and then call the function VideoThumb to create the actual thumbnails:

list.rowHeight = 70;
 list.cellRenderer = "VideoThumb"; 
list.selectable = true; 

Step 2: Handle the Playlist Selections

To detect when clips are selected from the playlist, you need a listener object. Create a new empty listener object called listListener:

//create new empty listener object 
listListener = {}; 

Now create a function to control what happens when an item in the playlist is selected:

listListener.change = function( evtobj ) {
 var nav = list.dataProvider[list.selectedIndex]; 
   var reset = true;
    for ( var i = 0; i < nav.childNodes.length; i++ ) {
       var stream = nav.childNodes[i];
       if ( stream.nodeName == "stream" ) {
          attachMovie("FLVPlayback", "my_FLVPlybk", 10, {width:320, 
 height:240, x:90, y:100});
                    //center the FLVPlayback component when FLV is ready to play
          var listenerObject:Object = new Object();
          listenerObject.resize = function(eventObject:Object):Void {
             //center video in playback area
             newx = (460 - my_FLVPlybk.preferredWidth)/2;
             newy = (470 - my_FLVPlybk.preferredHeight)/2;
             my_FLVPlybk._x = newx;
             my_FLVPlybk._y = newy; 
         };
          my_FLVPlybk.addEventListener("resize", listenerObject);   
           listenerObject.ready = function(eventObject:Object):Void { 
              my_FLVPlybk.setSize(250, 350);
          };

           my_FLVPlybk.skin = "SteelExternalAll.swf";
          my_FLVPlybk.clear();
          my_FLVPlybk.contentPath = nav.attributes.url 
            + "/_definst_/" + stream.attributes.name+".flv";
          my_FLVPlybk.autoSize = true;
          //trace(my_FLVPlybk.contentPath);
          reset = false;
       }
    }
 } 

This function accomplishes the following:

1. Creates the nav variable, which holds the XML data for the selected list item, providing access to all attributes of the selected item.
2. Dynamically creates an instance of the FLVPlayback component, called FLVPlybk.
3. Walks through the XML for the chosen item and assigns its URL to the contentPath property of the FLVPlayback component and begins playback.
4. Creates a listener that detects when the FLV is ready to play, and then recenters the FLVPlayback component on the Stage.
5. Creates the reset variable and initially sets its value to true. This variable will be used in the ns.play method three lines below. This causes the existing NetStream instance to be flushed, stopping any video currently being played and immediately playing the newly selected video. The reset variable is then set to false for the rest of the files in the playlist.

If nodeName is stream, the clip is played. To implement the listListener function, you must associate it with the playlist. Then when it triggers, the listListener function is called, repopulating the list:

//Add an event listener on the list, when it triggers,
  //run the listListener function to repopulate the list
 list.addEventListener("change", listListener); 

Step 3: Parse the XML File and Populate the Playlist

Now it’s time to dive into the lengthiest function. This one accomplishes a lot:

1. Loads the XML file.
2. Parses the XML file.
3. Builds the playlist.

I’ll break it up and explain what happens in each operation.

Create a new XML object, called xmllist. Add the standard ignoreWhite=true command to strip out extra white space from the XML file. Finally, load the XML file into the XML object:

var xmllist = new XML();        
//setup a variable to hold the XML
    xmllist.ignoreWhite = true;
    xmllist.load( "playlist-demo-1.xml" );    
//load the XML file 

Congratulations, you now have your XML data in Flash. But that’s just the beginning.

You need to parse that data into a format that Flash can use to populate the playlist. The following function is called when the XML has been successfully loaded:

xmllist.onLoad = function( status )  {
    if ( !status )
       trace( status );
    var entries = this.childNodes[0]; 
   var playlists = {}; 
   var nav = []; 

The code passes status to this function and traces it for debugging purposes. Create three variables to hold the XML data for each video clip:

• entries
• playlists
• nav

Next, create a for loop that steps through the XML and builds the data arrays:

for ( var i = 0; i < entries.childNodes.length; i++ ) {
       var entry = entries.childNodes[i];
       if ( entry.nodeName == "listitem" )
          //builds array of video clip names
          playlists[entry.attributes.name] = entry;
       else if ( entry.nodeName == "menu" ) {
          //builds array of available videos
          for ( var j = 0; j < entry.childNodes.length; j++ )
          nav[j] = playlists[entry.childNodes[j].attributes.name]; 
      }//end else if
    }//end for 

As the loop steps through the XML, it builds an array of video clip names (playlists) and an array of available videos (nav). The array of videos is then sent to your List component for display purposes:

//sends the array of videos to the listbox UI
    list.dataProvider = nav;
 }//end xml onload 

Save this file as VideoSource.as in the same folder as VideoSource2.fla. Also place a copy in your application’s web-accessible directory.

You’ve now successfully imported your XML data, built the playlist, and implemented the clip selection function. The next operation tackles creating dynamic thumbnails.