Flash Video 101: How to Customize the FLV Playback Component
A previous article in this series, Controlling Flash Video with the FLVPlayback Component, reviewed how to control Flash Video with the FLVPlayback component. This article extends the review by covering how to customize this playback component to achieve the look or functionality needed to match the design of your projects.
You have the following choices for customizing the FLVPlayback component:
- Select a pre-designed skin.
- Skin FLVPlayback custom UI components individually.
- Create a new skin. You can also use FLVPlayback properties to modify the behavior of a skin.
This article covers how to customize the FLVPlayback component by using the built-in custom UI components or by creating entirely new skins by modifying these components themselves with Flash’s graphics tools.
For a comprehensive overview of customizing components, including terminology and the basic concepts of working with styles, skins, and themes, see the "Customizing Components" section of Flash Help.
Selecting a Predesigned Skin
Select a predesigned skin for the FLVPlayback component by clicking the value cell for the skin parameter in the Component inspector (see Figure 1).
Figure 1 The FLVPlayback Skin selection drop-down in the Flash 8 Property inspector.
Click the magnifying glass icon to open the Select Skin dialog box. Here you can select a skin or provide a URL that specifies the location of the skin SWF file.
Skins that are listed in the Skin pop-up menu are located in the Flash 8 Configuration/Skins folder or in the user’s local Configuration/Skins folder (See Figure 2). You can make new skins available to this dialog box by creating them and placing the SWF file in the Skins folder. The name appears in the pop-up menu with a .swf extension.
Figure 2 For skins to be listed in the Skin pop-up menu they must be located in the Flash 8 Configuration/Skins folder or in the user’s local Configuration/Skins folder.
If you want to skin the FLVPlayback component using the FLVPlayback custom UI components, select None from the pop-up menu.