Writing the Client-Side ActionScript
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:
- Creates the
nav
variable, which holds the XML data for the selected list item, providing access to all attributes of the selected item. - Dynamically creates an instance of the FLVPlayback component, called FLVPlybk.
- Walks through the XML for the chosen item and assigns its URL to the contentPath property of the FLVPlayback component and begins playback.
- Creates a listener that detects when the FLV is ready to play, and then recenters the FLVPlayback component on the Stage.
- Creates the
reset
variable and initially sets its value totrue
. This variable will be used in thens.play
method three lines below. This causes the existingNetStream
instance to be flushed, stopping any video currently being played and immediately playing the newly selected video. Thereset
variable is then set tofalse
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:
- Loads the XML file.
- Parses the XML file.
- 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.
Comments