Recipe 18.4. Customizing the FLVPlayback Component

Problem

You want to customize the look and feel of the FLVPlayback component.

Solution

Use the custom UI components that ship with Flash Professional 8.

Discussion

If the 32 skins that ship with Flash Professional 8 don't suit your particular preferences for playback controls, you can pick and choose from a variety of components in the FLV Playback Custom UI folder of the Components panel to build your own user interface for the FLVPlayback component. Using ActionScript, each aspect of the FLVPlayback component's user interface can be set to the appropriate custom UI component.

To build a simple playback interface consisting of a play/pause toggle button and a volume bar, perform the following steps. In the process, you'll learn how other playback controls can be exposed and set in ActionScript.

1. Create a new Flash document in Flash Professional 8.

2. Rename Layer 1 to cfp, short for component FLVPlayback.

3. Open the Components panel (Window Components), and from the

   With the instance selected, open the Property inspector and name the instance cfp. In the Parameters tab, double-click the skin value and choose None in the Select Skin dialog box. You do not need to use a skin .swf file for this example, because you will build your own UI.

4. Add a new layer named Controls. On frame 1 of this layer, drag an instance of the PlayPauseButton and VolumeBar components from the FLV Playback Custom UI folder of the Components panel to the stage. Place the instances below the cfp instance.

5. In the Property inspector, name the PlayPauseButton instance cppb and the VolumeBar instance cvb.

6. Create a new layer named Actions, and place the layer at the top of the layer stack. Select frame 1 of the Actions layer, and open the Actions panel. Add the following code. After you declare the variable names, notice the code hint menu displayed after you type cfp in the Actions panel. All of the public properties for the FLVPlayback component are displayed. All the other playback control parameters can be found in this list, including playButton, bufferingBar, and backButtonjust to name a few.

    var cfp:mx.video.FLVPlayback; var cppb:MovieClip; var cvb:MovieClip; cfp.playPauseButton = cppb; cfp.volumeBar = cvb; 

   
   

7. Save the Flash document, and test it (Control/Command-Enter). You can now control the playback of the video content with the play/pause button and the volume with the volume slider.