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 we are going to create our final graphical asset, we only have a single component, so there is no need for a whole sub-container, instead we are going to directly put that component in our main container.

AS3 - XML Video Player

This basic outline of this section is as follows:

  1. Generating the graphical assets for the player and its skin.
  2. Creating the function required to create the player.
  3. Creating the event listener required for playing a video when a thumb is clicked.

Generating the Graphical Assets for the Player and its Skin

In order for us to use the FLVPlayback Component we must import the graphical assets of it into the FLA library. To add one to the library you first have to open your Components Panel (Window>Components), look for the FLVPlayback Component under the Video category and simply drag one on to the stage. Once you do that you should be able to find an instance of this component in the library (Window>Library).

AS3 - XML Video Player Component

You can learn more about the AS3 FLVPlayback Component by reviewing our tutorial on this topic.

That would take care of the player assets, however, our player is going to have a special skin with a controller on it. This skin is a special SWF file that is loaded at run time. The first step in generating this requires selecting the skin and then testing the movie.

To pick a skin, select the component's instance on the stage, then access the Properties Inspector, click on the Parameters tab, look for the Skin field and click on the skin name.

AS3 - XML Video Player

Clicking on this should open the Select Skin window, the one we are using is called SkinOverPlaySeekMute. Select that one, press OK, then Test your movie (Ctrl+Enter). This should generate the SWF file for your skin in the same folder as your FLA. If you check your project folder you should find this file there.

AS3 - Skin File Generated

Back to your FLA, you should now delete the component you have on stage because we are going to create the one we need using ActionScript.

Creating the Player Using ActionScript

Back to the Actions panel. In order to be able to use the FLVPlayback Component we must import the necessary classes for this. To do this we need to use the import keyword. Type the following at the top of your code to do this:

import fl.video.*;

We also need to create a variable to host an instance of our component. Right below our existing variable definitions add one named my_player to do this task:

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;
var my_player:FLVPlayback;

We now can start creating this instance. All of our code for this process will be placed within a separate function called makePlayer(). This function will have to do the following:

  1. Create an instance of the component in the my_player variable.
  2. Set up the skin.
  3. Configure its size and position.
  4. Add my_player to the display list.

Start off by creating the function at the bottom of all your existing code:

function makePlayer():void{

}

We will now create the the instance of the component in the my_player variable and set up the skin instantly.

function makePlayer():void{
my_player = new FLVPlayback();
my_player.skin = "SkinOverPlaySeekMute.swf";
my_player.skinBackgroundColor = 0xAEBEFB;
my_player.skinBackgroundAlpha = 0.5;


}
We set the skin background color to 0xAEBEFB and set it to 50% transparent. You can alter these variables if you want to have a different effect.
You can learn more about the AS3 FLVPlayback Component by reviewing our tutorial on this topic.

The x and y positions of the video were specified in the XML file, we are going to use the variables we previously retrieved to use up these two properties:

function makePlayer():void{
my_player = new FLVPlayback();
my_player.skin = "SkinOverPlaySeekMute.swf";
my_player.skinBackgroundColor = 0xAEBEFB;
my_player.skinBackgroundAlpha = 0.5;

my_player.x = video_x;
my_player.y = video_y;

}

The width and the height will be hard coded in the ActionScript, if you are using the videos I provided you will have to use the same values I put down:

function makePlayer():void{
my_player = new FLVPlayback();
my_player.skin = "SkinOverPlaySeekMute.swf";
my_player.skinBackgroundColor = 0xAEBEFB;
my_player.skinBackgroundAlpha = 0.5;

my_player.x = video_x;
my_player.y = video_y;
my_player.width = 480;
my_player.height = 270;

}

We now can finally add this to the display list to make it visible:

function makePlayer():void{
my_player = new FLVPlayback();
my_player.skin = "SkinOverPlaySeekMute.swf";
my_player.skinBackgroundColor = 0xAEBEFB;
my_player.skinBackgroundAlpha = 0.5;

my_player.x = video_x;
my_player.y = video_y;
my_player.width = 480;
my_player.height = 270;

main_container.addChild(my_player);

}

To finish up you must call this function from within the processXML event listener function:

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

}

You can now test your movie to see our inactive player on stage:

AS3 - XML Video Player

Playing a Video by Clicking a Thumbnail

Making our FLVPlayback Component play a video is a simple that task that simply requires setting the .source property of the instance to the URL of the video to be played. We are going to set this property through a Mouse Event listener attached to our thumbnails.

Instead of registering the event listener with each thumbnail, AS3 allows us to communicate with all these objects by registering the event listener with their parent Sprite. Each object inside the Sprite can react to the event due to a concept called Event Propagation and this saves us time and effort. The parent of our thumbnails here is the thumbs Sprite.

We are going to register for the MouseEvent.CLICK with a listener function called playVideo() which we will define in a bit. This event will be registered from within the makeContainers() function:

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

thumbs = new Sprite();
thumbs.addEventListener(MouseEvent.CLICK, playVideo);
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);
}

The next step is to create the event listener function. Define playVideo() at the bottom of all your code:

function playVideo(e:MouseEvent):void{

}

The task of this function would be to retrieve the URL of the video to be played and then simply set it as the source of our FLVPlayback instance. This command will be executed through each thumbnail as it gets clicked. So we need to have a reference for which thumbnail is clicked. The easiest way to create this reference is by using the name property of our thumbnails. If we can set this to the same counter we used in our loop, we can use that same reference later to retrieve the corresponding video URL for the image.

This will require us to go back to the callThumbs() function and store the i counter in the name property of each of our thumbnails:

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.name = i;
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);

}
}

We should now be able to retrieve the reference for this corresponding thumbnail from its name property. Go back to the playVideo() event listener function and create a variable to retrieve the URL

function playVideo(e:MouseEvent):void{
var video_url = my_videos[e.target.name].@URL;
}

The line above accesses the name of the thumbnail through the e.target reference which is a reference to the object actually being clicked. The reference of the name is then used to retrieve the URL attribute from the my_videos XML list.

All we have to do now is set play the video using the .source property:

function playVideo(e:MouseEvent):void{
var video_url = my_videos[e.target.name].@URL;
my_player.source = video_url;
}

That should do it. Test your movie now and try clicking on any of the thumbnails. It should play the video!

The video player is now fully functional, the final section of this tutorial we will perform a number of tasks to polish the player by adding the hover effects to the thumbnails and make the player automatically start playing a video.

Summary of this Page

  1. Imported the Component's graphical assets to the library.
  2. Generated the skin's SWF file.
  3. Create the makePlayer() function create an instance of the player and place on stage.
  4. Creating the playVideo() event listener function to play a video when a thumbnail is clicked.

In the final section we will polish our video player.

Next page