Students
Students get a Tuts+ subscription for just $45! Hurry limited offer.
Advertisement

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

by

Almost every Flash developer has had to make a video player at some point. There are quite a few different ways of doing this; some people use the built in NetStream Class and some use the FLVPlayback component in Flash. Either way will work, but we are going to use the NetStream Class because of how much lighter it is and what you can do with it.

This is a large tutorial that will be broken down to three parts. Each part will build off the previous one until we have our final result. Our player will be able to use an XML file to populate three galleries with an unlimited amount of categories, and an unlimited amount of videos in each category.

Let's take a quick look at what we will be building in each part of this series:

Part 1

  • File setup, organize files and folders.
  • Understanding how the start file is set up.
  • Position items on the stage for startup stage resize.
  • Global rollover and rollout functions.
  • Set up our Net Stream class.
  • Get the video playing.
  • Add preloader functionality.
  • Set up controls for video playback. These include a play button, pause button, stop button, video timeline scrubber, and volume scrubber.

Part 2

  • Setup our video thumbnails, category thumbnails, and featured video thumbnails.
  • Write the XML file.
  • Load the XML file in Flash.
  • Create category items in the right sidebar.
  • Preload category item thumbnails.
  • Gallery button functionality for right sidebar.
  • Create video items in the right sidebar.
  • Preload video item thumbnails.
  • Build a dynamic vertical scrollbar that shows when necessary and hides when it is not needed.
  • Play selected videos.

Part 3

  • Display the current time and total time below the player.
  • Home button functionality.
  • Set our video's width and height.
  • Center our video in the player window.
  • Check the XML file for any featured videos.
  • Add featured video items to Featured sub bar.
  • Preload featured video item thumbnails.
  • Add a dynamic horizontal scrollbar for the featured sub bar.

I did mention this in the classes, but I'd like to thank some people for their help with this tutorial.

Step 1: Understanding the Source Files

The fist thing to do is to download the source files I provided. This is very important as I am not going to go over what things are named and how I set up the file. I will however give brief overviews of specific things I did (like how I made my buttons and other things that are important). Basically, I put all the objects on the stage, organized the library, created movieclips for everything, properly named all the movieclips on the stage and created button rollovers for all necessary buttons. Along with creating and exporting the necessary movieclips.

The next thing to note is how I set up my folders for this project. You should create a folder on your desktop named whatever you want (eg.my_AS3_Video_Player). Open this folder, drop the the "flv" folder you downloaded, along with the "playlist.xml" and "theater.fla" files. The "theater.fla" file is your start file. The "playlist.xml" file is the xml file that is pre written. Inside the "flv" folder you will see all the videos we will be using, along with a "thumbs" folder which contains 3 other folders. These three folders each have a thumbnail image of all the videos at different sizes.

NOTE: If you do not want to use the videos I provided you can use your own, but make sure they have an audio track in them or else you will not be able to tell if the audio scrubber is working correctly.

Your start file should already be linked to the output folder when you open up the "theater.fla" file. If you know how this works then ignore the next sentence. If you do not know how this works click on file > publish setting. You should be on the formats tab. Here you enter "../output/theater.swf" for your .swf and if you want to publish the .html you enter "../output/theater.html". You also need to go to the html tab and select percent for the dimensions. Otherwise your file will not center on the stage correctly.

The third thing you need to do is download the Caurina Tweener Class. Once this is downloaded you need to open the zip file and copy the caurina folder in your "src" folder so we can use it for our animations.

Page Setup

Step 2: Taking Note of Your Stage and Items

Now that you are set up with everything in place it's time to look through the file. The first thing to take note of here is your stage size 850x580, this is not really that important as it will be set depending on your window size. It is however the minimum size your window will go before cropping part of the player. Second is the 4 layers on the stage. The top layer is where we will be writing our code. The second layer is where we will have video controls, and the video. The third layer is where we will have the playlist with different galleries, categories, and videos. The fourth layer is where we will place the featured videos that are set with a simple true or false in the xml.

The other thing I would like to point out is the items we will be adding to this file based on our xml. We will be populating them at runtime from our library. There are 3 items that are named featuredItem_mc, videoItem_mc, and categoryItem_mc. They are found in the folders in the library and are already set to be exported when you publish.

Other than that, the buttons along with rollovers and dynamic text are already set up for you. Feel free to customize if you want, but we will go over those steps later.

Library Items

Step 3: Let's Start Writing Some Code!

Let's import the necessary classes we will use for our tweens. We will also set our stage to align to the top left and set it to not scale. In the main timeline click on the AS3 layer and type the following:

Step 4: Name Objects on Stage

Now let's add some naming variables so we don't have to type such long instance names.

Step 5: Center Content on Start up

Below what we have written so far, type:

Now if you test your movie your content will be centered in the middle of your .swf file. But not if you resize your .swf. So let's take care of that.

Step 6: Add Stage Resize Listener and Function

Next we need to take care of what happens when you change your .swf width and height or your browser size. To do this type the following code below the setMyStage function:

NOTE: I usually put all my listeners together near the top of the code and all my functions together in the bottom. Some people do this in reverse. There is no perfomance benefit, but it does help to keep your file more organized. From here on whenever I add a listener I will be putting it below the last listener at the top and when I add a function I will be placing it below the last function on the bottom of the page. Oh, and you should also always place your variables at the top one after another.

Now if you test your .swf file it will center on startup and if you change the width or height it will stay centered as well.

Step 7: Variables for Video Items on the Stage

Again let's add some vars so our instance names are not so long.

Step 8: Button Rollover and Rollouts

Here we will be using the same function for all of our rollovers and rollouts. The reason for this is that it reduces code, plus all the buttons we'll be using will be doing the same thing, so why not just make one function that is reusable?

Step 9: Global Functions for Buttons

Let's add the two functions that allow us to add rollover and rollouts to any button which is set up as described in the next step.

Now if you test your movie the buttons will change when you roll over and go back to their original state when you roll out.

Step 10: Rollover and Rollout Functionality

Let's take a second to see how I create my buttons and how all the buttons and movieclips in this tutorial are set up. You don't need to perform this step, but if you want to follow along go to the playBtn_mc movieclip in the player_mc movieclip and open it.

The first thing to do is design your button. Next, convert it to a movieclip and give it an instance name. If it's a play button I would name it something like "playBtn_mc". Give it the correct instance name. Lock these layers so you don't accidentally place symbols on them. Once you do that open up the movieclip and create two layers on top of everything. Name one layer "AS3" and the second layer "Labels".

On the first frame of the AS3 layer open your ActionScript panel and type "stop();". Do the same on the 10th frame. On the second frame of the Labels layer create a keyframe and highlight it. Now go to your properties panel and in the Name field type "over". Now go to the 11th frame on the Labels layer and create another keyframe. Select each element separately and convert to a MovieClip. Once completed, select all and separate to layers. You can use the right-click (context) menu, or setup a keyboard shortcut. Since I'm constantly separating elements to layers I find it helpful to create a "Ctrl + D" shortcut [Command + D] on a Mac. (Note: the name of the layer will be based on the name you gave each symbol.)

Button Code And Labels

Don't worry about giving them instance names, since we will just be tweening them. If you don't convert each element you want to animate to a symbol, then Flash will create tweens in your library that become messy. Go to the 10th frame of the layer you want to tween and create a keyframe, then go to the 20th frame of the same layer and create another keyframe.

Now highlight all the layers frames and right-click. Select "create classic tween". Don't deselect just yet, go to the properties panel. Select the tween tab and enter 100. Now select the 10th frame of the layer and go to the properties panel and select the style tab. Here you can select what you want the current element to do. That's it. You can also change how long the animation takes on rollover and rollout by moving where the stop actions are and the over/out label keyframes are.

Finished Button

This is how all the buttons are set up in this tutorial, so anytime you see a rollover or rollout this is how I did it. With the code from steps 7 & 8 and the button from this step you can create a button with rollover and rollout functionality in any project.

Step 11: Make Movieclips Behave Like Buttons

Let's add buttonMode and mouseChildren to our buttons. Add this below your variables at the top of your code.

Now all your buttons in the player_mc movie clip should have rollover and rollout functionality when you test your movie.

Step 12: Start Up

Here we will hide the video preloader, set the video title dynamic text field to be blank, along with zeroing out the video time dynamic text layer. Type the following code below the code in step 10:

Step 13: Setting Up Our NetStream Object

Here we will set up a variable that collects the current video from the xml and sets it to a string. We'll also set the video height and width with a Number that will eventually change when we open a new movie. Add the following variables to the list of variables at the top of your code:

Step 14: Create a Video Object

Now that we have all the functionality set up for the player, it's finally time to get a video to start playing. We first need to create a video item, set its position and add it to the stage in the correct layer. Below everything in your ActionScript layer type the following:

Step 15: NetConnection and NetStream Connection

Now we need to create a new NetConnection and link it to the new NetStream connection along with some listeners for the NetStream. Add this to your code:

Step 16: NetStream Functions and Buffer Video

Now let's add the functions to handle what happens when there is a specific video event or an error with the connection. We will also handle the buffer for the video. Add the code below:

Step 17: Play the Video!

Finally, add this line of code to play the video:

Now if you test your video it should play. It will be scaled weird because we have not used the xml file to set the width and height. Don't worry about this yet, we will handle that problem later. None of the buttons will work and the scrubber bar will not be working. That's because we haven't linked them yet, so let's do that now.

Step 18: Add Listeners for Buttons

Now let's add some listeners for our buttons so we can get some functionality working.

Step 19: Add Playback Functions

Now if you test your movie and click the pause button, your video should pause. If you click the stop button your video should jump to the first frame and pause. If the video is paused or stopped you can click the play button to resume the video. Now let's get the timeline and volume scrubbers to work.

Step 20: Add Volume Scrubber Variables and Listeners

We need to add some variables to our code so we can get our volume scrubber working.

Step 21: Add Volume Scrubber Code

Let's add all the code to get the scrubber to work.

Test your movie now. You can scrub the volume thumb and hear the audio change!

Step 22: Scrubber Variables and Listeners

We need to add some more variables for the video timeline scrubber. Type the following in the vars section of your code:

Step 23: Add Functions for the Video Scrubber

Let's add the functions that will allow us to scrub the timeline and also move the scrubber bars to track amount played and amount loaded.

Your final code for this lesson should look like this:

Test your movie; the video should play and you should be able to scrub the video now.

Conclusion

This first part was mostly spent setting up the ground work and getting some basic functionality going. In the next next chapter we're going to prepare the thumbnails, set up the XML, change how our video loads the movies, get our three gallery buttons working, add items and thumbnails for categories and add our video items with their thumbnails.

There's plenty to get your teeth into, I hope you're enjoying it so far.

Advertisement