Design Center Tutorial
Modifying skins
Table of Contents
Creating a modified FLVPlayback skin for Flash Player 8
Adobe provides all the source Flash (FLA) files for each skin option for the AS2 version of the FLVPlayback component. 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 2.0\
For Flash CS3 on Mac:
[Startup drive]: Applications: Adobe Flash CS3:Configuration:FLVPlayback Skins:FLA:ActionScript 2.0:
For Flash Professional 8 on Windows:
C:\Program Files\Macromedia\Flash 8\en\Configuration\SkinFLA\
For Flash Professional 8 on Mac:
[Startup drive]: Applications: Macromedia Flash 8: Configuration: SkinFLA:
To modify a skin file for the AS2 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.
- Rename the copy of the skin file. This sample uses the filename CustomExternalPlaySeekMute.fla.
- Open the newly renamed file in Flash. You see every element of the skin's UI placed on the stage (Figure 1). Most of the elements aren't exported on the stage, though—they're placed on guide layers.
Figure 1: The skin elements on the main timeline.
- To edit the look and feel of an element, double-click the 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. Double-click the SteelExternalChrome instance on the lowest layer of the main timeline. Inside this symbol, unlock the Color Plate layer. Select the rounded rectangle fill on the stage, and change the background color. For this example, I used one of the red colors from the Flash CS3 application icon, #AB111F (Figure 2).
Figure 2: The contents of the SteelExternalChrome symbol.
- Go back to the main timeline by clicking the Scene 1 tab at the upper left of the Timeline panel. You should see a preview of your new skin color at the upper left of the document stage. Note that the button colors on the right are semitransparent, showing through to the background gray color of the stage.
- 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 CustomExternalPlaySeekMute.fla document.
- Open a Flash document containing an instance of the AS2 version of the FLVPlayback component.
- Select the FLVPlayback instance on the stage, and open the Component Inspector. Click the Parameters tab, and double-click the value for the skin parameter.
- In the Select Skin dialog, choose Custom Skin URL from the Skin menu. In the URL field, type the name of the published SWF file from step 6. For this example, that SWF filename is CustomExternalPlaySeekMute.swf Figure 3). Click OK when you're finished.
Figure 3: The Select Skin dialog.
- Specify a Flash Video (FLV) file for the contentPath 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 (Figure 4).
Figure 4: The customized skin SWF file.
