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

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

Zachary Haight on Feb 3rd 2010 with 54 comments
This entry is part 3 of 3 in the series Build a Dynamic Video Player with ActionScript 3.0

Build a Dynamic Video Player with ActionScript 3.0

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!

Other parts in this series:«Build a Dynamic Video Player with ActionScript 3: Part 2 of 3

Tags: Videos
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By Zachary Haight

Rollover to read this author's bio or click through to see a full list of posts by this author.

I work for a company in Boise Idaho as a Flash developer. I just got into writing code about year ago and absolutely love ActionScript 3. I also love snowboarding, HALO, and any hip hop music "HOVA for life!". Follow me on Twitter: zackattack27  

Plus Premium
 
 
Add Comment

Discussion 54 Comments

  1. David says:
    February 3, 2010 at 6:51 am

    Great tutorial series. Congrats.

    I do have one question (and maybe I missed it earlier). In the XML file, does the path to the video have to be local? In other words, can you specify a YouTube video via URL and have the player play that?

    Reply
  2. qborreda says:
    February 3, 2010 at 7:28 am

    This has been a very interesting set of tuts. Keep them coming!!
    Thank you!!

    Reply
  3. sebastian says:
    February 3, 2010 at 2:26 pm

    epic tut man! :)
    allthough i have one issue, if you spam click 3 videos fast, sometimes the video pop out of the MC. but if you click next time it auto fit back again.. how can that make sense? :)

    Reply
  4. sebastian says:
    February 3, 2010 at 3:20 pm

    Basicly what i figured out is that ( Maybe i just did it wrong ) but however..
    Right now the position of the played video is in the middle, but however if you click on 1 video and quickly another fast, it jumps out of the mc frame.
    But however if you click right after, it fits perfectly in the middle.. beside that the IPC video, is all the way in the top.. what am i doing wrong/What is wrong? :)

    anyhow, if i change the value to 0 fx ( video.x = vidWidthDif / 0; ) its not in the middle, but however it does not extend the content beyond the mc, but however the IPC video is still in the top.. so how to fix? :)

    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
    ns.play(currentVideo);
    }

    Reply
  5. Shinfo says:
    February 4, 2010 at 2:25 pm

    But does it run Crysis?

    Reply
  6. daniel says:
    February 4, 2010 at 4:18 pm

    alguien tiene la fuente completa de este player porque el xml no me funciona
    los paths estan bien no se que pasa.
    me pueden pasar por mail
    a
    dancartoon@gmail.com
    la fuente con todas las carpetas

    muchas gracias

    daniel

    Reply
    • Bruno Crociquia says:
      February 5, 2010 at 2:57 am

      Translating for you guys…

      “Does someone has the complete source for this player because the xml doesnt work for me, the paths are all good i don’t know whats wrong,if you could send it to my email:—– the source with all the folders, thank you”

      Reply
  7. Sagar Ranpise says:
    February 4, 2010 at 10:48 pm

    @shinfo you are right.

    Even I am not able to play this gallery. I figured the problem, it starts from STEP 8 before it the gallery works fine.

    The function name myXmlLoaded doesn’t exist and even if we add the code in xmlLoaded function still the gallery doesn’t work.

    Awating a proper solution.

    But till then the gallery rocks.

    Thanks for this awesome tut!

    Reply
    • sebastian says:
      February 6, 2010 at 12:02 pm

      agreed, im having the same issues…im been over this 100 times now.. cant figure out the solution :)

      Reply
      • Sagar S. Ranpise says:
        March 2, 2010 at 1:30 am

        @shinfo Its working now!!!

        @sebastian Its working now, I placed checkForFeaturedVids(); in the function xmlLoaded after if loop and did remaining steps.

        In step 8, it should be xmlLoaded function mentioned. but after that remaining steps are correct.

  8. Martin says:
    February 5, 2010 at 11:54 am

    It’s an interesting player! Does someone has developed the player using OOP and XML?

    Thanks guys

    Reply
  9. Haberfon says:
    February 5, 2010 at 5:11 pm

    great tutorial.

    Reply
  10. Bloggerzbible says:
    February 7, 2010 at 6:27 pm

    Nice video player

    Reply
  11. Serge!Sokolov says:
    February 11, 2010 at 6:47 am

    Thanks for the excellent tutorial! It helped me getting into AS3.

    Reply
  12. Humayun says:
    February 14, 2010 at 10:11 am

    it is a beautiful site.i will visit again. very helpful. Thanks

    Reply
  13. Humayun says:
    February 14, 2010 at 10:15 am

    it is a beautiful site.i will visit again. very helpful. Thanks

    Reply
  14. Oliver says:
    March 1, 2010 at 5:54 am

    BRILL TUT LOVE IT !! CANT WAIT TO TRY AND REBUILD THE ENTIRE THING – JUST WONDERING IF YOU WERE GOING TO DO A FULL SCREEN VERSION?

    I MIGHT TRY AND INCORPORATE THIS TUT INTO YOUR PLAYER – http://active.tutsplus.com/tutorials/video/treat-your-viewers-to-a-full-screen-hd-video-experience/

    Reply
  15. ArC3Nik says:
    March 4, 2010 at 1:04 pm

    Super tutorial

    I wanted to know if someone could send me the complete script working, because I’m French and I have much problem from step 8 …

    My mail: arc3nik[at]gmail.com

    Thank you

    Reply
  16. angelo says:
    March 10, 2010 at 6:40 pm

    Cool Beans!!

    Some small details were overlooked but I guess it was all good since I was forced to actually learn as3 rather than copy/paste code.

    Thank you Sir. Hope to see more cool tutorials.

    Reply
  17. Sergio says:
    March 13, 2010 at 9:55 pm

    Great Tutorial!!

    I use your code to make a video gallery for a website. I put the gallery inside a movie clip (video_mc) in a section with a frame label. When I click in another menu button the sound of the videos still playing.

    I’ve tried to disable movie clip on mouse click but not works to turn off the sound of the videos

    Example:

    function onClick(event:MouseEvent)
    {
    myMovieClipInstanceName.stop();
    gotoAndStop(“contacts”);
    }

    Any Suggestions?

    Reply
  18. Greg says:
    March 16, 2010 at 9:55 am

    Have you encountered any problems with seeking/scrubbing? I’m working on a player right now that when you are scrubbing through, it sometimes prematurely ends and throws an Invalid Seek Time error.

    Reply
  19. Chris says:
    April 20, 2010 at 10:54 am

    Nice tutorial by the way. Does this video gallery have a capability of streaming videos from a flash media server? I tried throwing a rtmp url in for the file path in the XML file but it doesn’t pull the video from the media server. Could the streaming url source be defined in the AS and the pull the exact video from the XML?

    Any suggestions?

    Reply
  20. marduf says:
    May 7, 2010 at 9:44 am

    I am a little lost in the code.
    Do you can send me the final code?

    My email: marduf@gmail.com

    Thank you!

    Reply
  21. mihai invanovici says:
    May 9, 2010 at 12:43 am

    i got a problem. my featured video does not appear, like is not loading . what should i do. i follow this part with attention

    Reply
  22. Steven says:
    May 9, 2010 at 2:27 pm

    I couldn’t get over the Part 2. Can somebody help me and send the complete working code?
    Please, make a post here or send it to my email address:
    stevendonea[at]gmail.com

    Reply
  23. nos says:
    May 11, 2010 at 1:52 pm

    What a dirty mess…

    If it works right.

    Reply
  24. lia says:
    May 19, 2010 at 3:30 pm

    this is all the code in a working shape. Just add it to the ‘Actions’ layer, follow the instructions from step 1(make sure you have the video files in the right location)…and it should work.
    good luck!

    ////// IMPORT CLASSES AND SET STAGE PROPERTIES //////
    import caurina.transitions.*;
    import caurina.transitions.properties.FilterShortcuts;
    stage.scaleMode = StageScaleMode.NO_SCALE;
    stage.align = StageAlign.TOP_LEFT;
    FilterShortcuts.init();

    ////// MAIN STAGE MOVIE CLIPS //////
    var videoBox:MovieClip = player_mc;
    var sidebarBox:MovieClip = rightSidebar_mc;
    var featuredBox:MovieClip = featuredBox_mc;
    var featuredBoxBg:MovieClip = featuredBox_mc.featuredBoxBg_mc;
    //————-Featured Item Variables
    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

    //————–Featured Scrollbar Variables
    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;

    ////// VIDEO MOVIE CLIPS //////
    var playBtn:MovieClip = player_mc.playBtn_mc;
    var pauseBtn:MovieClip = player_mc.pauseBtn_mc;
    var stopBtn:MovieClip = player_mc.stopBtn_mc;
    var videoBlackBox:MovieClip = player_mc.videoBlackBox_mc;
    var videoPreloader:MovieClip = player_mc.videoPreloader_mc;
    var videoTitleTxt:TextField = player_mc.VideoTitle_txt;
    var videoTimeTxt:TextField = player_mc.videoTime_txt;
    var videoThumb:MovieClip = player_mc.videoTrack_mc.videoThumb_mc;
    var videoTrackProgress:MovieClip = player_mc.videoTrack_mc.videoTrackProgress_mc;
    var videoTrackDownload:MovieClip = player_mc.videoTrack_mc.videoTrackDownload_mc;
    var volumeThumb:MovieClip = player_mc.volumeSlider_mc.volumeThumb_mc;
    var volumeTrack:MovieClip = player_mc.volumeSlider_mc.volumeTrackFull_mc;

    ////// VIDEO VARS //////
    var currentVideo:String;
    var videoWidth:Number = 500;
    var videoHeight:Number = 400;
    var videoInterval = setInterval(videoStatus, 100);
    var amountLoaded:Number;
    var duration:Number;
    var scrubInterval;
    var videoSound:SoundTransform;
    var volumeBounds:Rectangle;

    ////// GALLERY BTN VARS //////
    var gallery1Btn = rightSidebar_mc.gallery1Btn_mc;
    var gallery2Btn = rightSidebar_mc.gallery2Btn_mc;
    var gallery3Btn = rightSidebar_mc.gallery3Btn_mc;
    var gallery1BtnTxt = rightSidebar_mc.gallery1Btn_mc.galleryTitle1_txt;
    var gallery2BtnTxt = rightSidebar_mc.gallery2Btn_mc.galleryTitle2_txt;
    var gallery3BtnTxt = rightSidebar_mc.gallery3Btn_mc.galleryTitle3_txt;

    ////// GALLERY VARS //////
    var container_mc:MovieClip;
    var xmlPath:String = “playlist.xml”;
    var xml:XML;
    var currentGallery:Number = 0;
    var i:Number = 0;
    var categoryThumbLoader:Loader;
    var loader = new URLLoader();

    ////// HOME BUTTON TEXT VAR //////
    var homeBtn = rightSidebar_mc.displayBar_mc.homeBtn_mc;
    var homeBtnTxt = rightSidebar_mc.displayBar_mc.galleryTitle_txt;

    ////// SIDE SCROLLBAR VARS //////
    var sideScrollbarMasker = rightSidebar_mc.sideScrollbar_mc.sideScrollbarMask_mc;
    var sideScrollbarThumb = rightSidebar_mc.sideScrollbar_mc.sideScrollbarThumb_mc;
    var sideScrollbarTrack = rightSidebar_mc.sideScrollbar_mc.sideScrollbarTrack_mc;
    var yOffset:Number;
    var yMin:Number = 0;
    var yMax:Number;
    var sideScrollThumbDif:Number;

    ////// VIDEO ITEM VARS //////
    var categoryItemName:String;
    var videoItemName:String;
    var columns:Number = 2;
    var xCount:Number;
    var yCount:Number;
    var a:Number = 0;
    var videoThumbLoader:Loader;

    ////// FILE STARTUP //////
    videoPreloader.visible = false;
    videoTitleTxt.text = “”;
    videoTimeTxt.text = “0:00 / 0:00″;

    playBtn.mouseChildren = false;
    playBtn.buttonMode = true;
    pauseBtn.mouseChildren = false;
    pauseBtn.buttonMode = true;
    stopBtn.mouseChildren = false;
    stopBtn.buttonMode = true;
    videoThumb.mouseChildren = false;
    videoThumb.buttonMode = true;
    volumeThumb.mouseChildren = false;
    volumeThumb.buttonMode = true;

    ////// SET STAGE //////
    setMyStage();
    stage.addEventListener(Event.RESIZE, myResizeEvent);
    addEventListenersForGalleryBtns();

    ////// VIDEO EVENT LISTENERS //////
    playBtn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
    playBtn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
    playBtn.addEventListener(MouseEvent.CLICK, playBtnClick);
    pauseBtn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
    pauseBtn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
    pauseBtn.addEventListener(MouseEvent.CLICK, pauseBtnClick);
    stopBtn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
    stopBtn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
    stopBtn.addEventListener(MouseEvent.CLICK, stopBtnClick);
    videoThumb.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
    videoThumb.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
    videoThumb.addEventListener(MouseEvent.MOUSE_DOWN, videoScrubberDown);
    volumeThumb.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
    volumeThumb.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
    volumeThumb.addEventListener(MouseEvent.MOUSE_DOWN, volumeScrubberDown);

    ////// HOME BUTTON LISTENERS //////
    homeBtn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
    homeBtn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
    homeBtn.buttonMode = true;
    homeBtn.mouseChildren = false;
    homeBtn.addEventListener(MouseEvent.CLICK, homeBtnClick); // listener for when the home button is clicked

    ////// GALLERY BTN CLICK LISTENERS //////
    gallery1Btn.addEventListener(MouseEvent.CLICK, galleryBtnClick0);
    gallery2Btn.addEventListener(MouseEvent.CLICK, galleryBtnClick1);
    gallery3Btn.addEventListener(MouseEvent.CLICK, galleryBtnClick2);
    gallery1Btn.buttonMode = true;
    gallery1Btn.mouseChildren = false;
    gallery2Btn.buttonMode = true;
    gallery2Btn.mouseChildren = false;
    gallery3Btn.buttonMode = true;
    gallery3Btn.buttonMode = false;

    ////// SIDE SCROLLBAR LISTENERS //////
    sideScrollbarThumb.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
    sideScrollbarThumb.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
    sideScrollbarThumb.buttonMode = true;
    sideScrollbarThumb.mouseChildren = false;

    //—————Featured Slider Button Listeners
    featuredScrollThumb.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
    featuredScrollThumb.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
    featuredScrollThumb.buttonMode = true;
    featuredScrollThumb.mouseChildren = false;

    ////// VIDEO CODE //////
    var video:Video = new Video(videoWidth, videoHeight);
    video.x = 0;
    video.y = 0;
    videoBlackBox.addChild(video);
    var nc:NetConnection = new NetConnection();
    nc.connect(null);
    var ns:NetStream = new NetStream(nc);
    ns.addEventListener(NetStatusEvent.NET_STATUS, myStatusHandler);
    ns.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
    video.attachNetStream(ns);
    var newMeta:Object = new Object();
    newMeta.onMetaData = onMetaData;
    ns.client = newMeta;
    ns.bufferTime = 5;

    function asyncErrorHandler(Event:AsyncErrorEvent):void
    {
    //trace(event.text);
    }
    function myStatusHandler(event:NetStatusEvent):void
    {
    //trace(event.info.code);
    switch(event.info.code)
    {
    case “NetStream.Buffer.Full”:
    ns.bufferTime = 10;
    Tweener.addTween(videoPreloader, {alpha:0, time:.3});
    break;
    case “NetStream.Buffer.Empty”:
    ns.bufferTime = 10;
    Tweener.addTween(videoPreloader, {alpha:1, time:.3});
    break;
    case “NetStream.Play.Start”:
    ns.bufferTime = 10;
    Tweener.addTween(videoPreloader, {alpha:1, time:.3});
    break;
    case “NetStream.Seek.Notify”:
    ns.bufferTime = 10;
    Tweener.addTween(videoPreloader, {alpha:1, time:.3});
    break;
    case “NetStream.Seek.InvalidTime”:
    ns.bufferTime = 10;
    Tweener.addTween(videoPreloader, {alpha:1, time:.3});
    break;
    case “NetStream.Play.Stop”:
    Tweener.addTween(videoPreloader, {alpha:0, time:.3});
    ns.pause();
    ns.seek(1);
    break;
    }
    }
    function onMetaData(newMeta:Object):void
    {
    //trace(“Metadata: duration=” + newMeta.duration + ” width=” + newMeta.width + ” height=” + newMeta.height + ” framerate=” + newMeta.framerate);
    duration = newMeta.duration;
    }

    ////// VIDEO BTN FUNCTIONS //////
    function playBtnClick(event:MouseEvent):void
    {
    ns.resume();
    }
    function pauseBtnClick(event:MouseEvent):void
    {
    ns.pause();
    }
    function stopBtnClick(event:MouseEvent):void
    {
    ns.pause();
    ns.seek(0);
    }

    ////// VOLUME SCRUBBER //////
    videoSound = new SoundTransform();
    videoSound.volume = 1;
    ns.soundTransform = videoSound;
    function volumeScrubberDown(event:MouseEvent):void
    {
    volumeBounds = new Rectangle(0,0,75,0);
    volumeThumb.startDrag(false, volumeBounds);
    stage.addEventListener(MouseEvent.MOUSE_UP, volumeThumbUp);
    stage.addEventListener(MouseEvent.MOUSE_MOVE, volumeThumbMove);
    }
    function volumeThumbUp(event:MouseEvent):void
    {
    volumeThumb.stopDrag();
    stage.removeEventListener(MouseEvent.MOUSE_UP, volumeThumbUp);
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, volumeThumbMove);
    }
    function volumeThumbMove(event:MouseEvent):void
    {
    volumeTrack.width = volumeThumb.x;
    videoSound.volume = (volumeThumb.x) / 50;
    ns.soundTransform = videoSound;
    }

    ////// TIMELINE SCRUBBER //////
    function videoStatus():void
    {
    amountLoaded = ns.bytesLoaded / ns.bytesTotal;
    videoTrackDownload.width = amountLoaded * 340;
    videoThumb.x = ns.time / duration * 340;
    videoTrackProgress.width = videoThumb.x;
    }
    function videoScrubberDown(event:MouseEvent):void
    {
    var bounds:Rectangle = new Rectangle(0,0,340,0);
    clearInterval(videoInterval);
    scrubInterval = setInterval(scrubTimeline, 10);
    videoThumb.startDrag(false, bounds);
    stage.addEventListener(MouseEvent.MOUSE_UP, stopScrubbingVideo);
    }
    function scrubTimeline():void
    {
    ns.seek(Math.floor((videoThumb.x / 340) * duration));
    }
    function stopScrubbingVideo(Event:MouseEvent):void
    {
    stage.removeEventListener(MouseEvent.MOUSE_UP, stopScrubbingVideo);
    clearInterval(scrubInterval);
    videoInterval = setInterval(videoStatus, 100);
    videoThumb.stopDrag();
    }

    ////// LOAD XML //////
    loader.load(new URLRequest(xmlPath));
    loader.addEventListener(Event.COMPLETE, xmlLoaded);
    function xmlLoaded(event:Event):void
    {
    if((event.target as URLLoader) != null)
    {
    xml = new XML(loader.data);
    loader.removeEventListener(Event.COMPLETE, xmlLoaded);
    giveGalleryTitles();
    makeGalleryItems();
    //trace(xml);
    checkForFeaturedVids(); // run this function when the xml is loaded
    }
    }

    function checkForFeaturedVids():void
    {
    var f:Number = 0; // create a variable for setting the featuredItem’s name
    var g:Number = 0; // variable used to count the featured items and place them one after another
    var featuredItem = xml.GALLERY.CATEGORY.ITEM; // variable that looks in the xml for all the items
    featuredContainer = new MovieClip();
    featuredContainer.x = 25;
    featuredContainer.y = 0;
    featuredBox.addChild(featuredContainer); // add the featuredContainer to the featuredBox
    for each(var featuredVideoItem in xml.GALLERY.CATEGORY.ITEM.featured_or_not.*) // loop through all the xml to find the featured_or_not line.
    {
    if(featuredVideoItem == true) // if the featured or not line is set to true then…
    {
    var myFeaturedItem:featuredItem_mc = new featuredItem_mc();
    myFeaturedItem.x = (myFeaturedItem.width + 2) * g;
    myFeaturedItem.y = 0;
    myFeaturedItem.buttonMode = true;
    myFeaturedItem.mouseChildren = false;
    myFeaturedItem.name = “” + f;
    myFeaturedItem.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
    myFeaturedItem.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
    myFeaturedItem.addEventListener(MouseEvent.CLICK, myFeaturedItemClick);
    myFeaturedItem.featuredItemTitle_txt.text = xml.GALLERY.CATEGORY.ITEM.file_title.*[f];
    myFeaturedItem.featuredItemDesc_txt.text = xml.GALLERY.CATEGORY.ITEM.file_desc.*[f];
    featuredContainer.alpha = 0;
    Tweener.addTween(featuredContainer, {alpha:1, time:.5, transition:”easeOut”});
    var featuredThumbURL = xml.GALLERY.CATEGORY.ITEM.featured_image.*[f];
    featuredThumbLoader = new Loader();
    featuredThumbLoader.load(new URLRequest(featuredThumbURL));
    featuredThumbLoader.x = 4;
    featuredThumbLoader.y = 4;
    myFeaturedItem.addChildAt(featuredThumbLoader, 5);
    featuredThumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, featuredThumbLoaded);
    featuredContainer.addChild(myFeaturedItem);
    g++;
    }
    f++;
    }
    checkFeaturedContainerWidth();
    }
    function featuredThumbLoaded(event:Event):void
    {
    var featuredPreloader = event.target.loader.parent.featuredItemPreloader_mc;
    Tweener.addTween(featuredPreloader, {alpha:0, time:.5, transition:”easeOut”});
    }

    //———————-checkFeaturedContainerWidth
    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});
    }
    }
    //———————–Functions———————–

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

    function hideFeaturedScrollbarThumb():void
    {
    featuredScrollThumb.visible = false;
    }

    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
    }

    ////// GIVE GALLERY TITLES //////
    function giveGalleryTitles():void
    {
    gallery1BtnTxt.text = xml.GALLERY.@name[0];
    gallery2BtnTxt.text = xml.GALLERY.@name[1];
    gallery3BtnTxt.text = xml.GALLERY.@name[2];
    }

    ////// MAKE GALLERY ITEMS //////
    function makeGalleryItems():void
    {
    container_mc = new MovieClip();
    container_mc.x = 0;
    container_mc.y = 60;
    sidebarBox.addChild(container_mc);
    homeBtnTxt.text = xml.GALLERY.@name[currentGallery];
    if(i > 0)
    {
    i = 0;
    }
    for each(var galleryNode:XML in xml.GALLERY[currentGallery].CATEGORY)
    {
    var categoryItem:categoryItem_mc = new categoryItem_mc();
    categoryItem.categoryItemTitle_txt.text = galleryNode.@name;
    categoryItem.categoryItemDesc_txt.text = galleryNode.@desc;
    categoryItem.x = 0;
    categoryItem.y = categoryItem.height * i;
    categoryItem.buttonMode = true;
    categoryItem.mouseChildren = false;
    categoryItem.name = “” + i;
    categoryItem.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
    categoryItem.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
    categoryItem.addEventListener(MouseEvent.CLICK, clearForVideoItems);
    container_mc.alpha = 0;
    Tweener.addTween(container_mc, {alpha:1, time:.5, transition:”easeOut”});
    var categoryThumbURL = galleryNode.@thumb;
    categoryThumbLoader = new Loader();
    categoryThumbLoader.load(new URLRequest(categoryThumbURL));
    categoryThumbLoader.x = 5;
    categoryThumbLoader.y = 4;
    categoryItem.addChildAt(categoryThumbLoader, 3);
    categoryThumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, categoryThumbLoaded);
    container_mc.addChild(categoryItem);
    i++;
    }
    checkContainerHeight();
    }
    function categoryThumbLoaded(event:Event):void
    {
    categoryThumbLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, categoryThumbLoaded);
    var categoryPreloader = event.target.loader.parent.categoryItemPreloader_mc;
    Tweener.addTween(categoryPreloader, {alpha:0, time:1.5, transition:”easeOut”});
    }

    ////// CLEAR FOR VIDEO ITEMS //////
    function clearForVideoItems(event:MouseEvent):void
    {
    categoryItemName = event.target.name;
    Tweener.addTween(container_mc, {alpha:0, time:.5, transition:”easeOut”, onComplete:removeCategoryItemsForVideoItems});
    }
    function removeCategoryItemsForVideoItems():void
    {
    sidebarBox.removeChild(container_mc);
    makeVideoItems();
    }

    ////// CREATE VIDEO ITEMS //////
    function makeVideoItems():void
    {
    xCount = 0;
    yCount = 0;
    container_mc = new MovieClip();
    container_mc.x = 2;
    container_mc.y = 60;
    sidebarBox.addChild(container_mc);
    if(a > 0)
    {
    a = 0;
    }
    for each(var videoNode:XML in xml.GALLERY[currentGallery].CATEGORY[categoryItemName].ITEM)
    {
    var videoItem:videoItem_mc = new videoItem_mc;
    videoItem.videoItemTitle_txt.text = videoNode.file_title;
    videoItem.videoItemDesc_txt.text = videoNode.file_desc;
    videoItem.x = (videoItem.width + 3) * xCount;
    videoItem.y = (videoItem.height + 3) * yCount;
    videoItem.buttonMode = true;
    videoItem.mouseChildren = false;
    videoItem.name = “” + a;
    videoItem.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
    videoItem.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
    videoItem.addEventListener(MouseEvent.CLICK, videoItemClick);
    container_mc.alpha = 0;
    Tweener.addTween(container_mc, {alpha:1, time:.5, transition:”easeOut”});
    var videoThumbURL = videoNode.file_image;
    videoThumbLoader = new Loader();
    videoThumbLoader.load(new URLRequest(videoThumbURL));
    videoThumbLoader.x = 3;
    videoThumbLoader.y = 3;
    videoItem.addChild(videoThumbLoader);
    videoThumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, videoThumbLoaded);
    container_mc.addChild(videoItem);
    a++;
    if(xCount + 1 < columns)
    {
    xCount++;
    }
    else
    {
    xCount = 0;
    yCount++;
    }
    }
    checkContainerHeight();
    }
    function videoThumbLoaded(event:Event):void
    {
    videoThumbLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, videoThumbLoaded);
    var videoPreloader = event.target.loader.parent.videoItemPreloader_mc;
    Tweener.addTween(videoPreloader, {alpha:0, time:1.5, transition:"easeOut"});
    }

    ////// VIDEO ITEM CLICK FUNCTION //////
    function videoItemClick(event:MouseEvent):void
    {
    videoItemName = event.target.name;
    currentVideo = xml.GALLERY[currentGallery].CATEGORY[categoryItemName].ITEM[videoItemName].file_path;
    videoTitleTxt.text = xml.GALLERY[currentGallery].CATEGORY[categoryItemName].ITEM[videoItemName].file_title;
    stage.addEventListener(Event.ENTER_FRAME, videoTimeEnterFrame); // runs this function every time we enter a new frame
    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
    positionVideo();
    }

    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
    ns.play(currentVideo);
    }

    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 sideScrollbarMasker.height)
    {
    linkSideScroller();
    sideScrollbarThumb.addEventListener(MouseEvent.MOUSE_DOWN, sideScrollbarThumbDown);
    stage.addEventListener(MouseEvent.MOUSE_UP, sideScrollbarThumbUp);
    sideScrollbarThumb.visible = true;
    sideScrollbarThumb.alpha = 0;
    Tweener.addTween(sideScrollbarThumb, {alpha:1, time:.5, transition:”easeOut”});
    }
    else
    {
    sideScrollbarThumb.removeEventListener(MouseEvent.MOUSE_DOWN, sideScrollbarThumbDown);
    stage.removeEventListener(MouseEvent.MOUSE_UP, sideScrollbarThumbUp);
    Tweener.addTween(sideScrollbarThumb, {alpha:0, time:.5, transition:”easeOut”, onComplete:hideSideScrollbarThumb});
    }
    }
    function hideSideScrollbarThumb():void
    {
    sideScrollbarThumb.visible = false;
    }

    ////// SIDE SCROLLBAR //////
    function linkSideScroller():void
    {
    sideScrollbarThumb.y = 0;
    container_mc.mask = sideScrollbarMasker;
    yMax = sideScrollbarTrack.height – sideScrollbarThumb.height;
    }
    function sideScrollbarThumbDown(event:MouseEvent):void
    {
    sideScrollbarThumb.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);
    sideScrollbarThumb.removeEventListener(MouseEvent.MOUSE_OUT, btnOut);
    stage.addEventListener(MouseEvent.MOUSE_MOVE, sideScrollbarThumbMove);
    yOffset = mouseY – sideScrollbarThumb.y;
    }
    function sideScrollbarThumbUp(event:MouseEvent):void
    {
    sideScrollbarThumb.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
    sideScrollbarThumb.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
    sideScrollbarThumb.gotoAndStop(“over”);
    Tweener.addTween(container_mc, {_Blur_blurY:0, time:1, transition:”easeOut”});
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, sideScrollbarThumbMove);
    }
    function sideScrollbarThumbMove(event:MouseEvent):void
    {
    sideScrollbarThumb.y = mouseY – yOffset;

    if(sideScrollbarThumb.y = yMax)
    {
    sideScrollbarThumb.y = yMax;
    }
    sideScrollThumbDif = sideScrollbarThumb.y / yMax;
    Tweener.addTween(container_mc, {y:((-sideScrollThumbDif * (container_mc.height – sideScrollbarMasker.height)) + 58), _Blur_blurY:5, time:1, transition:”easeOut”});
    event.updateAfterEvent();
    }

    ////// BTN OVER & OUT FUNCTIONS //////
    function btnOver(event:MouseEvent):void
    {
    event.currentTarget.gotoAndPlay(“over”);
    }
    function btnOut(event:MouseEvent):void
    {
    event.currentTarget.gotoAndPlay(“out”);
    }

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

    ////// POSITION CONTENT //////
    function setMyStage():void
    {
    videoBox.x = stage.stageWidth / 2 – (featuredBoxBg.width / 2);
    videoBox.y = (stage.stageHeight / 2 – videoBox.height / 2) – featuredBoxBg.height / 2;
    sidebarBox.x = (stage.stageWidth / 2 + 92);
    sidebarBox.y = videoBox.y;
    featuredBox.x = videoBox.x;
    featuredBox.y = videoBox.y + videoBox.height + 4;
    }
    function myResizeEvent(event:Event):void
    {
    videoBox.x = stage.stageWidth / 2 – (featuredBoxBg.width / 2);
    videoBox.y = (stage.stageHeight / 2 – videoBox.height / 2) – featuredBoxBg.height / 2;
    sidebarBox.x = (stage.stageWidth / 2 + 92);
    sidebarBox.y = videoBox.y;
    featuredBox.x = videoBox.x;
    featuredBox.y = videoBox.y + videoBox.height + 4;
    }

    Reply
    • Perre says:
      June 1, 2010 at 9:46 am

      Hey guys, a warning not to waste your time with the script submitted by lia above. Just to test it, I replaced my working, finished tutorial script with this one. It contains loads of errors, starting with smart quotes (curly quotes) throughout. They were easily cleaned up by find and replaces, but then it’s missing a “>” and then it issued another error in how it loads xml… don’t copy it. I recommend Active Tuts remove it and ping Zachary (who included the full script at the end of the first part of his tutorial) to consider adding something similar here…

      Reply
      • Victor says:
        July 22, 2010 at 1:26 pm

        Yes please add a file with a full script … because I got really confused and probably I’m not the only one …There’re about 500 lines of ActionsScript and if you add how it should be sorted out it would be really easy for all of us to quickly edit our code. It’s brilliant tutorial.. I learn a lot from it , thank you big time ;]

  25. Enthusiast says:
    July 15, 2010 at 12:10 am

    lia post is messed up

    other than Curl error
    it has some syntax aswell

    can some1 correct her post ?

    Reply
  26. Victor says:
    July 28, 2010 at 1:43 pm

    Hey, I’ve created the whole player and I need some advice. I’ve uploaded it to my site removed the “feautured videos” to run more smoothly , and I’ve created a function to refresh my player.It updates every minute – loading new data from playlist.xml, the problem is from all those new URL requests- Will the player run more slowly and is there a way do delete the old URL request , because I’m unfamiliar with this class.
    Hope you understood me, my English isn’t very good ;] Thank You !

    Reply
  27. Matt says:
    July 30, 2010 at 12:57 pm

    I’m sorry, but all this tutorial has done is confuse the living bejesus out of me. I’ve tried to follow this third part but nothing is working. I’m sorry but I don’t understand where things are supposed to go. could you please post the full code like you did with the other two lessons please.

    Reply
    • Michael Williams says:
      July 30, 2010 at 1:34 pm
      Staff

      Hey Matt,

      Check the “Source” link at the top of the page :)

      Reply
      • Matt says:
        July 31, 2010 at 8:42 pm

        Michael,

        I checked the source file and all it said was this:

        // ** AS3 DYNAMIC VIDEO PLAYER ** //
        // DESIGN:ZACHARY HAIGHT
        // CODE:ZACHARY HAIGHT
        // THIS FILE IS FOR TUTORAIL PURPOSES ONLY.
        // PLEASE DON’T USE IT AS YOUR OWN.
        // IF YOU NEED TO USE PARTS OF THIS FILE AT LEAST CHANGE
        // THE LAYOUT AND ADD SOME COOL NEW FEATURES. :)
        // ENJOY!

        There is no full code in the file at all. I need to the full code. I can’t figure out where to put half of the things that said are needed here. Even for the one that says, “Here’s the code.” That’s great and I thank you very much for it, but I don’t know where to put it.

      • Michael Williams says:
        August 3, 2010 at 12:46 am
        Staff

        Ah, you’re right. Sorry, I assumed it’d be there :/

  28. Matt says:
    July 30, 2010 at 12:58 pm

    Do you by any chance have a tutorial that shows how to use this player with a database interface so that it can automatically update?

    Reply
  29. Matt says:
    August 5, 2010 at 6:47 am

    Michael, thanks for your help. I finally got this working, but I’m not sure how to add it to my website. How do I do that?

    Reply
  30. Matt says:
    August 5, 2010 at 8:33 am

    Michael, I’ve published it as a .swf and I’m using DreamWeaver. I used Insert > Media > SWF. I named it flash player. The player shows up, but nothing plays. How do I get the player to read the video/audio files?

    Reply
  31. Romer says:
    August 18, 2010 at 11:22 am

    Hello,

    I follow all steps, but this tutorial not work fine!

    I think, the author post demo and the souce code is other.

    Why?

    I need this code to understand AS3 for my personal use

    Can you send me?

    tks

    Reply
  32. Artur says:
    September 12, 2010 at 9:42 am

    Hi
    How to create preloader to video with show no bytes loaded but time loaded of video file.
    Same as on youtube player.
    If i move slider of position video on end loading bar
    slider move go back, no start playing in place where i put his.

    Reply
  33. Roman says:
    February 7, 2011 at 3:43 pm

    You’ve done the GREAT work man! I bring to you my admire! So huge tutorial. And I’d like to see the 4th part of this video tut and have a fullscreen functionality in the player! So if you can – do it for us! And thank you one more time!

    Reply
  34. paul says:
    February 24, 2011 at 9:11 am

    hi all i nearly have this working but i get some errors regarding “categoryItemName”

    i have fixed other errors but this one has me stumped

    Scene 1, Layer ‘AS3′, Frame 1, Line 544 1120: Access of undefined property categoryItemName.
    Scene 1, Layer ‘AS3′, Frame 1, Line 567 1120: Access of undefined property categoryItemName.
    Scene 1, Layer ‘AS3′, Frame 1, Line 620 1120: Access of undefined property categoryItemName.
    Scene 1, Layer ‘AS3′, Frame 1, Line 621 1120: Access of undefined property categoryItemName.

    can anyone help me please?

    Reply
  35. Samuel says:
    March 1, 2011 at 2:01 pm

    Hello, I have only one problem with positionVideo
    Scene 1, Layer ‘AS3′, Frame 1, Line 360 1180: Call to a possibly undefined method positionVideo.

    I don´t know how to fix that…

    Someone could help me???
    Someone could send me the code working because I´m stuck !!!!!

    here´s my code ….

    ////// IMPORT CLASSES AND SET STAGE PROPERTIES //////
    import caurina.transitions.*;
    import caurina.transitions.properties.FilterShortcuts;
    stage.scaleMode = StageScaleMode.NO_SCALE;
    stage.align = StageAlign.TOP_LEFT;
    FilterShortcuts.init();

    ////// MAIN STAGE MOVIE CLIPS //////
    var videoBox:MovieClip = player_mc;
    var sidebarBox:MovieClip = rightSidebar_mc;
    var featuredBox:MovieClip = featuredBox_mc;
    var featuredBoxBg:MovieClip = featuredBox_mc.featuredBoxBg_mc;

    ////// VIDEO MOVIE CLIPS //////
    var playBtn:MovieClip = player_mc.playBtn_mc;
    var pauseBtn:MovieClip = player_mc.pauseBtn_mc;
    var stopBtn:MovieClip = player_mc.stopBtn_mc;
    var videoBlackBox:MovieClip = player_mc.videoBlackBox_mc;
    var videoPreloader:MovieClip = player_mc.videoPreloader_mc;
    var videoTitleTxt:TextField = player_mc.VideoTitle_txt;
    var videoTimeTxt:TextField = player_mc.videoTime_txt;
    var videoThumb:MovieClip = player_mc.videoTrack_mc.videoThumb_mc;
    var videoTrackProgress:MovieClip = player_mc.videoTrack_mc.videoTrackProgress_mc;
    var videoTrackDownload:MovieClip = player_mc.videoTrack_mc.videoTrackDownload_mc;
    var volumeThumb:MovieClip = player_mc.volumeSlider_mc.volumeThumb_mc;
    var volumeTrack:MovieClip = player_mc.volumeSlider_mc.volumeTrackFull_mc;

    ////// VIDEO VARS //////
    var currentVideo:String;
    var videoWidth:Number = 500;
    var videoHeight:Number = 400;
    var videoInterval = setInterval(videoStatus, 100);
    var amountLoaded:Number;
    var duration:Number;
    var scrubInterval;
    var videoSound:SoundTransform;
    var volumeBounds:Rectangle;

    ////// GALLERY BTN VARS //////
    var gallery1Btn = rightSidebar_mc.gallery1Btn_mc;
    var gallery2Btn = rightSidebar_mc.gallery2Btn_mc;
    var gallery3Btn = rightSidebar_mc.gallery3Btn_mc;
    var gallery1BtnTxt = rightSidebar_mc.gallery1Btn_mc.galleryTitle1_txt;
    var gallery2BtnTxt = rightSidebar_mc.gallery2Btn_mc.galleryTitle2_txt;
    var gallery3BtnTxt = rightSidebar_mc.gallery3Btn_mc.galleryTitle3_txt;

    ////// GALLERY VARS //////
    var container_mc:MovieClip;
    var xmlPath:String = “playlist.xml”;
    var xml:XML;
    var currentGallery:Number = 0;
    var i:Number = 0;
    var categoryThumbLoader:Loader;
    var loader = new URLLoader();

    ////// HOME BUTTON TEXT VAR //////
    var homeBtn = rightSidebar_mc.displayBar_mc.homeBtn_mc;
    var homeBtnTxt = rightSidebar_mc.displayBar_mc.galleryTitle_txt;

    ////// SIDE SCROLLBAR VARS //////
    var sideScrollbarMasker = rightSidebar_mc.sideScrollbar_mc.sideScrollbarMask_mc;
    var sideScrollbarThumb = rightSidebar_mc.sideScrollbar_mc.sideScrollbarThumb_mc;
    var sideScrollbarTrack = rightSidebar_mc.sideScrollbar_mc.sideScrollbarTrack_mc;
    var yOffset:Number;
    var yMin:Number = 0;
    var yMax:Number;
    var sideScrollThumbDif:Number;

    ////// VIDEO ITEM VARS //////
    var categoryItemName:String;
    var videoItemName:String;
    var columns:Number = 2;
    var xCount:Number;
    var yCount:Number;
    var a:Number = 0;
    var videoThumbLoader:Loader;

    ////// FILE STARTUP //////
    videoPreloader.visible = false;
    videoTitleTxt.text = “”;
    videoTimeTxt.text = “0:00 / 0:00″;

    playBtn.mouseChildren = false;
    playBtn.buttonMode = true;
    pauseBtn.mouseChildren = false;
    pauseBtn.buttonMode = true;
    stopBtn.mouseChildren = false;
    stopBtn.buttonMode = true;
    videoThumb.mouseChildren = false;
    videoThumb.buttonMode = true;
    volumeThumb.mouseChildren = false;
    volumeThumb.buttonMode = true;

    ////// SET STAGE //////
    setMyStage();
    stage.addEventListener(Event.RESIZE, myResizeEvent);
    addEventListenersForGalleryBtns();

    ////// VIDEO EVENT LISTENERS //////
    playBtn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
    playBtn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
    playBtn.addEventListener(MouseEvent.CLICK, playBtnClick);
    pauseBtn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
    pauseBtn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
    pauseBtn.addEventListener(MouseEvent.CLICK, pauseBtnClick);
    stopBtn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
    stopBtn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
    stopBtn.addEventListener(MouseEvent.CLICK, stopBtnClick);
    videoThumb.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
    videoThumb.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
    videoThumb.addEventListener(MouseEvent.MOUSE_DOWN, videoScrubberDown);
    volumeThumb.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
    volumeThumb.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
    volumeThumb.addEventListener(MouseEvent.MOUSE_DOWN, volumeScrubberDown);

    ////// HOME BUTTON LISTENERS //////
    homeBtn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
    homeBtn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
    homeBtn.buttonMode = true;
    homeBtn.mouseChildren = false;

    ////// GALLERY BTN CLICK LISTENERS //////
    gallery1Btn.addEventListener(MouseEvent.CLICK, galleryBtnClick0);
    gallery2Btn.addEventListener(MouseEvent.CLICK, galleryBtnClick1);
    gallery3Btn.addEventListener(MouseEvent.CLICK, galleryBtnClick2);
    gallery1Btn.buttonMode = true;
    gallery1Btn.mouseChildren = false;
    gallery2Btn.buttonMode = true;
    gallery2Btn.mouseChildren = false;
    gallery3Btn.buttonMode = true;
    gallery3Btn.buttonMode = false;

    ////// SIDE SCROLLBAR LISTENERS //////
    sideScrollbarThumb.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
    sideScrollbarThumb.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
    sideScrollbarThumb.buttonMode = true;
    sideScrollbarThumb.mouseChildren = false;

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

    ////// VIDEO CODE //////
    var video:Video = new Video(videoWidth, videoHeight);
    video.x = 0;
    video.y = 0;
    videoBlackBox.addChild(video);
    var nc:NetConnection = new NetConnection();
    nc.connect(null);
    var ns:NetStream = new NetStream(nc);
    ns.addEventListener(NetStatusEvent.NET_STATUS, myStatusHandler);
    ns.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
    video.attachNetStream(ns);
    var newMeta:Object = new Object();
    newMeta.onMetaData = onMetaData;
    ns.client = newMeta;
    ns.bufferTime = 5;

    function asyncErrorHandler(Event:AsyncErrorEvent):void
    {
    //trace(event.text);
    }
    function myStatusHandler(event:NetStatusEvent):void
    {
    //trace(event.info.code);
    switch(event.info.code)
    {
    case “NetStream.Buffer.Full”:
    ns.bufferTime = 10;
    Tweener.addTween(videoPreloader, {alpha:0, time:.3});
    break;
    case “NetStream.Buffer.Empty”:
    ns.bufferTime = 10;
    Tweener.addTween(videoPreloader, {alpha:1, time:.3});
    break;
    case “NetStream.Play.Start”:
    ns.bufferTime = 10;
    Tweener.addTween(videoPreloader, {alpha:1, time:.3});
    break;
    case “NetStream.Seek.Notify”:
    ns.bufferTime = 10;
    Tweener.addTween(videoPreloader, {alpha:1, time:.3});
    break;
    case “NetStream.Seek.InvalidTime”:
    ns.bufferTime = 10;
    Tweener.addTween(videoPreloader, {alpha:1, time:.3});
    break;
    case “NetStream.Play.Stop”:
    Tweener.addTween(videoPreloader, {alpha:0, time:.3});
    ns.pause();
    ns.seek(1);
    break;
    }
    }
    function onMetaData(newMeta:Object):void
    {
    //trace(“Metadata: duration=” + newMeta.duration + ” width=” + newMeta.width + ” height=” + newMeta.height + ” framerate=” + newMeta.framerate);
    duration = newMeta.duration;
    }

    ////// VIDEO BTN FUNCTIONS //////
    function playBtnClick(event:MouseEvent):void
    {
    ns.resume();
    }
    function pauseBtnClick(event:MouseEvent):void
    {
    ns.pause();
    }
    function stopBtnClick(event:MouseEvent):void
    {
    ns.pause();
    ns.seek(0);
    }

    ////// PARTE 3 BOTÃO VOLTAR //////
    homeBtn.addEventListener(MouseEvent.CLICK, homeBtnClick); // listener for when the home button is clicked
    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});
    }
    }
    ////// VOLUME SCRUBBER //////
    videoSound = new SoundTransform();
    videoSound.volume = 1;
    ns.soundTransform = videoSound;
    function volumeScrubberDown(event:MouseEvent):void
    {
    volumeBounds = new Rectangle(0,0,75,0);
    volumeThumb.startDrag(false, volumeBounds);
    stage.addEventListener(MouseEvent.MOUSE_UP, volumeThumbUp);
    stage.addEventListener(MouseEvent.MOUSE_MOVE, volumeThumbMove);
    }
    function volumeThumbUp(event:MouseEvent):void
    {
    volumeThumb.stopDrag();
    stage.removeEventListener(MouseEvent.MOUSE_UP, volumeThumbUp);
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, volumeThumbMove);
    }
    function volumeThumbMove(event:MouseEvent):void
    {
    volumeTrack.width = volumeThumb.x;
    videoSound.volume = (volumeThumb.x) / 50;
    ns.soundTransform = videoSound;
    }

    ////// TIMELINE SCRUBBER //////
    function videoStatus():void
    {
    amountLoaded = ns.bytesLoaded / ns.bytesTotal;
    videoTrackDownload.width = amountLoaded * 340;
    videoThumb.x = ns.time / duration * 340;
    videoTrackProgress.width = videoThumb.x;
    }
    function videoScrubberDown(event:MouseEvent):void
    {
    var bounds:Rectangle = new Rectangle(0,0,340,0);
    clearInterval(videoInterval);
    scrubInterval = setInterval(scrubTimeline, 10);
    videoThumb.startDrag(false, bounds);
    stage.addEventListener(MouseEvent.MOUSE_UP, stopScrubbingVideo);
    }
    function scrubTimeline():void
    {
    ns.seek(Math.floor((videoThumb.x / 340) * duration));
    }
    function stopScrubbingVideo(Event:MouseEvent):void
    {
    stage.removeEventListener(MouseEvent.MOUSE_UP, stopScrubbingVideo);
    clearInterval(scrubInterval);
    videoInterval = setInterval(videoStatus, 100);
    videoThumb.stopDrag();
    }

    ////// LOAD XML //////
    loader.load(new URLRequest(xmlPath));
    loader.addEventListener(Event.COMPLETE, xmlLoaded);
    function xmlLoaded(event:Event):void
    {
    if((event.target as URLLoader) != null)
    {
    xml = new XML(loader.data);
    loader.removeEventListener(Event.COMPLETE, xmlLoaded);
    giveGalleryTitles();
    makeGalleryItems();
    checkForFeaturedVids(); // run this function when the xml is loaded
    //trace(xml);
    }
    }

    ////// CÓDIGO IMPORTADO //////
    function checkForFeaturedVids():void
    {
    var f:Number = 0; // create a variable for setting the featuredItem’s name
    var g:Number = 0; // variable used to count the featured items and place them one after another
    var featuredItem = xml.GALLERY.CATEGORY.ITEM; // variable that looks in the xml for all the items
    featuredContainer = new MovieClip();
    featuredContainer.x = 25;
    featuredContainer.y = 0;
    featuredBox.addChild(featuredContainer); // add the featuredContainer to the featuredBox
    for each(var featuredVideoItem in xml.GALLERY.CATEGORY.ITEM.featured_or_not.*) // loop through all the xml to find the featured_or_not line.
    {
    if(featuredVideoItem == true) // if the featured or not line is set to true then…
    {
    var myFeaturedItem:featuredItem_mc = new featuredItem_mc();
    myFeaturedItem.x = (myFeaturedItem.width + 2) * g;
    myFeaturedItem.y = 0;
    myFeaturedItem.buttonMode = true;
    myFeaturedItem.mouseChildren = false;
    myFeaturedItem.name = “” + f;
    myFeaturedItem.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
    myFeaturedItem.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
    myFeaturedItem.addEventListener(MouseEvent.CLICK, myFeaturedItemClick);
    myFeaturedItem.featuredItemTitle_txt.text = xml.GALLERY.CATEGORY.ITEM.file_title.*[f];
    myFeaturedItem.featuredItemDesc_txt.text = xml.GALLERY.CATEGORY.ITEM.file_desc.*[f];
    featuredContainer.alpha = 0;
    Tweener.addTween(featuredContainer, {alpha:1, time:.5, transition:”easeOut”});
    var featuredThumbURL = xml.GALLERY.CATEGORY.ITEM.featured_image.*[f];
    featuredThumbLoader = new Loader();
    featuredThumbLoader.load(new URLRequest(featuredThumbURL));
    featuredThumbLoader.x = 4;
    featuredThumbLoader.y = 4;
    myFeaturedItem.addChildAt(featuredThumbLoader, 5);
    featuredThumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, featuredThumbLoaded);
    featuredContainer.addChild(myFeaturedItem);
    g++;
    }
    f++;
    }
    checkFeaturedContainerWidth();
    }
    function featuredThumbLoaded(event:Event):void
    {
    var featuredPreloader = event.target.loader.parent.featuredItemPreloader_mc;
    Tweener.addTween(featuredPreloader, {alpha:0, time:.5, transition:”easeOut”});
    }

    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 = 100; // set the video width
    video.height = 100; // set the video height
    positionVideo(); // run this function
    stage.addEventListener(Event.ENTER_FRAME, videoTimeEnterFrame); // change the video playback time
    }

    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;

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

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

    ////// GIVE GALLERY TITLES //////
    function giveGalleryTitles():void
    {
    gallery1BtnTxt.text = xml.GALLERY.@name[0];
    gallery2BtnTxt.text = xml.GALLERY.@name[1];
    gallery3BtnTxt.text = xml.GALLERY.@name[2];
    }

    ////// MAKE GALLERY ITEMS //////
    function makeGalleryItems():void
    {
    container_mc = new MovieClip();
    container_mc.x = 0;
    container_mc.y = 60;
    sidebarBox.addChild(container_mc);
    homeBtnTxt.text = xml.GALLERY.@name[currentGallery];
    if(i > 0)
    {
    i = 0;
    }
    for each(var galleryNode:XML in xml.GALLERY[currentGallery].CATEGORY)
    {
    var categoryItem:categoryItem_mc = new categoryItem_mc();
    categoryItem.categoryItemTitle_txt.text = galleryNode.@name;
    categoryItem.categoryItemDesc_txt.text = galleryNode.@desc;
    categoryItem.x = 0;
    categoryItem.y = categoryItem.height * i;
    categoryItem.buttonMode = true;
    categoryItem.mouseChildren = false;
    categoryItem.name = “” + i;
    categoryItem.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
    categoryItem.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
    categoryItem.addEventListener(MouseEvent.CLICK, clearForVideoItems);
    container_mc.alpha = 0;
    Tweener.addTween(container_mc, {alpha:1, time:.5, transition:”easeOut”});
    var categoryThumbURL = galleryNode.@thumb;
    categoryThumbLoader = new Loader();
    categoryThumbLoader.load(new URLRequest(categoryThumbURL));
    categoryThumbLoader.x = 5;
    categoryThumbLoader.y = 4;
    categoryItem.addChildAt(categoryThumbLoader, 3);
    categoryThumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, categoryThumbLoaded);
    container_mc.addChild(categoryItem);
    i++;
    }
    checkContainerHeight();
    }
    function categoryThumbLoaded(event:Event):void
    {
    categoryThumbLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, categoryThumbLoaded);
    var categoryPreloader = event.target.loader.parent.categoryItemPreloader_mc;
    Tweener.addTween(categoryPreloader, {alpha:0, time:1.5, transition:”easeOut”});
    }

    ////// CLEAR FOR VIDEO ITEMS //////
    function clearForVideoItems(event:MouseEvent):void
    {
    categoryItemName = event.target.name;
    Tweener.addTween(container_mc, {alpha:0, time:.5, transition:”easeOut”, onComplete:removeCategoryItemsForVideoItems});
    }
    function removeCategoryItemsForVideoItems():void
    {
    sidebarBox.removeChild(container_mc);
    makeVideoItems();
    }

    ////// CREATE VIDEO ITEMS //////
    function makeVideoItems():void
    {
    xCount = 0;
    yCount = 0;
    container_mc = new MovieClip();
    container_mc.x = 2;
    container_mc.y = 60;
    sidebarBox.addChild(container_mc);
    if(a > 0)
    {
    a = 0;
    }
    for each(var videoNode:XML in xml.GALLERY[currentGallery].CATEGORY[categoryItemName].ITEM)
    {
    var videoItem:videoItem_mc = new videoItem_mc;
    videoItem.videoItemTitle_txt.text = videoNode.file_title;
    videoItem.videoItemDesc_txt.text = videoNode.file_desc;
    videoItem.x = (videoItem.width + 3) * xCount;
    videoItem.y = (videoItem.height + 3) * yCount;
    videoItem.buttonMode = true;
    videoItem.mouseChildren = false;
    videoItem.name = “” + a;
    videoItem.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
    videoItem.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
    videoItem.addEventListener(MouseEvent.CLICK, videoItemClick);
    container_mc.alpha = 0;
    Tweener.addTween(container_mc, {alpha:1, time:.5, transition:”easeOut”});
    var videoThumbURL = videoNode.file_image;
    videoThumbLoader = new Loader();
    videoThumbLoader.load(new URLRequest(videoThumbURL));
    videoThumbLoader.x = 3;
    videoThumbLoader.y = 3;
    videoItem.addChild(videoThumbLoader);
    videoThumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, videoThumbLoaded);
    container_mc.addChild(videoItem);
    a++;
    if(xCount + 1 sideScrollbarMasker.height)
    {
    linkSideScroller();
    sideScrollbarThumb.addEventListener(MouseEvent.MOUSE_DOWN, sideScrollbarThumbDown);
    stage.addEventListener(MouseEvent.MOUSE_UP, sideScrollbarThumbUp);
    sideScrollbarThumb.visible = true;
    sideScrollbarThumb.alpha = 0;
    Tweener.addTween(sideScrollbarThumb, {alpha:1, time:.5, transition:”easeOut”});
    }
    else
    {
    sideScrollbarThumb.removeEventListener(MouseEvent.MOUSE_DOWN, sideScrollbarThumbDown);
    stage.removeEventListener(MouseEvent.MOUSE_UP, sideScrollbarThumbUp);
    Tweener.addTween(sideScrollbarThumb, {alpha:0, time:.5, transition:”easeOut”, onComplete:hideSideScrollbarThumb});
    }
    }
    function hideSideScrollbarThumb():void
    {
    sideScrollbarThumb.visible = false;
    }

    ////// SIDE SCROLLBAR //////
    function linkSideScroller():void
    {
    sideScrollbarThumb.y = 0;
    container_mc.mask = sideScrollbarMasker;
    yMax = sideScrollbarTrack.height – sideScrollbarThumb.height;
    }
    function sideScrollbarThumbDown(event:MouseEvent):void
    {
    sideScrollbarThumb.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);
    sideScrollbarThumb.removeEventListener(MouseEvent.MOUSE_OUT, btnOut);
    stage.addEventListener(MouseEvent.MOUSE_MOVE, sideScrollbarThumbMove);
    yOffset = mouseY – sideScrollbarThumb.y;
    }
    function sideScrollbarThumbUp(event:MouseEvent):void
    {
    sideScrollbarThumb.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
    sideScrollbarThumb.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
    sideScrollbarThumb.gotoAndStop(“over”);
    Tweener.addTween(container_mc, {_Blur_blurY:0, time:1, transition:”easeOut”});
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, sideScrollbarThumbMove);
    }
    function sideScrollbarThumbMove(event:MouseEvent):void
    {
    sideScrollbarThumb.y = mouseY – yOffset;

    if(sideScrollbarThumb.y = yMax)
    {
    sideScrollbarThumb.y = yMax;
    }
    sideScrollThumbDif = sideScrollbarThumb.y / yMax;
    Tweener.addTween(container_mc, {y:((-sideScrollThumbDif * (container_mc.height – sideScrollbarMasker.height)) + 58), _Blur_blurY:5, time:1, transition:”easeOut”});
    event.updateAfterEvent();
    }

    ////// BTN OVER & OUT FUNCTIONS //////
    function btnOver(event:MouseEvent):void
    {
    event.currentTarget.gotoAndPlay(“over”);
    }
    function btnOut(event:MouseEvent):void
    {
    event.currentTarget.gotoAndPlay(“out”);
    }

    ////// POSITION CONTENT //////
    function setMyStage():void
    {
    videoBox.x = stage.stageWidth / 2 – (featuredBoxBg.width / 2);
    videoBox.y = (stage.stageHeight / 2 – videoBox.height / 2) – featuredBoxBg.height / 2;
    sidebarBox.x = (stage.stageWidth / 2 + 92);
    sidebarBox.y = videoBox.y;
    featuredBox.x = videoBox.x;
    featuredBox.y = videoBox.y + videoBox.height + 4;
    }
    function myResizeEvent(event:Event):void
    {
    videoBox.x = stage.stageWidth / 2 – (featuredBoxBg.width / 2);
    videoBox.y = (stage.stageHeight / 2 – videoBox.height / 2) – featuredBoxBg.height / 2;
    sidebarBox.x = (stage.stageWidth / 2 + 92);
    sidebarBox.y = videoBox.y;
    featuredBox.x = videoBox.x;
    featuredBox.y = videoBox.y + videoBox.height + 4;
    }

    stage.addEventListener(Event.ENTER_FRAME, videoTimeEnterFrame); // runs this function every time we enter a new frame
    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.
    }

    ////// LIÇÃO PARTE 3 //////
    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

    thanks

    Reply
  36. ivanovici mihai says:
    June 3, 2011 at 7:28 am

    i got a problem with xml.
    On local the video gallery workes well, but when i put on the website server, the xml is not loading.

    Reply
  37. Victor says:
    September 7, 2011 at 11:47 pm

    Thanks Zach. Nice video player. I have been wanting to know how add a scroll down list for my videos.

    The tutorial is a little hard to follow but I finally got it. I’m looking forward to adding more functionality to it.

    Thanks again.

    Reply
  38. eric b says:
    December 5, 2011 at 6:57 am

    I have loved this player for a while and really want to make a pureMVC version of it.

    Reply
  39. Valerian says:
    December 30, 2011 at 8:56 am

    Can someone pls that success full put this code together give a link to the right code or fla file?

    Reply
  40. ahsan says:
    January 11, 2012 at 12:12 pm

    hi,
    i want to play videos from on-line links (like from YouTube, iTunes and http://soundcloud.com ).
    i need such player in flash which accept url of video in parameter and play that video in player..
    can any one tell me is this player will play the video of youtube or we have to save the video in our local computer first..
    and also send me the complete source with as3 code.

    Reply
  41. Tulkin says:
    February 8, 2012 at 12:49 pm

    In Step 13 Build a Dynamic Video Player with ActionScript 3: Part 3 of 3

    instead of

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

    write:

    if (featuredScrollThumb) /*or if( featuredScrollThumb != null}*/
    {

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

    Tha’s it.Everything will work

    Reply

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.