Hostinicon
GET HOSTING FROM $3.95/MO PLUS A FREE YEAR ON TUTS+ (RRP $180). HURRY OFFER LIMITED. Check it out
Advertisement

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

by
Gift

Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo

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.

Now let's add the videoTimeEnterFrame function.

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.

Step 3: homeBtnClick Function

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.

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.

Then add the function to handle the positionVideo event.

Step 6: Move the ns.play one more time

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

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.

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.

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.

Step 11: myFeaturedItemClick function

This is what happens when we click a featured item:

Step 12: Featured Scrollbar Variables

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

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.

Step 14: checkFeaturedContainerWidth

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

Step 15: Functions

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

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!

Advertisement