Create an XML Video Player Using ActionScript 3.0

By Blue_Chi | Flash CS3 | ActionScript 3.0 | Intermediate | Page 1, 2, 3, 4, 5, 6

In order to do anything with our video player we will have to load and process our XML playlist file to retrieve the data we need. Loading the data will require using the URLLoader Class while processing it will require using the XML Class. This should be a very simple process if you have read our tutorials on these two topics. Once our data is loaded we will store specific segments of it in variables to easily access that data later. Here is a basic outline of what we will do in this section:

  1. Loading the XML playlist t file using the URLLoader Class.
  2. Processing the XML file using the XML Class.
  3. Storing the data we retrieve in easily accessibly variables.

Loading the XML File Using the URLLoader Class

The first thing we have to do is load our XML file into Flash. The loading of any textual content such as XML, CSS, and HTML is managed by the URLLoader Class. This class is very simple to use. Start off by creating an instance of it and then use the .load() method to load the playlist.xml file.

var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("playlist.xml"));
Review our tutorial on how to load external text using the URLLoader Class to learn more about this topic.

This should load your XML playlist file into Flash, but that on its own will not do anything as Flash is not told what to do with the file when it loads. To take an action once the file is loaded we need to use an event handler to listen to the Event.COMPLETE. We will register this event with a function which we will create later called processXML(). Simply add the following code to use the .addEventListener() method to register for this event:

var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("playlist.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);
Review our tutorial on Event Handling in AS3 to learn more about this topic.

Using the event listener will let us take an action when the file loads. This action is obviously processing the XML data. We will deal with this in the next section.

Processing the XML Data

We are going to process our XML through the function processXML() which is triggered when the XML file finishes loading. The code to be triggered must reside in this function. Simply create it under the code we currently have:

var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("playlist.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);

function processXML (e:Event):void{

}

Processing our XML data will require creating an instance of the XML Class and assigning the data of our XML file to it. Do that by using the code below inside the processXML() function:

var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("playlist.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);

function processXML (e:Event):void{
var myXML:XML = new XML(e.target.data);
}
Review our tutorial on using XML in AS3 to learn more about this topic.

You should note that using the keyword var inside a function makes this variable temporary. This means that this variable will be deleted once the function finishes executing. We have used this approach because we don't need the entire reference for the XML data later, we just need some of it. We are going to create regular variables to hold the all the specific details we need and use these in the rest of our player. This will make our life easier later as everything will be more organized.

To make sure that our variables are permanent and do not get deleted we need to declare their existence using the var keyword at the beginning of our code and NOT inside the function. The variables we need are as follows:

  1. thumb_width - This variable will specify the width of a single thumb.
  2. thumb_height - This variable will specify the height of a single thumb.
  3. thumbs_x - This variable will specify the horizontal position of the thumb collection.
  4. thumbs_y - This variable will specify the vertical position of the thumb collection.
  5. video_x - This variable will specify the horizontal position of the video.
  6. video_y - This variable will specify the vertical position of the video.
  7. my_videos - This variable will hold a reference to the actual XML nodes that have the video details.
  8. my_total - This variable will specify the total number of videos we have in the playlist.

All the variables above, except the one before last, will have their type set to Number. The my_images variable will contain a reference to the list of images we have in our XML file, so we will set its type as XMLList.

We are going to declare these variables at the start of our code and not inside the function so that they remain permanent. Type the highlighted code above all of your existing code:

var thumb_width:Number;
var thumb_height:Number;
var thumbs_x:Number;
var thumbs_y:Number;
var video_x:Number;
var video_y:Number;
var my_videos:XMLList;
var my_total:Number;


var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("playlist.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);

function processXML (e:Event):void{
var myXML:XML = new XML(e.target.data);
}
Review our tutorial on AS3 Variables and Datatypes to learn more about this topic.

We will now set the value for all of these images inside the processXML function. This is a simple process that uses the methods of the XML Class:

var thumb_width:Number;
var thumb_height:Number;
var thumbs_x:Number;
var thumbs_y:Number;
var video_x:Number;
var video_y:Number;
var my_videos:XMLList;
var my_total:Number;

var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("playlist.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);

function processXML (e:Event):void{
var myXML:XML = new XML(e.target.data);

thumb_width = myXML.@THUMB_WIDTH;
thumb_height = myXML.@THUMB_HEIGHT;
thumbs_x = myXML.@THUMBS_X;
thumbs_y = myXML.@THUMBS_Y;
video_x = myXML.@VIDEO_X;
video_y = myXML.@VIDEO_Y;
my_videos = myXML.VIDEO;
my_total = my_videos.length();

}
Review our tutorial on AS3 XML to learn more about how to retrieve XML element attributes.

We used the @ operator to retrieve the attribute values we need, the reference to all the video elements was made by storing a reference to the VIDEO nodes in the XML file, and the total number of videos we retrieved using the .length() method on the XML list of images (my_videos).

Cool, we now have all the details we need to create our player, except the specific video details, and those will be retrieved through the my_videosvariable and not directly from the XML file later when needed. We have completed this section of the tutorial and will work next to create the container of our player and load all the thumbs of the videos.

Summary of this Page

  1. Created an instance of the URLLoader class, named it myXMLLoader and used it to load the XML playlist file.
  2. Used an event listener to trigger the processXML function when the XML file finishes loading.
  3. Created an instance of the XML Class, named it myXML, and used to extract the data of the XML file.
  4. Stored all the information retrieved from the XML file in separate variables to use later.

In the next section we will create the container of our player and will load all the thumbnails.

Next page