Using prebuilt FLVPlayback skins

The FLVPlayback component is packed with great features. One thing you'll notice while working with the FLVPlayback component is that it comes with a variety of skin styles. Skin SWF files are prebuilt collections of controls that the FLVPlayback component uses to control the video during playback. Using the Select Skin dialog box, you can choose from a range of looks and control combinations (see Figure 1).

Figure 1. Select Skin dialog box for choosing prebuilt skin options and background colors

Choosing a prebuilt skin is the easiest way to modify the look of the video player. All you need to do is launch the dialog box, choose the desired skin from the preview browser, and choose a background color for the skin. Flash CS4 does the rest.

Using the Import Video Wizard to select the video skin

In Flash CS4 Professional you can use the Import Video Wizard to add a video component to the Stage, assign an external FLV file to it, and choose the desired skin from the Skin options pop-up menu. This is really easy to do and is the route you will want to take if you're new to Flash CS4 or want to get up and running quickly. You can use this approach when you first add the video component to the Stage. Once the video component has been placed on the Stage, you can use the Component Inspector panel to change the skin option whenever you like.

Here are the steps for using the Import Video Wizard to assign a skin:

1. In Flash CS4 Professional, create a new ActionScript 3 Flash file and save it to a location relative to your FLV file(s). You may wish to save the FLA file into the same folder alongside the FLV file(s).
2. Choose File > Import > Import Video from the main menu. The Import Video dialog box opens.
3. In the Select Video screen, browse to locate the FLV file you would like to view. Notice that you can launch the Adobe Media Encoder if you need to encode or modify the video. Click Next to advance to the next screen.
4. In the Skinning screen, use the Skin pop-up menu to preview the prebuilt skins. Select a skin and skin background color. This screen is the equivalent of the Select Skin dialog box shown in Figure 1. Click Next to advance to the next screen.

5. In the Finish Video Import screen, review your settings and click Finish when you're done with the wizard. Notice that an FLVPlayback component has been added to the Stage. It is sized to fit the FLV file that you selected in Step 3.

   Note: The FLVPlayback component uses metadata embedded in the FLV file to size itself. Older FLV files may not contain this metadata. If so, the component will not be able automatically size itself. For best results, use the Adobe Media Encoder to encode the source file to the FLV format again. If the source file is not available, you may also use an FLV metadata utility (such as FLV MetaData Injector from the Manitu Group) to embed the information and work around this issue.

6. Click the instance of the FLVPlayback component to select it on Stage. Open the Component inspector to see the component parameters added by the Import Video command. Note that the source property holds the URL to the video and the skin property contains the name of the skin SWF file you selected in Step 5. If you want to change the skin at this point, you can do so by changing the skin parameter manually in the Component inspector.
7. Export the movie to see the results.

Using the Component inspector to launch the Select Skin dialog box

After you have placed an FLVPlayback component on the Stage, use the Component inspector to change the selected skin (and various other parameters). You can change settings and try different skins as many times as necessary.

Continuing on with the instructions of the previous exercise, here are the steps for using the Component inspector to assign or change a skin:

1. With the FLVPlayback instance selected, click on the skin property in the Component inspector parameters list to select it. Next, click again to launch the Select Skin dialog box.
2. Click the Skin pop-up menu to preview the different styles. Select the desired skin SWF file. Click OK when you're finished.
3. You should see the Live Preview of the component update with your changes.

Turning off the skin SWF feature

As you are developing your project, it is likely there will be times when you want to turn off the default skin of the FLVPlayback component, so that you can add your own controls, use assorted custom user interface components, or control the component entirely with ActionScript. (To learn more about this topic, see my article, Controlling Flash video with FLVPlayback programming.) To turn off the skin SWF feature, follow these simple steps:

1. With the FLVPlayback instance selected, double-click the skin property in the Component inspector parameters list. The Select Skin dialog box opens.
2. Choose None from the Skin pop-up menu and click OK to exit the dialog box.

3. You should see the Live Preview update with the controls removed.

   Tip: You can set the FLVPlayback component's skinAutoHide property to true in the Component inspector (see Figure 2). This setting will hide the controls until the cursor is placed over the video. Note that this property only takes effect when using the skin SWF feature.

   

   Figure 2. FLVPlayback parameters listed in the Component inspector

The prebuilt skin SWF files cannot be modified directly. For this reason, using them is the least flexible of the three options for skinning the FLVPlayback component. However, they do not require any development time or editing experience to use.

Page 2 of 5

Previous Page

Next Page