ActionScript 2.0 Components Language Reference
FLVPlayback Component > Customizing the FLVPlayback component > Skinning FLV Playback Custom UI components individually > Connecting your FLV Playback Custom UI components

Connecting your FLV Playback Custom UI components

You must write ActionScript code to connect your FLV Playback Custom UI components to your instance of the FLVPlayback component. First, you must assign a name to the FLVPlayback instance and then use ActionScript to assign your FLV Playback Custom UI component instances to the corresponding FLVPlayback properties. In the following example, the FLVPlayback instance is my_FLVPlybk, the FLVPlayback property names follow the periods (.), and the FLV Playback Custom UI control instances are to the right of the equal (=) signs:

//FLVPlayback instance = my_FLVPlybk
my_FLVPlybk.playButton = playbtn; // set playButton property to playbtn, etc.
my_FLVPlybk.pauseButton = pausebtn;
my_FLVPlybk.playPauseButton = playpausebtn;
my_FLVPlybk.stopButton = stopbtn; 
my_FLVPlybk.muteButton = mutebtn;
my_FLVPlybk.backButton = backbtn;
my_FLVPlybk.forwardButton = forbtn;
my_FLVPlybk.volumeBar = volbar;
my_FLVPlybk.seekBar = seekbar;
my_FLVPlybk.bufferingBar = bufbar; 

Example

The following steps create custom StopButton, PlayPauseButton, MuteButton, and SeekBar controls:

1. Drag the FLVPlayback component to the Stage, and give it an instance name of my_FLVPlybk.
2. Set the contentPath parameter through the Component inspector to http://www.helpexamples.com/flash/video/cuepoints.flv.
3. Set the Skin parameter to None.
4. Drag a StopButton, a PlayPauseButton, and a MuteButton to the Stage, and place them over the FLVPlayback instance, stacking them vertically on the left. Give each button an instance name in the Property inspector (such as my_stopbttn, my_plypausbttn, and my_mutebttn).
5. In the Library panel, open the FLVPlayback Skins folder, and then open the SquareButton folder below it.
6. Select the SquareBgDown movie clip, and double-click it to open it on the Stage.
7. Right-click (Windows) or Control-click (Macintosh), select Select All from the menu, and delete the symbol.
8. Select the oval tool, draw an oval in the same location, and set the fill to blue #(0033FF).
9. In Property inspector, set the width (W:) to 40 and the height (H:) to 20. Set the x-coordinate (X:) to 0.0 and y-coordinate (Y:) to 0.0.
10. Repeat steps 6 to 8 for SquareBgNormal, but change the fill to yellow (#FFFF00).
11. Repeat steps 6 to 8 for SquareBgOver, but change the fill to green (#006600).
12. Edit the movie clips for the various symbol icons within the buttons (PauseIcon, PlayIcon, MuteOnIcon, MuteOffIcon, and StopIcon). You can find these movie clips in the Library panel under FLV Playback Skins/Label Button/Assets, where Label is the name of the button, such as Play, Pause, and so on. Do the following steps for each one:
    1. Select the Select All option.
    2. Change the color to red (#FF0000).
    3. Scale by 300%.
    4. Change the X: location of the content to 7.0 to alter the horizontal placement of the icon in every button state.

       NOTE

       By changing the location this way, you avoid opening every button state and moving the icon movie clip instance.

13. Click the blue Back arrow above the Timeline to return to Scene 1, Frame 1.
14. Drag a SeekBar component to the Stage, and place it in the lower-right corner of the FLVPlayback instance.
15. In the Library panel, double-click the SeekBar to open it on the Stage.
16. Scale it to 400%.
17. Select the outline, and set the color to red (#FF0000).
18. Double-click SeekBarProgress in the FLVPlayback Skins/Seek Bar folder, and set the color to yellow (#FFFF00).
19. Double-click SeekBarHandle in the FLVPlayback Skins/Seek Bar folder and set the color to red (#FF0000).
20. Click the blue Back arrow above the Timeline to return to Scene 1, Frame 1.
21. Select the SeekBar instance on the Stage, and give it an instance name of my_seekbar.
22. In the Actions panel on Frame 1 of the Timeline, add an import statement for the video classes, and assign the button and seek bar names to the corresponding FLVPlayback properties, as shown in the following example:

    import mx.video.*;
    my_FLVPlybk.stopButton = my_stopbttn;
    my_FLVPlybk.playPausebutton = my_plypausbttn;
    my_FLVPlybk.muteButton = my_mutebttn;
    my_FLVPlybk.seekBar = my_seekbar;
    

23. Press Control+Enter to test the movie.

View comments on LiveDocs