Creating a Custom Video Player in Flash Professional 8

The project shown above is composed of nothing more than a series of the Flash 8 Video U.I. components, an FLVPlayback component and a List Box component. The project was constructed by creating a series of layers to hold the various bits and pieces as shown below:

The project

The FLV PLayback Custom UI components used are:

They were dragged into the CustomUIComponents layer and each was given a unique Instance name. The ListBox component was added to the Component Layer and given the instance name of lbPicker. The file names of the videos were entered into the ListBox's Data area of the Component Inspector and each was given a corresponding label.

List Box properties

The FLVPlayback component was added to its layer as well, the component was given the instance name of cptPlayer and I made sure there was no skin associated with the component and that there was no contentPath as well. The picking of the video will be the job of the ListBox component and you can set the contentPath in ActionScript.

Once the assets are assembled it is a simple matter of "wiring" the whole thing up with ActionScript.

Here's the code in the Actions layer:

import mx.video.FLVPlayback;
var cptPlayer:FLVPlayback;

cptPlayer.playButton = cptPlay;
cptPlayer.pauseButton = cptPause;
cptPlayer.stopButton = cptStop;
cptPlayer.volumeBar = cptVolume;
cptPlayer.muteButton = cptMute;
cptPlayer.seekBar = cptSeek;
cptPlayer.bufferingBar= cptBuffer;

function pickVideo(myVid:String): Void{
cptPlayer.contentPath = myVid;
}

lbPicker.change = function(evt:Object) {
pickVideo(evt.target.selectedItem.data);
}

There really isn't that much to the code. To control the PLVPlayback component you need to import the the component's class and give the the player a variable name.

The next few lines simply hook each of the buttons and so on into the component.

The next function sets the contentPath for the FLVPlayback component and the second function tells Flash to use the data portion of the List Box component to set the contentPath.

I wish is could be more complex but, unfortunately it isn't.

Creative Commons logo