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 add some little touches to help make our player look and feel better.

Here is the outline of this section:

  1. Enabling the hand cursor for the thumbnail.
  2. Adding a hover effect to the thumbnails.
  3. Automatically playing the first video when the movie starts.

Enabling the hand cursor for the Thumbnails

If you hover over the thumbnails you would notice the the arrow cursor does not change into the usual hand cursor that indicates that an object is a button. This has to be enabled manually here. To do this simply enabled the buttonMode for the thumbs sub-container 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;
thumbs.buttonMode = true;
main_container.addChild (thumbs);

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

If you test your movie now you should see that the hand cursor appears over your thumbnails.

Adding a Hover Effect for the Thumbnails

This is a more complicated effect that would require us to create two event listeners, one to change the transparency of a thumb when the mouse rolls over and another when the mouse roll out of a thumbnail.

Start off by registering both of these event listeners with your thumbs container from within the makeContainers() function:

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

thumbs = new Sprite();
thumbs.addEventListener(MouseEvent.CLICK, playVideo);
thumbs.addEventListener(MouseEvent.MOUSE_OVER, onOver);
thumbs.addEventListener(MouseEvent.MOUSE_OUT, onOut);
thumbs.x = thumbs_x;
thumbs.y = thumbs_y;
thumbs.buttonMode = true;
main_container.addChild (thumbs);

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

We now need to define these two functions at the button of our code, the first will simply set the transparency to 0.5 and the other one will revert it back to 1.

function onOver (e:MouseEvent):void{
var my_thumb:Loader = Loader(e.target);
my_thumb.alpha = 0.5;
}
function onOut (e:MouseEvent):void{
var my_thumb:Loader = Loader (e.target);
my_thumb.alpha = 1;
}
Remember that target is a reference to the child and currentTarget is a reference to the object to which the event was registered. Please review our AS3 Event Handling tutorial to learn more about this topic.

That should do it. Test your movie now to see the transparency of your thumbs change when you hover the mouse over them!

Auto Play a Video when the Movie Starts

You might want for some reason to play a video automatically as the show starts. To do this you simply have to use the .source property of the FLVplayback Component right after you create your my_player instance.

To play the first video automatically you need to update your makePlayer() function this way:

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);
my_player.source = my_videos[0].@URL;

}

Again, that should do it, you can now test your movie to see your first video playing automatically.

End of Tutorial

This concludes our tutorial, I hope that you learnt something new from it. You can download our end result source file from here (does not contain the videos). Feel free to post any questions you have regarding this tutorial at the Republic of Code Forum.

- End of Tutorial.