Custom Video Player in Adobe Flash

CATEGORIES: Flash, Tutorials | Justin Finley | December 15, 2006

Create your own custom flash video player (complete with controls) for times when the stock players won’t cut it.

The stock video players and skins inside of Flash look and work great, but at sometime in your designing journey, you may run into a situation where they just do not fit your needs for a particular situation or project. Perhaps you have a web page that has a certain look and the stock flash player doesn’t match it. Or maybe you just want to have a more organic, custom looking player. In this tutorial I will show you the process of making your own custom flash video player with play and pause controls, and a scrub bar. What you should take away from this tutorial is the theory and the scripting behind making this work.

STEP 1: Prepare the Video

The first step is to prepare the video to be displayed by converting it to FLV format. Open up the Flash 8 Video Encoder application and drag the movie file you want to convert into the Queue window, then click Settings.

Note: QuickTime Pro also supports exporting files to .flv format.

These settings should be set to fit your own personal needs. I will be converting my video from a QuickTime.mov file and will set the settings as if I were going to post it for viewing on the web. Again, feel free to use your own settings as your needs may differ.

After the video has been converted to .flv, we will need to set up a folder structure. Create a new folder on your desktop and name it whatever you’d like. Inside that new folder, create another folder and name it "video". Drag your shiny new .flv file into this folder and rename the file itself "video.flv" after it is placed.
So, now the file structure for your new video should be YourNewFolder > video > video.flv.

Note: The above graphic also shows the placement of your new FLA document you will be creating in a future step.

STEP 2: Prepare Assets

You may choose to create your graphical assets inside of Flash or use another program such as Photoshop or Illustrator to create them and then import them into Flash. For the sake of time, instead of creating my assets by hand, I grabbed a vector TV graphic from iStockPhoto.com. I then added a play and pause button, and a scrub bar; all on their own layers inside of Photoshop. Next, using whatever method you like best, export each element separately. I prefer working with .pngs to preserve transparency but again, do what works for you.

STEP 3: Prepare Flash Document

Create a new flash document and name it whatever you prefer. Place it on the root of the new folder you created in Step 1, but outside of the video file. (Refer to the 3rd graphic of Step 1 for an image of the structure you’re going for.)

My personal settings for my new Flash doc are 457 x 468 (the size of the background image I want to use) and the frame rate is set to 30fps. Again, your needs may differ.

STEP 4: Import Assets

If you created your graphical elements outside of Flash, now is the time to import them. If however, you plan on making them inside of Flash, you may skip this importing step.

Go to File > Import to Library. Locate and select the elements you want to import and select Import. They will now be visible in your Library.
Command+L (PC: Ctl+L) to open and close library window.

After importing my assets, I am going to drag my background image onto the first frame in Layer 1, position it, then rename the layer "background" and lock the layer so I can’t select it by accident.

STEP 5: Set up the MediaDisplay Component

Create a new layer to hold the MediaDisplay Component and name it what you’d like. I’ve named mine "screen". Open the Components window, Window > Components or Command + F7 (PC: Control + F7). Under the Media drop-down select and drag the MediaDisplay Component on to the first frame of the new "screen" layer.

In the Properties Inspector, Command + F3 (PC: Ctl + F3), give the component the instance name "video".

Open the Component Inspector window using Window > Component Inspector, or Option + F7 (PC: Alt + F7), uncheck "Automatically Play".

Create a new layer, rename it "actions", select the first keyframe, then open the Actions window. (Window > Actions or F9)

Type in the script window:

video.setmedia("video/video.flv","FLV")

This attaches the path of our .flv file to the MediaDisplay Component we named "video".

STEP 6: Control Buttons

Create a new layer for the control buttons and name it what you like. I’ve named mine “buttons”. On the first keyframe of this buttons layer, create a pause button or drag out your pre-made pause button from your library. Select your pause button and hit F8 to Convert to Symbol. Select button, name it “btn_pause” and then give it an instance name of “pause_btn” in the Properties Inspector window. It is important that you use the same names in order for the scripting to work.

On the same layer, repeat the process for the play button. Name it “btn_play” in the Convert to Symbol window and then give it an instance name of “play_btn” in the Properties Inspector window.

Now select both buttons by holding shift and clicking on them. Hit F8 to convert both of them together into a new movie clip. Select MovieClip and name it “mc_controls”.

Double-click your newly created mc_controls movie clip to enter its editing mode. Then create a new actions layer (inside mc_controls), select the first keyframe, open the Actions window (F9), and place this code:

video = _root.video;


// play button function

  play_btn.onRelease = function(){

              video.play();

  };
// pause button function

  pause_btn.onRelease = function(){

              video.pause();

  };

STEP 7: Scrubber Bar

Create a new layer for the scrub bar, name it what you’d like. I’ve named mine "scrubber". On the first keyframe of this layer, create or drag out a track for the scrubber. Select the track, hit F8 to Convert to Symbol, select movie clip, name it “mc_track” and now, what is different here: you must make sure to set the registration point to the left, NOT CENTER. This ensures that the left edge is seen as zero or our beginning point. Now, give it an instance name of “track_mc” in the Properties Inspector window. It is important for the scripting that you use these names.

On the same layer, repeat the process for the knob. Use F8 to convert to symbol, this time making sure to go back to a center registration point, name it “mc_knob”, and then give it an instance name of “knob_mc” in the Properties Inspector.

Now, position the knob on top of the track with the knob situated to the left edge of the track below. Select both the knob and the track by shift-clicking them. Hit F8 to convert them both into a movieclip. Make sure the registration point of this clip is set to the left edge like you did to the track.

Now, double-click the new mc_scrubber movieclip to enter editing mode (just like you did with the control buttons). Create a new Actions layer, select the first keyframe, open the Actions window (F9) and apply this script:

video = _root.video; knob_mc.onPress = function(){ mdown=true; this.startDrag(false,0, 0, track_mc._width, 0); };


knob_mc.onRelease = function(){

              mdown = false;

              this.stopDrag();

  };
knob_mc.onReleaseOutside =  knob_mc.onRelease();

  this.onEnterFrame = function(){

              if(mdown){

                          dist = knob_mc._x;

                          pct = dist/track_mc._width;

                          newVol = pct*video.totalTime;

                          video.playheadTime = newVol;

              }else{

                          dist = video.playheadTime;

                          pct = dist/video.totalTime;

                          newX = pct*track_mc._width;

                          knob_mc._x = newX;

              }

  };

STEP 8: Finishing Touches

In my particular case, I have a rounded TV screen so I would like the video to appear to have rounded corners instead of square. In your situation it may be okay to leave it square. Again, it all depends on you. In order to round my edges, I am going to create a new layer above my screen layer (the one that houses my MediaDisplay Component) and name it "screenmask". I will then select the rectangle tool ( R ) and set the corner radius (bottom of toolbar under Options ) to around 50px. Now that you have a shape on that layer, right-click on the layer label and choose "mask" , turning the shape you just created into a mask for the "screen" layer. The layers beneath ("screen") will now only show through the shape you have created on the layer above ("screenmask"). I then add a border around the video for an extra touch and now I’m ready to export a .swf and bask in the glory of my custom video player.

Hit play. The movie should begin to play and the scrubber to move. Click-and-drag the scrubber knob to navigate around the movie, click pause to.. well, pause.

It may take a few times of exporting, seeing where the video is, and then repositioning the MediaDisplay Component accordingly to get the exact position of where the video should be. It’s kind of hard to tell by only seeing the blue outline of the component while working in the Flash document.