Modifying skins

One of the best features of the skin SWF files used with the FLVPlayback component is that each one can be modified to suit the design and branding requirements for your video-playback presentation. Many designers and developers aren’t aware that you can quickly change the look and feel of the skin for the FLVPlayback component. For example, you may want to:

Add a logo or branding element
Change a background color
Change button shapes or icon

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.

(+) view larger
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.

(+) view larger
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. 10. Specify a Flash Video (FLV) file for the contentPath parameter in the Component Inspector.

Figure 3: The Select Skin dialog.

(+) view larger
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.

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.

(+) view larger
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.

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.

list of components

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

list of components

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:

Add and name an instance of the FLVPlayback component on the stage.
Set the skin parameter to None.
Add and name each UI component you need on the stage.
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:

Create a new Flash file (AS3). Save the file as flvplayback_fp9_custom_ui.fla.
Rename Layer 1 to flvPlayer.
Drag an instance of the FLVPlayback component from the Components panel to the stage. In the Property inspector, name this instance flvPlayer.
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.
Double-click the skin parameter to open the Select Skin dialog. Set the Skin menu to None, and click OK.
Create a new layer named controls, and place this layer above the flvPlayer layer.
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.
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
Create a new layer named actions. Place this layer at the top of the layer stack.
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;
```
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