Advertisement
  1. Code
  2. ActionScript
Code

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

by
Difficulty:IntermediateLength:LongLanguages:

It's on to part two of our Custom AS3 Video Player! In the previous chapter we became familiar with the start file, added some interactivity to the buttons and (most importantly) got the video playing.

In this second part we are going to set up the xml for all the the videos settings. We will change how our player loads videos and get preloaders working for all of our thumbnails. We will be able to add, change and modify our videos on the fly with XML. Let's get started!

Step 1: Create Thumbnails

We need to get a thumbnail image of all the videos we are working with.

Note: If you have followed the first couple of steps in the previous tutorial you should already have this step done.

How I usually do this is to open the video I am working with in a player like VLC Player or Wimpy Player and press Command-Control-Shift-3 on Mac or the Print Screen button on PC. Once you've done this, open up Photoshop and create a new blank document. Then past the clipboard contents onto the canvas. Command-v on Mac Control-v on PC.

Now get the crop tool and crop your image to the exact pixel on all four sides. Now we need to resize our image to some specific sizes. We will need a 145x60 px image for our video thumbnail. If this is going to be one of your featured videos then we will also need a 82x82 px image for our featured item thumbnails, and if you want to use one of these images for any of the category thumbnails, then you will need to make a 50x50 px image. If you have a different image you want to represent a specific category then just crop it to the 50x50 size and save it to the correct folder.

Now save all the 82x82 px images to the "output/flv/thumb/featured" folder. Save all the 145x60 px images to the "output/flv/thumbs/video" folder. And all the 82x82 px images to the "output/flv/thumbs/featured" folder. Make sure you assign them logical names you will remember.

Now you should have all your images set up and ready to be brought into flash with xml.

Cropping Screen Caps

Step 2: XML Fun!

Now that we have all of our video thumbnails set up and ready to go, open your favorite text editor (Dreamweaver in my case) and create a new .xml file. First save the file in the "output" folder as playlist.xml. Note: If you have followed the first couple of steps in the previous tutorial you should already have this step done.

This is the part where you will be placing all the videos in specific areas so pay attention. First type this:

Now We put all the rest of the code between these two tags. Let's create the three galleries. Now add this:

The "GALLERY 1" will be displayed in the first tab gallery button above our playlist on the right sidebar so name it whatever you want. The next GALLERY will be the name of the second tab gallery button and so on. Note: This is the only hard coded part of this player. I have only set it up for 3 gallery tabs so you can not add any more the way it is currently set up :(

Step 3: Categories

Now we need to create some categories. Here you can have as many as you want in any of the tree galleries. To do this you need to add a "CATEGORY" tag between any of the three galleries. So if you had a Gallery titled Sports, you could create categories within that Sports gallery for football, baseball, basketball, soccer, etc. Your code should now look something like this.

Let's look at what we added to the "CATEGORY" tag. We first gave it a name. The first example was "Category 1.1". This will be displayed on the first category in the first gallery. Next we added the desc="VariousVideos", this is a short description about the specific category. Finally we added our thumb="flv/thumbs/category/jdsmith-freak-alley.jpg". This is calling the .jpg image we saved in the category thumbnail folder. If you want to use a different one then use that. I just used the thumbs we already have.

Step 4: Add Video Tags

Now we will add the video tags for the categories. To do this, add some code to one of the "CATEGORY" tags. Here is an example:

Let's look at what we just did. First we have "ITEM" tags. These hold each of the specific videos and their information. Inside those "ITEM" tags we have "<file_path>" which points to the specific video's location. Then we have the "<file_width>" and "<file_height>" These set the file width and height. Next you have the "<file_title>" which is the name you want to add to this video. It will be displayed on the video thumbnail and below the video in the player. Next you have the "<file_desc>" tag that again is a short description of the specific video that will be shown below the title on the video thumbnail button. After that we have the "<file_image>". This points to the thumbnail of the video. Then we have the "<featured_image>" tag which is most likely the same as the thumbnail unless you want to change it to add a banner or something. Finally we have the "<featured_or_not>" tag. This is either set to true of false. If it is set to true it will be called to the featured box below the player in the next tutorial.

Please just open up the .xml file I provided and copy that to your file. The reason for this is that there is a lot of code and you need to make sure one of your Galleries has enough Categories to populate a scrollbar, and one of your Categories has enough Video items to populate a scrollbar. We will be making the scrollbar shortly.

Step 5: Set up Variables

Good, now we have our xml file set up and ready to work with. Let's jump back to flash and open our actions panel on the first keyframe. We need to set up some variables to what we have going.

Step 6: Load the xml

Now let's actually load in the xml and use a trace statement to view it. Add this code to the bottom of our actionscript 3 layer back in flash.

Now if you test your file you should have all the xml we wrote in the output panel. Good, now let's use it. Note: comment out or delete the "trace(xml); line after testing. I find it annoying when it pops up each time you test, but do whatever you prefer.

Step 7: Add More Variables

These are variables for our gallery buttons and our dynamic text:

Step 8: Gallery Button Titles

Now let's add a listener to our xmlLoaded function we just created. Add this line:

Your code for this function should now look like this:

Now let's add the function for the giveGalleryTitles listener.

Step 9: Add Some More Variables

Let's add some more variables that point to our home icon button, our home icon dynamic text, set our currentGallery index and create a categoryThumbLoader to load our categoryThumbs.

Step 10: Listeners for Home Button

Let's set up our listeners, buttonMode, and mouseChildren for our home icon button. This button, when clicked, will bring the user from any level in the right sidebar they may be at to the top level of the current gallery they are in. We will use this in the third tutorial. Type the following:

Step 11: Thumbnails

Finally we'll add a listener to our xmlLoaded function below the giveGalleryTitles listener.

Now let's create the function for this listener.

Step 12: Add a Container

Add a container to the sidebar and place it 60 px down so that it is lined up with the bottom of our homeBtn. Inside the makeGalleryItems function type this:

Now your sidebar will have an invisible container inside it that we will now populate, and the name in the home button text box should be populated according to whatever gallery we are on.

Step 13: Add a For Statement

OK, now we'll add a for statement that will loop through our xml and populate the container with some thumbnails. Add this code to the makeGalleryItems function below everything else:

Wow, let's go over what we just did. It should be commented well, but here is a quick summary: First we are using a loop statement to get the number of categories we have in our currentGallery (it is set to 0 right now which is the first gallery in our xml. FYI xml numbering starts at 0 not 1. You can read more about the basics of XML in Dru Kepple's AS3 101: XML tut.) we will change it when we click one of the Gallery buttons. Once that happens, the body of this for statement will run each time it hits a CATEGORY tag.

Next we created a new instance of our categoryItem movieClip in our library. Then we set its name and description. Then we placed it at its x location of 0. We then set its y position to the height of our categoryItem and then multiplied that by i. We then set the buttonMode and MouseChildren for the thumbnail. We added a name to the item also using the "i" variable. Then we added our listeners for rollovers. Set its initial alpha to 0. Used the Tweener class to bring its alpha to 1 so it fades on. Then we actually added the categoryItem to the stage inside the contentHolder, and finally we added 1 to the "i" variable.

If you test now you will see your categoryItems being populated on the stage in the contentHolder. Also if you rollover the items they should have rollovers and rollouts.

categoryItems Being Populated

Step 14: Reset i

We now need to add an if statement to reset that "i" variable when we click a gallery button or our home button, otherwise the thumbnails will not start at the top again. Add this code to our make gallery items function, above our for statement:

Step 15: Handle the categoryItem Thumbnails

Now let's go back into our for statement we were working with. We need to add some code to bring in the thumbnails. Add this code above the "container_mc.addChild(categoryItem);" line and below our "Tweener.addTween..." line:

We are not ready for testing just yet. First let's go over what we've just written. We created a categoryThumbURL and linked it to the name of our category in our xml. Then we created a new Loader called categoryThumbLoader to load our thumbs. Next we loaded the thumbs then placed them in their x and y positions inside the categoryItem movieClip. Then we added it to the stage on the categoryItem layer of 3. The reason for that is we need to be under the preloader that is there and not cover it up. Then we set a listener that listens for the completion of the loaded thumbnails.

Let's now add the function for "categoryThumbLoaded".

Step 16: categoryThumbLoaded

We'll add the function below all our code. It will get rid of the categoryThumb's preloader.

Here we created a variable we will only use here to target the categoryItemPreloader_mc in the categoryItem_mc being exported from our library. If you test now you will load the file and the preloaders should quickly disappear. If you test online they should stay a little bit longer depending on your internet speed.

Here is what our final code should look like for the makeGalleryItems function:

Test your movie now, Your category items should have thumbnails and the preloader should tween off once the thumb is loaded.

Step 17: Functionality for the Gallery Buttons

We need to set up a couple of listeners for our gallery buttons that will determine which one is active and which ones have rollovers and rollouts. Add this to the top of the code below the other listeners:

Now let's add the function for the addEventListenersForGalleryBtns listener. Add this code below everything else:

Here we have a couple of if statements that will run when the file opens and also when you click a gallery button and the home button. They pretty much turn on and off the specific button. Note: this could have been done with a switch statement that would have been a little cleaner. So do that if you want. This does not work though until we add the listeners for our gallery buttons, but that is what we are going to do next.

Step 18: Listeners, mouseChildren and buttonMode

We should get the gallery buttons working and functioning a little better with this code:

Now let's add the functions to handle the 3 gallery button's CLICK events.

What we are doing is checking to see which currentGallery we are on (and not on) and performing its function. We also have a new thing with the Tweeners. We are calling a function when the tween is completed that actually removes the gallery from the container movieClip. So now we need to add the 3 functions below:

These 3 functions will remove the "galleryItems" from the container. We would not need this step if we did not tween our container_mc's alpha to 0 before we cleared it. You should now be able to test your file and click the 3 gallery buttons to switch between the them!

Step 19: Scrollbar

Now we want to add some vars to make our custom scrollbar. What we need to do in the next couple of steps is to create a scrollbar, check to see if the container height is taller than the scroller and if so link the scrollbar to the container_mc movieClip. Sounds easy, let's get coding... First add some variables for short naming purposes.

Now add some listeners and buttonMode/mouseChildren.

Step 20: Checking Container Height

Add a listener to the makeGalleryItems function. Place the listener outside the for statement, below the last closing bracket.

Let's add the function for this listener that runs after we have looped through the for statement below all of our code so far.

We just checked to see if the container_mc's height is greater than the sideScrollbarMasker's height. If so it makes the sideScrollbarThumb visible, sets it's alpha to 0 and then tweens it on. If it is not tall enough, we tween it off and run a small function that runs after the tween to make the sideScrollbarThumb not visible. If you test your movie and move from one gallery button to the other the scrollbar should be checking to see if it is showing or not. If so it will tween on and if not it will tween off. Go ahead, give it a try.

Step 21: Side Scrollbar Vars

Now we need to set some variables for the side scrollbar to get it working when it is showing. Add this code to the bottom of the list of variables we have going.

Step 22: Side Scrollbar Functions

Let's get the side scrollbar working. We need to set up a couple of functions here. We will have a function that handles the MOUSE_DOWN event, the MOUSE_UP event, and the MOUSE_MOVE event. Here they are. Note: I got this code from Lee Brimilow. He has a site called gotoandlearn.com that is great for tutorials. Definitely check it out, Awesome CS5 app tutorial just out!

This is not all we need to do, we need to change the checkContainerHeight function.

Step 23: checkContainerHeight Function

We need to change the way our checkContainerHeight function works by adding some code. Your checkContainerHeight function should look like this (commented code is what I added):

Test your movie now. Your scrubber should appear and disappear depending on what gallery you are on. If the scrubber is visible you should be able to scrub the videos with the scrubber on the right!

Step 24: Selecting Categories

Now we are ready to actually select a category and load the videos within that category. Let's start off by adding a new variable and a new listener called clearForVideoItem. The listener needs to be placed in the makeGalleryItems function inside the for loop after we set the categoryItem btnOver and btnOut listeners.

Here we added a variable to hold the name of the category item we select and we add a listener for when we click on that item.

Step 25: clearForVideoItems Function

Let's add a function that clears our sidebarBox and sets our categoryItemName variable.

Step 26: Video Item Thumbs

Add these variables to the bottom of our variables list:

Step 27: makeVideoItems Function

Let's add the function that starts to pull the videoItem_mc movieclip's out of the library and places them on the stage in a tile effect.

So here we set up a couple of things to make this tile effect work and we added an empty container_mc to the stage inside the sidebarBox movieClip.

Step 28: Tile Effect

This part is similar to what we did when we added the categoryItems in the beginning of this tutorial. The tricky part is getting them to lay out in a grid-like fashion. Add this code to the makeVideoItems function we just wrote.

Editor's note: Sorry folks, the syntax highlighter is up to its old tricks in Firefox again.. If you'd like to see the code which should have been displayed, here it is..

Your final makeVideoItems function should look like this:

Editor's note: And that applies to the complete function too of course..

Step 29: checkContainerHeight Function

Now let's add a function that is called videoThumbLoaded. This will turn the alpha of the videoPreloader to 0 after the video thumbnail loads.

Go ahead and test your file. You will have the videos loading and the preloaders alpha quickly tweened to 0. For the full effect you will have to upload your file to the web so it can actually download.

Step 30: Selecting Videos

Now we are ready to select one of the video thumbnails. We'll start by locating our ns.play line and deleting it.

After that is done we need to add a listener in the createVideoItem function just below the videoItem btnOver and btnOut listeners.

Now let's add the videoItemClick function.

Now test your movie. You should have the file open with no video playing, navigate to a video and and give it a click. Bam! Video plays :)

Conclusion

That's it for part 2! We sorted a lot of cool functionality in this chapter. We now have the videos loading in with thumbnails and some scrollbars working. Good, We're really close to finishing up this file. Just a couple of additions in the next part, like adding the current time played to the player, scaling the video to fit the window correctly, getting the home button to work, and getting that featured item playlist working.

I hope you learned something in this tutorial and are ready to move on to part 3!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.