- Build a Dynamic Video Player with ActionScript 3: Part 1 of 3
- Build a Dynamic Video Player with ActionScript 3: Part 2 of 3
- 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!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Zachary Haight
-
David
-
http://patareco.carbonmade.com/ Patareco
-
http://alkoty.com Al
-
http://www.elquefaltaba.es/qborreda.html qborreda
-
sebastian
-
sebastian
-
Shinfo
-
daniel
-
Bruno Crociquia
-
http://sites.google.com/site/sagarranpise/ Sagar Ranpise
-
sebastian
-
Sagar S. Ranpise
-
http://www.martinbursesi.com/blog Martin
-
http://haberfon.blogspot.com/ Haberfon
-
http://www.bloggerzbible.blogspot.com/ Bloggerzbible
-
Serge!Sokolov
-
http://www.flashiology.com Humayun
-
http://www.flashiology.com Humayun
-
http://oliverdalton.com Oliver
-
ArC3Nik
-
lewigie
-
bouha
-
angelo
-
Sergio
-
http://www.immrtldesign.com Greg
-
Chris
-
http://www.marduf.com.br marduf
-
mihai invanovici
-
http://www.stevendonea.com Steven
-
nos
-
lia
-
http://perredicarlo.com Perre
-
Victor
-
http://www.google.com Enthusiast
-
Victor
-
Matt
-
Matt
-
Matt
-
Matt
-
Matt
-
Romer
-
http://www.artibaj.pl Artur
-
Roman
-
paul
-
Samuel
-
ivanovici mihai
-
Victor
-
eric b
-
Valerian
-
ahsan
-
Tulkin
-
varsha
-
Anuath
-
bob
-
CBTDebbie
-
Nekollx
-
HELWIN RENE HERNANDEZ FUENTES
-
Fubian Lathanio
-
David
-
Dantoo
-
nacer