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, 7

In this section we are going to create the text description sub-container and insert the description in it.

AS3 - XML Video Player

The basic outline of this section is as follows:

  1. Create the text sub-container.
  2. Update the loop to retrieve the label text.
  3. Create a new text field for each label and add it to the text sub container.

Creating the Text Sub-Container

Just like the thumbnails, the text will be placed inside a separate sub container, this is done because the thumbs container will later have an event listener attached to it and it should not be linked to the text description. Using separate sub containers makes things easier to manage as well.

The first step for creating this sub-container is to create a variable to hold it at the definition section of our code. Call this variable titles:

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;
var thumbs:Sprite;
var titles:Sprite;

Now inside the makeContainer function, create a new Sprite in this variable, set its x and y positions to the same values as the thumbs sub-container because they will be placed in the same place.

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

titles = new Sprite();
titles.x = thumbs_x;
titles.y = thumbs_y;

}

And finally add it to the display list as a child of the main_container Sprite:

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

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

Our titles sub-container is now ready. We are going to put our texts inside it next.

Retrieving the Titles

Our text labels have already been loaded when the XML file loaded, we simply need to retrieve these the same way we retrieved the image URL. This will have to be done in the callThumbs() function. Start off by creating a local variable called thumb_title and then use the @ operator to retrieve the value of the TITLE attribute from the my_videos XML list:

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;

var thumb_title = my_videos[i].@TITLE;

}
}

The counter i will cycle through the XML list as the loop plays and that way it will retrieve the title of each video. We need to create a text field, insert the text in it, and then add this to the titles sub-container. This should be easy, we are going to do it in one go:

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;

var thumb_title = my_videos[i].@TITLE;
var title_txt:TextField = new TextField();
title_txt.text = thumb_title;
titles.addChild(title_txt);

}
}

You can test your movie now to see your titles displayed, BUT they will be placed over each other on the first thumbnail.

AS3 - XML Video Player - Titles

We need to configure the vertical and horizontal position of these titles. The vertical alignment is simple, simply set it as the same as that of the thumbnail:

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;

var thumb_title = my_videos[i].@TITLE;
var title_txt:TextField = new TextField();
title_txt.text = thumb_title;
title_txt.y = thumb_loader.y;
titles.addChild(title_txt);


}
}

You can test your movie now to see the titles aligned vertically fine.

AS3 - XML Video Player

For the horizontal position, the position has to be equal to the width of the thumbnail plus a small space. We can write that in the format shown in the code below:

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;

var thumb_title = my_videos[i].@TITLE;
var title_txt:TextField = new TextField();
title_txt.text = thumb_title;
title_txt.y = thumb_loader.y;
title_txt.x = thumb_width + 10;
titles.addChild(title_txt);


}
}

Test your movie now to see your text fields aligned well, however, you will now notice that they are actually trimmed from the side.

AS3 - XML Video Player - Horizontally Aligned

That has happened because the default dimensions of the text field are very small. We are going to alter the dimensions of the text field and make sure that wordwrap is activated.

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;

var thumb_title = my_videos[i].@TITLE;
var title_txt:TextField = new TextField();
title_txt.text = thumb_title;
title_txt.y = thumb_loader.y;
title_txt.x = thumb_width + 10;
title_txt.width = thumb_width;
title_txt.height = thumb_height;

title_txt.wordwrap = true;
titles.addChild(title_txt);


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

That should sort our text fields properly. You can now test your movie to see the whole of your titles displayed.

AS3 - XML Video Player - Wordwrapped

That does it for this section. We are going to create our main video playback component in the next section.

Summary of this Page

  1. Created a sub-container for the titles.
  2. Retrieved the titles and displayed them in a text field inside that container.
  3. Aligned the titles properly.

In the next section we will create the instance of the main video player.

Next page