Flash Projects - #1 - Movie Player

Background


I first figured this out because I wanted to have a video player but was running Flash MX 2004 standard and so lacked the Video features of Professional.

Download Files

Click here to download source code and files for this tutorial >

Introduction

This tutorial teaches you to build a video player interface only that loads and plays external video files when requested by the user. This means the finished SWF is very small and downloads quickly.

The player includes the following features:

• Playback window
• Play
• Stop
• Fwd
• Rwd
• Clickable progress bar

Note: While for users of Pro flash versions much of this may seem irrelevant because of the pre-compiled video players and skins available. However this project will show you how you can build a completely cutomised interface, allowing your flash projects to be totally original. It also works with external linear SWF animations that don't contain interactivity. You will also begin to understand how you can control playback with actionscript instead of relying entirely on components.

Here goes

First we need to create all the movieclips and buttons we need. Begin by creating the following buttons as symbols in the library:

• Play
• Stop
• Pause
• Fwd
• Rwd

You can either draw them on the stage and then convert them to symbols by selecting one and pressing F8, or you can create a new symbol directly in the Library.

Drag instances of each of them from the library onto the stage (unless they are already there) and name each instance as follows:

• play_btn
• stop_btn
• pause_btn
• rw_btn
• fw_btn

Then draw a rectangle on the stage to represent the video progress bar. Make sure the rectangle has a fill and a stroke. Then select the filled area only, press F8 and convert it into a movieclip called progbar. Make sure you set the registration point of the symbol to be top left. Then select the stroke that outlined the rectangle, again press F8 and convert it into a movieclip called progbarframe. Again make sure you set the registration point of the symbol to be top left.

Give each an instance name on the stage as follows:

• progbar_mc
• progbarframe_mc

Now draw another rectangle on the stage where you want the video clip to appear, and at the size you want it to appear. At this point it is a good idea to know what size of video you are dealing with. I tend to work with relatively small sizes like 320 x 240 for web video, but it is entirely up to you. Select the rectangle and convert it into a movieclip called vidspot. Make sure you set the registration point of the symbol to be top left.

Give it an instance name on the stage of:

• vidspot_mc

Finally you need to create some movieclips that will act as buttons that allow the user to select which video they want to watch. Add these to the stage and give them instance names as follows:

• vid1_mc
• vid2_mc
• etc...

Now we are ready to start coding. The great thing about this player is that all the Actionscript resides in the first keyframe of the movie, so there is no hunting around trying to remember where you put it all. So, create a new layer in the timeline, give the layer the name actions.

Click on the first frame on that layer (make sure it is a keyframe) and open the Actions panel. It is in this panel that all the following Actionscript needs to be entered:

User Media Select Buttons

These are the buttons that allow the user to select which video they want to watch. The way this script works is by replacing the movieclip you named as vidspot_mc with an external SWF that contains the video.

The script is as follows:

_root.vid1_mc.onRelease = function () {
_root.vidspot_mc.loadMovie("videofilename.swf","GET");
}

Type this into the Actions panel for each video you created a button for. Change the vid1_mc and the videofilename.swf to match the instance name and video file name as needed. This script assumes that the external video files are in the same directory as the movie player SWF will be when it is finally exported and uploaded to the web.

Play Button

This script is very simple, it tells whatever SWF is occupying the spot originally taken by vidspot_mc to play.

_root.play_btn.onRelease = function () {
_root.vidspot_mc.play();
}

Stop Button

This script is slightly more complex, in order to make Stop different to Pause, I decided that Stop should also automatically rewind. This script tells whatever SWF is occupying the spot originally taken by vidspot_mc to go back to the first frame and stop.

_root.stop_btn.onRelease = function () {
_root.vidspot_mc.gotoAndStop(1);
}

Pause Button

This script is very simple, it tells whatever SWF is occupying the spot originally taken by vidspot_mc to just stop where it is.

_root.pause_btn.onRelease = function () {
_root.vidspot_mc.stop();
}

This effectively pauses the movie since the play head simply stops in it's tracks. If the user presses the Play button it will simply carry on where it left off.

Rewind Button

This script is considerably more complex, this is because we don't want to rewind to a point before the movie actually starts. The "if else" in the script simply checks that we are currently more frames into the movie, than we plan to jump back. If so, we jump that number of frames back. If not we simply go to the start of the movie.

_root.rw_btn.onRelease = function () {
if (_root.vidspot_mc._currentframe > 240){
_root.vidspot_mc.gotoAndPlay(_root.vidspot_mc._currentframe-240);
} else {
_root.vidspot_mc.gotoAndPlay(1);
}
}

In this case the number 240 represents the number of frames we want to jump back each time the rewind button is released. At 24 frames per second this equates to jumping backward 10 seconds each time the button is clicked. Adjust this figure according to your needs.

Forward-wind Button

As with the rewind button, we don't want tojump BEYOND the end of the movie. This "if else" simply checks that there are still more frames remaining in the movie, than we plan to jump forward. If so, we jump that number of frames. If not we simply go to the end of the movie. Unlike rewind, where the start of the video is easily known (it being frame 1), in this case we need to know how many frames the movie has so we know the number of the last frame. The script does this by finding the _totalframes property of the video file (see line 2 below).

_root.fw_btn.onRelease = function () {
tframe = _root.vidspot_mc._totalframes;
if (_root.vidspot_mc._currentframe <>240) {
_root.vidspot_mc.gotoAndPlay(_root.vidspot_mc._currentframe+240);
} else {
_root.vidspot_mc.gotoAndStop(tframe);
}
}

In this case the number 240 represents the number of frames we want to jump ahead each time the forward wind button is released. At 24 frames per second this equates to jumping forward 10 seconds each time the button is clicked. Adjust this figure according to your needs.

Player Progress Bar

This script controls the bar that shows the viewer how far the movie has played. It is a beautiful simple script. We divide the number of the currentframe of the playing movie by the total number of frames in the movie to give us a number between 0 and 1. A result of 0.5 would mean the movie was half way through. We then multiply the maximum width of the progress bar (based on the width of the progbarframe_mc) by this number to set the current width of the progress bar. By using onEnterFrame the progress bar updates several times per second as the movie plays, thus giving an accurate graphical representation of how far the movie has to go.

onEnterFrame = function() {
comppc = _root.vidspot_mc._currentframe / _root.vidspot_mc._totalframes;
_root.progbar_mc._width = _root.progbarframe_mc._width*comppc;
}

Progress Bar Jumper

This feature did not exist in the original program I wrote, but I decided that it would not be complete unless the user could click anywhere on the progbarframe_mc and jump straight to that part of the movie. As you can see it is slightly more complex.

First we define a variable for the left side of theprogress bar. This gives us a zero point against which to measure the location of the user's click on the progress bar. Then we define a variable that represents the users click on the progress bar as a number between 0 and 1. A result of 0.5 would mean the user clicked in the middle of the bar.

Then we tell the current movie being played to jump to a particular frame number. This is calculated by multiplying the total number of frames by the number based on where the user clicked on the bar. However, I have also used Math.round to convert the result into an integer (by rounding up or down to the nearest whole number). This is vital as frame numbers are whole numbers - e.g. there is no such thing as frame 22.5 - and with Flash if the frame does not exist it simply does nothing - so Math.round gives us a whole existing frame number for us to gotoAndPlay.

_root.progbarframe_mc.onRelease = function() {
barleft = _root.progbarframe_mc._x;
jumppos = (_xmouse-barleft)/_root.progbarframe_mc._width;
_root.vidspot_mc.gotoAndPlay(Math.round(jumppos*_root.vidspot_mc._totalframes));
}

And there we have it. Export your player as a SWF into the same directory as the video files you linked to and it should just work. Any problems, leave a comment and I will try to help.

Lookout for my next post where I explain how to convert video files into SWF for use with this player.

Version 2 of the player (currently working on so watch this space) uses external FLV files rather than SWF so much more up to date.