Build a Dynamic Video Player with ActionScript 3: Part 3 of 3

Here it is, the final part of our video player tutorial! All we need to do now is get the time indicator working, add our home button click function, position and size the current video and get the featured bar filled with videos along with its scrubber. Let's get started!

Step 1: Video Time

First we need to add a listener to the stage called videoTimeEnterFrame that updates the video time every frame. Add this line to the videoItemClick function.

stage.addEventListener(Event.ENTER_FRAME, videoTimeEnterFrame);  // runs this function every time we enter a new frame

Now let's add the videoTimeEnterFrame function.

function videoTimeEnterFrame(event:Event):void    
{    
    var totalSeconds:Number = ns.time;  // variable to hold the ns.time  
    var totalSeconds2:Number = duration;  // variable to hold the duration
    var minutes:Number = Math.floor(totalSeconds / 60);  // variable to hold the rounded down totalSeconds divided by 60
    var minutes2:Number = Math.floor(totalSeconds2 / 60);  // variable to hold the rounded down totalSeconds2 divided by 60
    var seconds = Math.floor(totalSeconds) % 60;  // variable to get 60 percent of the totalSeconds
    var seconds2 = Math.floor(totalSeconds2) % 60;  // variable to get 60 percent of the totalSecond2
    if(seconds < 10)  // if the seconds variable is less than 10 then...
    {    
        seconds = "0" + seconds;  // the seconds variable is equal to 0:seconds
    }    
    if(seconds2 < 10) // if the seconds2 variable is less than 10 then...
    {    
        seconds2 = "0" + seconds2;  //  the seconds2 variable is equal to 0:seconds
    }    
    videoTimeTxt.text = minutes + ":" + seconds + " / " + minutes2 + ":" + seconds2;  // update the videoTimeTxt field with the total time and current time.    
}

Step 2: Home Button

Adding the click listener for the home button will allow us to return to the top level of the current gallery we are on. Add this to the top of our code below our other functions we have on startup.

homeBtn.addEventListener(MouseEvent.CLICK, homeBtnClick);  // listener for when the home button is clicked

Step 3: homeBtnClick Function

function homeBtnClick(event:MouseEvent):void    
{    
    if(currentGallery == 0)  // if currentGallery variable is equal to 0
    {    
        Tweener.addTween(container_mc, {alpha:0, time:.5, transition:"easeOut", onComplete:removeGallery0}); // tween off the container_mc and run the removeGallery0 function    
    }    
    if(currentGallery == 1)    
    {    
        Tweener.addTween(container_mc, {alpha:0, time:.5, transition:"easeOut", onComplete:removeGallery1});    
    }    
    if(currentGallery == 2)    
    {    
        Tweener.addTween(container_mc, {alpha:0, time:.5, transition:"easeOut", onComplete:removeGallery2});    
    }    
}

Test your movie, click on a gallery to see the list of videos. Now click the home button. Your player will now fade off the current videos and replace them with the current category items.

Step 4:

To set the videoWidth & videoHeight we need to add some code to first get the values. We need to add this code to the videoItemClickFunction above the ns.play line.

videoWidth = xml.GALLERY[currentGallery].CATEGORY[categoryItemName].ITEM[videoItemName].file_width;  // gets the video width from the xml 
videoHeight = xml.GALLERY[currentGallery].CATEGORY[categoryItemName].ITEM[videoItemName].file_height;  // gets the video height from the xml
video.width = videoWidth;  // set the video's width to the videoWidth variable
video.height = videoHeight;  // set the video's height to the videoHeight variable

Step 5: positionVideo Listener & Function

Now we have the video set to the correct width and height. The last thing to do is position it in the middle of the viewing area. Add this line to the videoItemClickFunction above the ns.play(currentVideo):void line.

positionVideo();

Then add the function to handle the positionVideo event.

function positionVideo():void    
{    
    video.x = 0; // set the video's x to 0
    video.y = 0;  // set the video's y to 0
    var vidWidthDif = videoBlackBox.width - videoWidth;  // get the difference of the videoBlackBox's width and the video width - hold it in this variable    
    var vidHeightDif = videoBlackBox.height - videoHeight;  // get the difference of the videoBlackBox's height and video height - hold it in this variable
    video.x = vidWidthDif / 2;  // position the video's x
    video.y = vidHeightDif / 2;  // position the video's y
}

Step 6: Move the ns.play one more time

Cut and paste this line to the bottom of positionVideo function.

ns.play(currentVideo);

Now if you test your file you will have the video get the width and height we set in the XML and change its dimentions, then play the video.

Step 7: Add Featured Item Variables

These variables will create and hold our featured itmes in a movieclip.

var featuredContainer:MovieClip;  // create a new movieclip to hold the featured videos items
var featuredThumbLoader:Loader;  //  create a new loader to load the featured videos
var featuredItemName;  // create a new featuredItemName variable to hold the name of the featured item we will click

Step 8: Featured Videos

In order to check for featured videos in the xml, add this code to the myXmlLoaded function. It will loop through all the videos and return the ones that are set to true.

checkForFeaturedVids();  // run this function when the xml is loaded

Step 9: checkForFeaturedVids Function

This function is just like the makeGalleryItems function we set up in part 2. We will create the featuredItem movieclips for the featuredContainer based on the xml, lay them out and space them correctly, load in the thumbnail image, and remove the preloader with a separate function below.

Editor's note: Well, here we are again.. Those of you using FireFox would have found the page freezing thanks to this little block of ActionScript. To keep things running smoothly, here's the code for download. Sorry for the inconvenience.

Step 10: Click Listener

Now we need to set a listener to handle what happens when we click a featured item movieclip. Add this line to the if statement in the checkForFeaturedVids function below the myFeaturedItems btnOver & btnOut listeners.

myFeaturedItem.addEventListener(MouseEvent.CLICK, myFeaturedItemClick);

Step 11: myFeaturedItemClick function

This is what happens when we click a featured item:

function myFeaturedItemClick(event:MouseEvent):void    
{    
    featuredItemName = event.target.name;  // get the current item and set it to the featuredItemName variable
    currentVideo = xml.GALLERY.CATEGORY.ITEM.file_path[featuredItemName];  // set our currentVideo variable to the featured video in the xml
    videoTitleTxt.text = xml.GALLERY.CATEGORY.ITEM.file_title[featuredItemName];  // set the video titles name
    videoWidth = xml.GALLERY.CATEGORY.ITEM.file_width[featuredItemName];  // get the video width
    videoHeight = xml.GALLERY.CATEGORY.ITEM.file_height[featuredItemName];  // get the video height
    video.width = videoWidth;  // set the video width
    video.height = videoHeight;  // set the video height
    positionVideo();  // run this function
    stage.addEventListener(Event.ENTER_FRAME, videoTimeEnterFrame); // change the video playback time   
}

Step 12: Featured Scrollbar Variables

First add variable to hold the names for short names of movieclips.

var featuredScrollTrack:MovieClip = featuredBox_mc.featuredScrollbar_mc.featuredScrollbarTrack_mc;  
var featuredScrollThumb:MovieClip = featuredBox_mc.featuredScrollbar_mc.featuredScrollbarThumb_mc;    
var featuredScrollMask:MovieClip = featuredBox_mc.featuredScrollbar_mc.featuredMasker_mc;
var xOffset:Number;
var xMin:Number = 0;
var xMax:Number;
var featuredThumbDif:Number;

Step 13: Featured Slider Button Listeners

Then add these lines to the top of our code below the other listeners that start when the file opens.

featuredScrollThumb.addEventListener(MouseEvent.MOUSE_OVER, btnOver);    
featuredScrollThumb.addEventListener(MouseEvent.MOUSE_OUT, btnOut);    
featuredScrollThumb.buttonMode = true;    
featuredScrollThumb.mouseChildren = false;

Step 14: checkFeaturedContainerWidth

Here we will be doing something very similar to the checkFeaturedContainerWidth function in part 2.

function checkFeaturedContainerWidth():void    
{    
    if(featuredContainer.width > featuredScrollMask.width)    
    {    
        linkFeaturedScroller();    
        featuredScrollThumb.addEventListener(MouseEvent.MOUSE_DOWN, featuredScrollbarThumbDown);    
        stage.addEventListener(MouseEvent.MOUSE_UP, featuredScrollbarThumbUp);    
        featuredScrollThumb.visible = true;    
        featuredScrollThumb.alpha = 0;    
        Tweener.addTween(featuredScrollThumb, {alpha:1, time:.5, transition:"easeOut"});    
    }    
    else    
    {    
        featuredScrollThumb.removeEventListener(MouseEvent.MOUSE_DOWN, sideScrollbarThumbDown);    
        stage.removeEventListener(MouseEvent.MOUSE_UP, featuredScrollbarThumbUp);    
        Tweener.addTween(featuredScrollThumb, {alpha:0, time:.5, transition:"easeOut", onComplete:hideFeaturedScrollbarThumb});    
    }    
}    
function hideFeaturedScrollbarThumb():void    
{    
    featuredScrollThumb.visible = false;    
}

Step 15: Functions

Add the functions to go with the listeners in the checkFeaturedContainerWidth function.

function linkFeaturedScroller():void
{
	featuredScrollThumb.x = 0;
	featuredContainer.mask = featuredScrollMask;
	xMax = featuredScrollTrack.width - featuredScrollThumb.width;
}
function featuredScrollbarThumbDown(event:MouseEvent):void
{
	featuredScrollThumb.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);
	featuredScrollThumb.removeEventListener(MouseEvent.MOUSE_OUT, btnOut);
	stage.addEventListener(MouseEvent.MOUSE_MOVE, featuredScrollbarThumbMove);
	xOffset = mouseX - featuredScrollThumb.x;
}
function featuredScrollbarThumbUp(event:MouseEvent):void
{
	featuredScrollThumb.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
	featuredScrollThumb.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
	featuredScrollThumb.gotoAndStop("over");
	Tweener.addTween(featuredContainer, {_Blur_blurX:0, time:1, transition:"easeOut"});
	stage.removeEventListener(MouseEvent.MOUSE_MOVE, featuredScrollbarThumbMove);
}
function featuredScrollbarThumbMove(event:MouseEvent):void
{
	featuredScrollThumb.x = mouseX - xOffset;
	if(featuredScrollThumb.x <= xMin)
	{
		featuredScrollThumb.x = xMin;
	}
	else if(featuredScrollThumb.x >= xMax)
	{
		featuredScrollThumb.x = xMax;
	}
	featuredThumbDif = featuredScrollThumb.x / xMax;
	Tweener.addTween(featuredContainer, {x:((-featuredThumbDif * (featuredContainer.width - featuredScrollMask.width)) + 25), _Blur_blurX:5, time:1, transition:"easeOut"});
	event.updateAfterEvent();
}

Conclusion

So there you have it, give yourself a pat on the back if you finished and start puting some videos up on the web!

I hope you enjoyed this tutorial, and I hope you learned a couple of things that you can use in your own projects. If anyone would like to see a 4th tutorial, I will do one that brings full screen functionality to the player. Let me know in the comments. Thanks for reading!