Creating a custom UI

You can create an entirely custom UI for your flvPlayer without the need for the buttons to be inside the player's skin. This way, you can also position the controls wherever you desire. This feature is especially for adding controls to the flvDisplayPro/flvDisplayProStream component. In order to do this, locate and double click on the folder called flvPlayerPRO UI Components/flvPlayerPROStream UI Components in the Components Panel. Here you will find all of the available buttons for the flvPlayerPRO.

In order to add a button, simply drag and drop the button onto the stage and enter the instance name of the FlvPlayerPro/FlvDisplayPro in the flvPlayer Instance parameter. The image below shows this for the rewind button.

The button will now function with the player.

Note: Since the play and stop buttons are separate components which show and hide one another, you should ensure that they are placed one on top of the other, in order for the show/hide effect to work correctly.

Applying custom buttons

You can also create your own buttons or sliders which control the FlvPlayerPro/FlvDisplayPro through ActionScript. Lets say you aready have a movieclip on the stage that you would like to represent the pauseButton:

1. Give that movieclip instance name: myPause

2. Select the frame in which the player esides and open the Actions Panel (CTRL+F9)

3. Enter the following ActionScript in Actions Panel and test the movie:

flvPlayer.pauseButton = myPause;

Here is the list of all of the ActionScript methods that can be applied to the customized buttons or sliders:

flvPlayer.playButton
flvPlayer.stopButton
flvPlayer.pauseButton
flvPlayer.nextButton
flvPlayer.previousButton
flvPlayer.forwardButton
flvPlayer.rewindButton
flvPlayer.muteButton
flvPlayer.seekBar
flvPlayer.volumeBar
flvPlayer.zoomSet
flvPlayer.panSet
flvPlayer.dataSet
flvPlayer.ratioButton
flvPlayer.sizeButton