Flash Article

Customizing the FLVPlayback Component

Using Prebuilt Skin SWF Files

The new 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 can use 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. Use the Select Skin dialog box to choose from prebuilt skin options.

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

Using the Import Video Command to Launch the Select Skin Dialog Box

In Flash Professional 8 you can use the Import Video command to add a video component to the Stage, assign an external FLV file to it, and choose the desired skin from the Select Skin dialog box. This is really easy to do and is the route you will want to take if you're new to Flash or want to get up and running quickly. You can use this route when you are first adding the video component to the Stage. Thereafter you will use the Component inspector to change the skin option.

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

1. In Flash Professional 8, create a new Flash file and save it to a location relative to your 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 the path of the FLV file which you would like to view. Click Next to advance to the next screen.
4. In the Deployment screen, select the Progressive Download from Web Server option unless you are streaming the FLV file from Flash Media Server. In that case, choose one of the streaming options. Click Next to advance to the next screen.
5. In the Skinning screen, use the Skin pop-up menu to preview and select a skin. This screen is the equivalent of the Select Skin dialog box shown in Figure 1. Click Next to advance to the next screen.

6. 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 assigned 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 Flash 8 Video 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) to embed the information and work around this issue.

7. Click the instance to select it and open the Component inspector to see the component parameters added by the Import Video command. Note that the contentPath property holds the URL to the video and the skin property contains the name of the skin SWF file you chose 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.
8. 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 to different skins as many times as necessary.

Following on the steps 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 and then click again to launch the dialog box. The Select Skin dialog box opens.
2. Click the Skin pop-up menu to preview and select a skin SWF file. Click OK when you're finished browsing.
3. You should see the Live Preview of the component update with your changes.

Turning off the Skin SWF Feature

Most likely you will want to turn off the default skin of the FLVPlayback component at times, so that you can add your own controls, use assorted custom user interface components, or control the component entirely with ActionScript (see my article, Controlling Flash Video with the FLVPlayback Behaviors). 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 to hide the controls until the cursor is over the video. Note that this property only takes effect when using the skin SWF feature.

Note that 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 Flash editing experience to use.

Page 2 of 4

Previous Page

Next Page