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 this section of the tutorial we are going to start adding visual elements to our player. Our project will be structured in the following manner:

A main Sprite container will host all the visual elements.
Each category of objects will be stored in their own sub-container.

Our project has thumbnails, textual description of thumbnails, and a video playback component. The diagram below explains our structure.

AS3 XML Video Player - Container Structure

Each one of these containers will be basically a Sprite instance which add our images, texts or component to.

We are going to work through these one by one, so in this section we are going to work on the main container and the thumbs sub-container only. Once we create the thumbs sub-container, we will load all the thumbs in one go using a loop and the Loader Class.

The basic outline of this section is as follows:

Create the main contain sprite.
Create the thumbs sub-container.
Use a loop to load all the thumbs using the Loader Class.

Creating the Main Container

It is necessary to have a main container to be able to manipulate all the assets either by repositioning, displaying them or removing them from the display list in one go.

AS3 - XML Video Player

We are going to break down our code into functions to arrange the code in logical blocks. Our first function will be typed at the very bottom of all of our existing code, call this function makeContainers():

function makeContainers():void{

}

The first task for this function is to create the main Sprite container, we can simply do that by using the new keyword, but before we do that we need to create a variable to hold a reference to this Sprite. We can't create our variable inside the function because that will make it a temporary variable. We must define this variable outside the function to make sure that it remains for the entire show. Use the var keyword to create a variable called main_container at the top of the code along with the other variable definitions:

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 main_container:Sprite;

We can now put a new Sprite in this variable using our makeContainers function:

function makeContainers():void{
main_container = new Sprite();
}

We will now just add the main_container to the display list so that any content we add to it becomes visible:

function makeContainers():void{
main_container = new Sprite();
addChild(main_container);
}

You can learn more about the Display List by reviewing our tutorial on this topic.

Our main_container is now ready to use, but this function will not actually be executed until we call it. We need to call this function from within the processXML event listener. Simply type the name of this function at the bottom of that listener's content to call it:

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();

makeContainers();
}

You can learn more about AS3 Functions by reviewing our tutorial on this topic.

You can test your movie, but you will not see anything because we have no graphical objects in this project yet!

Create the Thumbs Sub-Container

We are going to create our first sub-container now: The thumb sub-container, this one will host all the thumbnails once they are loaded:

AS3 - XML Video Player

You need to start off by creating variable to hold it at definitions section of our code. Call this variable thumbs.

Using the same makeContainer function, create a new Sprite in this variable:

function makeContainers():void{
main_container = new Sprite();
addChild(main_container);

thumbs = new Sprite();
}

We need to position our thumbs sub-container in accordance with the variables we retrieved from the XML file, namely thumbs_x and thumbs_y. We can do that by simply setting these as the value for the x and y properties of our thumbs container:

function makeContainers():void{
main_container = new Sprite();
addChild(main_container);

thumbs = new Sprite();
thumbs.x = thumbs_x;
thumbs.y = thumbs_y;
}

Finally, we need to add our thumbs sub-container to the display list. We are going to add it as a child of the main_container:

function makeContainers():void{
main_container = new Sprite();
addChild(main_container);

thumbs = new Sprite();
thumbs.x = thumbs_x;
thumbs.y = thumbs_y;
main_container.addChild(thumbs);
}

Our thumbs sub-container is now ready, we will load the thumbs using a loop next.

Loading the Thumbs

The previous sections were easy, it is now time for the first tricky part of this tutorial: loading the thumbnails. We are going to put all the code relevant to this part in a separate function to make things organized. We are going to use the Loader Class to load the images from within this function. A loop will also be used to to create multiple instances of the Loader Class and to load all the thumbnails in one go.

The first step for doing this is by creating our new function at the bottom of all of the existing code. Name this function callThumbs():

function callThumbs():void{

}

All the code inside this function will be executed through a loop. We are using a loop to be able to execute the same code multiple times without having to actually type it for each and every thumbnail.

The repeated code in the loop will involve (1) retrieving the URL of the thumbnail from the my_videos XML list, (2) creating a new instance of the loader class to load the thumb URL, and (3) registering the loader with an event listener to show the image once it finishes loading.

We will start off by creating the loop. Our loop will cycle as long as the counter i does not exceed our total number of videos:

function callThumbs():void{
for (var i:Number = 0; i < my_total; i++){

}
}

Review our tutorial on AS3 Loops to learn more about this topic.

We will now retrieve the URL of the thumbnail and store it in a local variable called thumb_url. This variable is only used within the loop, so there is no need to create it out. i below is used to cycle through the elements in the XML list and retrieve the actual URL by using the @ operator to get the value of that attribute:

function callThumbs():void{
for (var i:Number = 0; i < my_total; i++){

var thumb_url = my_videos[i].@THUMB;

}
}

Review our tutorial on AS3 XML to learn more about accessing attributes.

We will now create a new temporary instance of the Loader Class using the new keyword, and then instantly load the thumb image using the .load() method. This is pretty simple:

function callThumbs():void{
for (var i:Number = 0; i < my_total; i++){

var thumb_url = my_videos[i].@THUMB;
var thumb_loader = new Loader();
thumb_loader.load(new URLRequest(thumb_url));

}
}

Review our tutorial on the Loader Class to learn more about this topic.

We need to use an event listener to show the images when they are fully loaded. To do this we will register with the Event.COMPLETE to load a special listener function called thumbLoaded which we will define later. Register the event using the .addEventListener() method:

function callThumbs():void{
for (var i:Number = 0; i < my_total; i++){

var thumb_url = my_videos[i].@THUMB;
var thumb_loader = new Loader();
thumb_loader.load(new URLRequest(thumb_url));
thumb_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);

}
}

Review our tutorial on AS3 Event Handling to learn more about this topic.

We will now create the thumbLoaded listener function at the bottom of all of our existing code. This function will add the Loader instances of our thumbs to the thumbs Sprite display list to make them visible:

function thumbLoaded(e:Event):void{
var my_thumb:Loader = Loader(e.target.loader);
thumbs.addChild(my_thumb);
}

e.target.loader holds a reference to the instance of the Loader Class on to which the event listener was registered to indirectly.

The type Loader was "casted" on e.target.loader to override strict data-typing requirements of the Flash compiler as the data type cannot actually be determined at compile time.

Our thumbLoaded() listener function is now ready and our previous callThumbs() function is also done, we need to call this latter function to make it execute it when needed. Call it right below the makeContainers() function from within the processXML listener function at the top:

You have reached your first milestone, you can now test your movie (Ctrl+Enter) to see your thumbs loaded, however, they will all be placed over each other, so you will only be able to see the last one. We are going to fix in a bit.

AS3 XML Video Player - Thumbs Loaded

We are going to position our thumbnails in a column format by configuring the y property of each thumb. We will calculate the needed position by finding the total height of all previous thumbnails. We use this very simply formula to do this:

AS3 XML Video Player Thumb Layout

This translated into the following code:

thumb_loader.y = thumb_height*i;

This works because i starts from zero and not one. So no matter what thumbnail we are at, i will always be one number less than the thumbnail number, so we can multiply the height by i to get the right position for the current thumbnail. You can see it in action by adding the line mentioned above in your loop of the callThumbs() function:

function callThumbs():void{
for (var i:Number = 0; i < my_total; i++){

var thumb_url = my_videos[i].@THUMB;
var thumb_loader = new Loader();
thumb_loader.load(new URLRequest(thumb_url));
thumb_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
thumb_loader.y = thumb_height*i;

}
}

Test your movie again to see your thumbnails now placed in a column format:

AS3 Thumbnails Column

We can add a space between our thumbnails by adding the amount in pixels before multiplying the value with i:

function callThumbs():void{
for (var i:Number = 0; i < my_total; i++){

var thumb_url = my_videos[i].@THUMB;
var thumb_loader = new Loader();
thumb_loader.load(new URLRequest(thumb_url));
thumb_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
thumb_loader.y = (thumb_height+10)*i;

}
}

Again, test your movie to see the space applied:

AS3 XML Video Player - Thumbs Spaced Out

That should do it for this section, we are going to insert the thumb description and position in the next section:

Summary of this Page

Created a main container for our player.
Creating a container for the thumbs.
Creating a callThumbs() function that used an instance of the Loader Class to load all the external thumbs.
Positioned the thumbnails using a very simply formula.

In the next section we will display the text description of each thumbnail and position them next to their respective thumbnails.