Modifying skins
Table of Contents
Revising a FLVPlayback skin for Flash Player 9
Adobe also provides the skin source Flash (FLA) files for the AS3 version of the FLVPlayback component. In Flash CS3, you can find the source skin files in the following locations:
For Flash CS3 on Windows:
C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\FLVPlayback Skins\FLA\ActionScript 3.0\ For Flash CS3 on Mac:
[Startup drive]: Applications: Adobe Flash CS3: Configuration: FLVPlayback Skins: FLA: ActionScript 3.0:
To modify a skin file for the AS3 version of the FLVPlayback component, follow these steps:
- Make a copy of the original skin FLA file from the source folder mentioned previously. Copy the file to the location of your other Flash documents. I used a copy of the SkinOverPlaySeekFullscreen.fla file.
- Rename the copy of the skin file. This sample uses the filename CustomOverPlaySeekFullscreen.fla.
- Open the newly renamed file in Flash. You see every element of the skin's UI placed on the stage.
- To edit the look and feel of an element, double-click its corresponding instance on the stage. Alternatively, you can open the Library panel (Ctrl/Cmd+L) and edit the symbol instances. Elements are grouped into various folders and subfolders. For this example, open the Library, and expand the _SquareButton folder. This folder holds the background graphics used by all the control buttons.
- Double-click the SquareBgOver symbol to edit its con¬tents. Inside the symbol, select the green stroke on the Glow layer, and change its color. For this example, I used white (#FFFFFF) (Figure 5). If you'd like to change the down state of the button graphics, you can continue to edit the stroke colors of the SquareBgDown symbol.
Figure 5: The new outline color for the button graphics.
- Save the Flash document, and publish the movie (Shift+F12). You now have a custom skin SWF file ready to use with the FLVPlayback component. Close the CustomOverPlaySeekFullscreen.fla document.
- Open a Flash document containing an instance of the AS3 version of the FLVPlayback component. You can use the starter file named flvplayback_fp9_custom_skin_starter.fla from the ch06 folder of this book's DVD-ROM. If you use this file, resave your copy of the file as flvplayback_fp9_custom_skin.fla.
- Select the FLVPlayback instance on the stage, and open the Component Inspector. Select the Parameters tab, and double-click the value for the skin parameter.
- In the Select Skin dialog, choose Custom Skin URL in the Skin menu. In the Custom URL field, type the name of the published SWF file from step 6. For this example, that SWF filename is CustomExternalPlaySeekMute.swf. If you want a custom background color, select one from the Color pop-up menu as well. Click OK when you're finished.
- Specify a Flash Video (FLV) file for the source parameter in the Component Inspector.
- Save the Flash document, and test the movie (Ctrl/Cmd+Enter). The new skin SWF file loads and displays with the FLVPlayback component. Roll over the buttons in the skin, and the new white outline color is displayed.
