Customizing the FLVPlayback component

One of the feature upgrades in Flash Professional 8 is the new FLVPlayback component for Flash Video. For those of you who have been waiting for a graphically flexible Flash Video component, the wait is over. The FLVPlayback component offers an expanded ActionScript API and several approaches to graphic customization and skinning.

This article walks you through three approaches available for skinning the FLVPlayback component:

• Choosing prebuilt skins through the Select Skin dialog box
• Using the FLV Playback Custom UI components to mix and match customizable controls
• Creating your own prebuilt skins

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).

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.

Another cool new feature of the FLVPlayback component is the addition of the supporting FLV Playback Custom UI components. You probably noticed the two new categories in the Components panel (see Figure 2).

The FLV Playback Custom UI components are a collection of individual video controls that can be associated with an FLVPlayback instance. The custom UI components can be used in any combination, placed anywhere on the screen, and edited like standard movie clip symbols.

Flash 8 provide the following controls:

Buttons:

• Back
• Forward
• Mute
• PlayPause (or Play and Pause as individual buttons)
• Stop

Bars:

• Buffering
• Seek
• Volume

The general process involved in using the Custom UI components is to add an instance to the Stage, name the instance, and associate the instance name with an assignment property on the video component. After the custom UI component is associated with an FLVPlayback instance, the component automatically assumes the functionality its name implies. There is no additional coding necessary.

Adding a Custom UI Component to an FLVPlayback Instance

To add a custom UI component to an FLVPlayback instance, follow these steps:

1. Create an FLA file in Flash Professional 8 and drag an instance of the FLVPlayback component from the Components panel to the Stage. Select the FLVPlayback instance and give it an instance name in the Property inspector (flvPlayback, for example).
2. Save the file and export the SWF file.
3. Select the component and check to make sure that the skin property is set to None in the Component inspector (the skin parameter in the Component inspector is described in the following section). You may assign a skin SWF file and custom UI components but you should only do this if you're intending to.
4. Now you're set up to start adding custom UI components to the Stage alongside the FLVPlayback instance. You can position the components in any way you like. Name the instance (mySeekBar, for example).
5. As an applied sample, let's say you want to add a seek bar to an FLVPlayback instance with its skin property set to None. To do this, drag a SeekBar component from the Components panel to the Stage. Position the component as desired. In general the custom UI components are not designed to be scaled on the Stage; try to avoid scaling the component instances. Instead, change the size of the graphics inside the component movie clip symbols in the library. However, the seek bar will look OK if scaled horizontally. Use the Free Transform tool or the match command in the Align panel to match the width of the FLVPlayback instance (see Figure 3).

6. Open the Library panel. Notice that the SeekBar instance brought several skin symbols along with it, which it stores in a folder named FLV Playback Skins. You can enter the editing mode for each of these movie clips either through their instances on the Stage or the symbols in the library (see Figure 4).

7. The last step is to associate the SeekBar instance with the FLVPlayback instance. To do this, add a new layer named actions to the Timeline that contains the video components. Select the actions layer and open the Actions panel. Enter the following code and replace flvPlayback with the FLVPlayback instance name you're using, and replace mySeekBar with the instance name of your seek bar:

8. Export the SWF to see the results.

Tip: If you're using a SeekBar component with an older FLV file, it's possible that the FLV file does not contain the metadata needed to power the SeekBar component and percentage functionality. If this is the case, you can resolve the issue by manually entering a totalTime value into the FLVPlayback parameters.

Modifying Custom UI Component Graphics

The graphics contained in the custom UI components can be edited as you would normally edit any movie clip symbol. Enter the movie clip's Timeline, find the graphics that you want to adjust, and edit from there. The key is that you don't want to change the supplied instance names or the file structure.

Following on the steps of the previous exercise, here's how you can modify the seek bar graphics:

1. Double-click the SeekBar instance on the Stage to enter its editing mode.
2. Lock all the layers except for the progress layer and double-click the progress bar to enter its editing mode. Select the gradient fill on the Stage and change the color using the Fill Color swatch on the tool bar (for example, you could change it to a solid blue or a different colored gradient fill).
3. Click the SeekBar button on the edit bar to return to the SeekBar Timeline (see Figure 5).

4. Notice in Figure 5 that there is a single keyframe at Frame 2 of the Timeline. The Timeline never actually plays to Frame 2, but graphics are stored there in some cases to ensure that the symbols are exported with the file and available for ActionScript. Unlock the assets layer, move to Frame 2, and edit the handle graphic on the Stage. Double-click the graphic to enter its editing mode. Change the graphic on Layer 1 as desired. Note that there is an invisible graphic on the hitBG layer which creates a "hit state" (active area) for the handle.
5. Click the SeekBar button on the edit bar to return to the SeekBar Timeline. You can continue to edit from here if you like. Notice that the script layer contains code that adjusts the settings for the control in relation to the FLVPlayback instance. You do not need to adjust this code unless you change the size and shape of the graphics.

This same process can be applied to all the custom UI components. For more complex customizations, read the Help documentation listed below.

Custom UI Component Details

As you enter the movie clip for each component, you'll notice that they are all set up a bit differently. Refer to the following section of the Flash 8 Help documentation for full details of each type of component:

Component Language Reference > FLVPlayback Component > Customizing the FLVPlayback Component > Skin Custom FLVPlayback UI Components Individually

Additional FLVPlayback ActionScript Properties for Skinning

The following code example shows all the available skin assignment properties included in the FLVPlayback component. In this sample the instance name of the component is flvPlayback and the values appearing after the assignment operator (=) are the instance names of the custom UI components on the Stage:

Note that you will use the PlayPauseButton component or a PlayButton and a PauseButton component. The PlayPauseButton component toggles the two states whereas the PlayButton and the PauseButton components are separate buttons. The code sample above is simply showing all the skin properties together for reference.

You can also use the bufferingBarHidesAndDisablesOthers property to modify how the component handles the skins in relation to the buffering bar:

This can be handy if you are using a large buffer and need the controls to be disabled while the video downloads (most likely when streaming video from a Flash Media Server server). This property is set to false by default.

Note that the autoSkinHide property is another skins-related property but it does not affect FLV Playback Custom UI component instances. It can only be used with skin SWF files as described earlier in Using Prebuilt Skin SWF Files.

As you discovered previously, using the Select Skin dialog box and the skin SWF feature is quick and easy. In this section, you will take a tour of the process of creating a custom skin SWF file.

Creating a custom skin SWF will save you a lot of time by combining predesigned custom controls, ActionScript code for extended functionality, and the use of the Select Skins dialog box for applying the skin. In addition, a skin SWF is designed to be scalable using the new Flash 8 movie clip scaling features. See the Flash Help documentation for more details (Using Flash > About 9-Slice Scaling and Movie Clip Symbols).

Getting Started

The easiest way to create a new skin SWF file is to copy an existing one and modify it. Start by creating a copy of one of the prebuilt skin SWF files that comes with Flash Professional 8. The FLA files for the default set of skins are located in the Flash 8 application folder in the <language>\Configuration\SkinFLA folder on your hard drive.

The following steps will get you started:

1. Assuming that you have Flash Professional 8 installed, go to the Flash 8 application folder and open the <language>\Configuration\SkinFLA folder.
2. You should be looking at FLA files for each of the prebuilt skin SWF files (see Figure 6). Choose a skin that comes close to what you have in mind and open the skin FLA file in Flash.

3. Save the FLA file in the <language>\Configuration\SkinFLA folder with a new name. Note that you don't have to save the FLA file in this location. The SWF file produced from this FLA will be placed in the Configuration folder. You can save the FLA anywhere you like on your hard drive.
4. Take a few moments to explore the FLA file. Remember that your goal is to keep the supplied instance names and file structure the same.
5. Notice right away that all the control graphics are spread out across the Stage. Click the various graphics and view the selected items. The collections of graphics that create each control are grouped in a movie clip. You can edit the graphics in the movie clips as desired, but the movie clip nesting structure and instance names need to remain the same.

That's it. Your new skin SWF file is ready for customization.

Making Graphic Modifications to the Skin SWF File

Now that you've created your own version of an existing skin SWF file, the fastest way to modify it is to edit the graphics that appear in the movie clips on the Stage. Take some time to experiment and make graphic changes.

The skin SWF file uses a new Flash 8 scaling feature called Scale 9. Scale 9 places a grid of guides over a movie clip in the library. The scale guides divide the graphics into nine sections which enable Flash to scale them from instance to instance without distortion. To check it out, open the Chromes folder in the library and double-click its symbol to enter its Timeline. Notice the guides overlaying the rectangular chrome graphic. They are viewable when editing a movie clip or button in the library editing mode. The effects of the Scale 9 feature can be seen only at runtime in the SWF file. Try to scale a few instances on the main Timeline and then export the movie (Control > Test Movie) to see the results.

Simple modifications that change the look of buttons or the chrome (or background) for the buttons without changing the movie clip dimensions will work without further modifications. Simple modifications in the location of the controls will work as well in most cases.

The following steps will get you started with exploring and editing the file:

1. Open the skin SWF FLA that you want to edit in Flash Professional 8.

   Notice that the file consists of a number of layers with graphics on Frame 1 of the root Timeline. The layer at the top of the layer stack contains the layout_mc instance (the container for the assembled controls) and the ActionScript code, which initializes various properties in the layout_mc movie clip. You will not need to edit this code, but you may want to take a look and explore the comments and the default property settings.

2. To edit a graphic, you first have to enter the editing area (Timeline) for the movie clip that holds the graphic. Double-click a graphic on the Stage repeatedly until you reach the Timeline that contains the layers and editable images.

   To edit the chrome background graphic, for example, which appears horizontally across the bottom of the screen, double-click it once to enter into the movie clip's Timeline and editing area. Notice that the movie clip contains the editable graphics distributed across several layers (see Figure 7). The name of the movie clip changes from file to file but it always appears on the bottom layer of the root Timeline, and it contains the same layer structure internally.

3. Unlock the Clear Plate layer and select the fill on the Stage. With the fill selected, change the color in the Fill Color swatch on the toolbar. Notice that the color in the layout_mc movie clip on the root Timeline updates automatically. You can experiment with changing the fill color, outline, and shadow.
4. When you're finished, click the Scene 1 button (Control E) on the edit bar to return to the main Timeline.
5. The process is the same for any graphic you want to modify. Double-click the graphic until you reach the editing area. Note that you may have to double-click more than once to get to the editing area. This is the case when buttons are nested two to three levels deep.
6. Save your file and export your SWF file. Refer the next section to learn how to load the exported skin SWF file into the FLVPlayback component.

Tip: Modifications to the colors in the chrome graphic and background graphic can really go a long way towards changing the look of the video player without taking a lot of effort to produce.

Loading a Custom Skin Manually

To load a custom skin SWF file into the FLVPlayback component, use the skin parameter and the Select Skin dialog box to browse for the SWF. While you can browse for a SWF file from any location, you'll probably find it most convenient to place the file in the Flash Configuration folder so that it appears along with the default list of skins. This enables you to preview the skin SWF file among the other default files. It also automatically places a copy of the skin SWF file next to the FLVPlayback SWF file you're developing.

To make a skin SWF file perpetually available in the Select Skin dialog box, save your custom skin SWF file into the <language>\Configuration\Skins folder in the Flash 8 application folder. Saving the SWF file in this location includes it in the Select Skin dialog box. Your custom skin will now be available to you every time you use the Select Skin dialog box.

To load the skin SWF into an FLVPlayback component:

1. Create a FLA file in Flash Professional 8 and drag an instance of the FLVPlayback component from the Components panel to the Stage.
2. Save the file.
3. Select the FLVPlayback instance and open the Component inspector from the Window menu (File > Window > Component Inspector).
4. Click the skin parameter once to select it and then again to open the Select Skin dialog box.
5. Scroll down the list of options in the Skin pop-up menu and look for the name under which you saved your skin. You can work with it as you would with the default skins from here on out.

To load a skin SWF file that does not appear in the Select Skin dialog box by default, you can use the Custom Skin URL option. This may be useful if you're browsing for SWF files located on your company's server or saving files to your desktop for convenience:

1. Open the Select Skin dialog box again from the FLVPlayback parameters.
2. Scroll down to the last option in the Skin pop-up menu: Custom Skin URL (see Figure 8).

3. Enter the path in the URL text box and click OK. The path should be the skin SWF filename, including the .swf extension.

That's it! You should see the SWF file appear in the Live Preview for the component and in the movie when exported.

Loading a Custom Skin with ActionScript

You can bypass the Component inspector parameters altogether and assign a skin SWF file to the component using ActionScript. This is particularly useful in a dynamic application that initializes during runtime.

To assign a skin SWF file to the component using ActionScript:

1. Create a FLA file in Flash Professional 8 and drag an instance of the FLVPlayback component to the Stage from the Components panel.
2. Save the file and export the SWF file.
3. Create a copy of the skin SWF file you want to use and place it next to the file you just saved.
4. Back in the FLA file containing the video component, select the FLVPlayback instance and name its instance (flvPlayback, for example).
5. Add a new layer to the Timeline and name it actions. Select the actions layer and open the Actions panel to add a bit of code.
6. Write the following code, replacing flvPlayback with the instance name you're using and the path with the correct name of the skin SWF file you're trying to load. The path to the SWF file can be a relative or absolute URL:

7. Export the SWF file to view the update. Note that ActionScript settings cannot be seen until runtime in the SWF file.

Anatomy of a Skin SWF

For those of you who are interested in building your skin SWF files from scratch, you should learn the anatomy of the expected layout for the file. The following section in the Flash Help documentation outlines some key points about the file structure:

Component Language Reference > FLVPlayback Component > Customizing the FLVPlayback Component > Skin Custom FLVPlayback UI Components Individually

Where to Go from Here

The three skinning approaches described in this article will give you plenty of options for customizing the look and feel of the FLVPlayback component and controls. Take some time to experiment and explore the prebuilt skin files that ship with Flash Professional 8. The FLVPlayback component also includes an expanded ActionScript API, which provides you with a lot of control over the state and performance of the video player. See the Flash Help documentation for more details (Flash Help > Component Language Reference > FLVPlayback Component > mx.video.FLVPlayback class).