Modifying skins

Building a player with custom UI components

You don't need a skin SWF file with your FLVPlayback instance. You can control the video clip loaded into an FLVPlayback component using custom UI components that ship with Flash CS3. The set of custom UI components for the FLVPlayback available in the Components panel (Ctrl/Cmd+F7) is nearly identical for the AS2 and AS3 versions. Figure 6 shows the UI components that are included in the Video grouping for the AS3 version of the FLVPlayback component, and Figure 7 shows those for the AS2 version.

Figure 6: The custom UI components for the AS2 version of the FLVPlayback component.

Figure 7: The custom UI components for the AS3 version of the FLVPlayback component.

The process of integrating a custom UI component with an instance of the FLVPlayback component is fairly straightforward:

1. Add and name an instance of the FLVPlayback component on the stage.
2. Set the skin parameter to None.
3. Add and name each UI component you need on the stage.
4. Link each UI component to the respective property name of the FLVPlayback instance.

Now that you have an overview of the process, let's practice the steps with an example.

To use a custom UI component with the AS3 version of the FLVPlayback component, follow these steps:

1. Create a new Flash file (AS3). Save the file as flvplayback_fp9_custom_ui.fla.
2. Rename Layer 1 to flvPlayer.
3. Drag an instance of the FLVPlayback component from the Components panel to the stage. In the Property inspector, name this instance flvPlayer.
4. Select the Parameters tab of the Property inspector (or open the Parameters tab of the Component Inspector panel), and add an FLV file to the source parameter. Use of your FLV files.
5. Double-click the skin parameter to open the Select Skin dialog. Set the Skin menu to None, and click OK.
6. Create a new layer named controls, and place this layer above the flvPlayer layer.
7. From the Video grouping in the Components panel, drag the PlayPauseButton component to the stage, and place it below the lower-left corner of the FLVPlayback instance. Name the new instance ppb in the Property inspector.
8. From the Video grouping in the Components panel, drag the SeekBar component to the stage, and place it to the right of the PlayPauseButton instance. Name the new instance sb in the Property inspector. You can stretch the width of the SeekBar instance using the Free Transform tool to fill the remaining width of the FLVPlayback instance (Figure 8).
   
   

   

   Figure 8: The newly placed custom UI components.

   (+) view larger

9. Create a new layer named actions. Place this layer at the top of the layer stack.

10. Select frame 1 of the actions layer, and open the Actions panel (F9, or Option+F9 on Mac). Add the following code to the script pane. Notice that the property names of the FLVPlayback controls mirror the names of the components in the Components panel—change the first letter of the name to lowercase. For example, PlayPauseButton becomes playPauseButton:

       import fl.video.FLVPlayback;
    var fp:FLVPlayback = flvPlayer;
    fp.playPauseButton = ppb;
    fp.seekBar = sb;

11. Save the Flash document, and test the movie (Ctrl/Cmd+Enter). When the Flash Video file loads into the FLVPlayback instance, use the newly added custom UI component instances to control the video's playback (Figure 9).
    
    

    

    Figure 9: The new components can control the video playback.

You can also edit the look and feel of the custom UI components by opening the Library panel and modifying the graphics inside the component's nested symbols. The custom UI components aren't compiled—you can view every asset of the controls directly in the Library panel.

Tip: The new skin features in the AS3 version of the FLVPlayback component allow you to quickly change the background color of the skin SWF by setting the skinBackgroundColor parameter in ActionScript or in the Parameters tab of the Component Inspector.

Where to go from here

• Flash Design Center
• Adobe Video Workshop
• Getting started with ActionScript, by Justin Everett-Church

Page 4 of 4

Previous Page