Skinning the ActionScript 3 FLVPlayback component

Additional Requirements

The ActionScript 3 FLVPlayback component comes with Flash CS4 Professional along with the Adobe Media Encoder.

Although this sample file is not mandatory in order for you to understand this article, it will be helpful to have an FLV file on hand so that you can test your skin customizations with a working file. If you don't already have an FLV file to use, you can download this sample file.

One of the great features of the FLVPlayback component is its range of options for customization. You can easily change the combination of controls that appear with the video, the look and feel of the control skins, and the look of the background chrome.

A component's skin is a collection of graphics that define the visual states of the control. Skinning a component is the process of changing the look of the graphics. There are times when you'll want to customize the component's look to fit your presentation, screen real estate, and company branding.

This article covers three approaches available for skinning the ActionScript 3 FLVPlayback component:

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

In addition, the article closes with a brief look at skinning the ActionScript 3 user interface components. This process is now standard and is similar to working with the video components.

Note: This article covers skinning the FLVPlayback component available in the Components panel of an ActionScript 3 FLA file. If you're using Flash Professional 8 or working with an ActionScript 2 file in Flash CS4, please see the previous version of this article for the appropriate details.

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

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.

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.

Another nice feature of the FLVPlayback component is the supporting FLVPlayback custom UI components. Notice the simplified organization of the Components panel in an ActionScript 3 file; video components are now grouped in a Video category (see Figure 3).

The FLVPlayback 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 can be graphically edited just like standard movie clip symbols.

Flash CS4 Professional provides the following controls:

Buttons:

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

Bars:

• Buffering
• Seek
• Volume

Captioning:

• FLVPlaybackCaptioning

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. No additional coding is necessary.

Note: For more information on the FLVPlayback captioning feature, see Video Learning Guide for Flash: Synchronization and captions.

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 ActionScript 3 FLA file in Flash CS4 Professional 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 previous section.)
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 fashion you like. Name the instance of each component (mySeekBar, for example).
5. As an example, 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 okay 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 4).

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

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 Frame 1 of 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 you've assigned to your SeekBar instance:

8. Export the SWF to see the results.

Tip: The FLVPlayback UI components will automatically associate themselves with the FLVPlayback instance without using the ActionScript API. If there are multiple FLVPlayback instances on the Stage, be sure to use the ActionScript API to route the controls to the right video component.

Modifying custom UI component graphics

The graphics contained inside the custom UI components can be edited exactly 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 them there. The key is that you want to avoid changing the supplied instance names or the file structure. Make sure those stay the same.

Now we're ready to 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 from the Tool panel. (For example, you could change the color to a solid blue or use a different colored gradient fill).
3. Click the SeekBar button on the edit bar to return to the SeekBar timeline (see Figure 6).

4. Notice in Figure 6 that there is a single keyframe at Frame 2 of the Timeline. The Timeline never actually plays to Frame 2, but sometimes graphics are stored there to ensure that the symbols are exported with the file and available for ActionScript. Unlock the assets layer, select 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 that creates a "hit state" (the 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 the other graphics from here if you'd like. 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 yourself 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 Skin FLVPlayback custom UI component individually section of the Using ActionScript 3.0 Components online documentation.

Note: The FLVPlayback component is the primary video control and serves as a display area for the video. It does not have any internal customizable graphics. To graphically change the video controller, you can add prebuilt or custom skins.

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:

You can choose to use either 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 lists all the skin properties together for your reference.

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

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

Note that the autoSkinHide, skinBackgroundAlpha, skinBackgroundColor, and skinFadeTime properties are also related to skins but they do not affect FLV Playback custom UI component instances. They can only be used with skin SWF files as described earlier in Using prebuilt FLVPlayback skins.

For more information on adding an FLVPlaybackCaptioning component, see the Customize the FLVPlaybackCaptioning component section of the Using ActionScript 3.0 Components online documentation.

As you've seen in the examples we described at the beginning of this tutorial, using the Select Skin dialog box and the skin SWF feature is quick and easy. In this section, we'll cover the process for creating a custom skin SWF file.

Creating a custom skin SWF can save 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 9-slice movie clip scaling features.

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 CS4 Professional. The FLA files for the default set of skins are located in the Flash CS4 application folder in the \Common\Configuration\Component Source\ActionScript 3.0\FLVPlayback directory.

Note: To make your finished skin SWF file available as an option in the Select Skin dialog box, save it in the \Common\Configuration\Component Source\ActionScript 3.0\FLVPlayback folder, either in the Flash application folder or in a user's local folder.

Follow these steps to create a new skin SWF file using an existing one:

1. Assuming that you have Flash CS4 Professional installed, navigate to the Flash CS4 application folder and open the \Common\Configuration\Component Source\ActionScript 3.0\FLVPlayback folder.
2. Locate the FLA files for each of the prebuilt skin SWF files (see Figure 7). Select a skin that comes close to the design you have in mind. Open the skin FLA file.

3. Save the FLA file in the \Common\Configuration\Component Source\ActionScript 3.0\FLVPlayback folder, using a new name. 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. If you'd prefer, you can save the FLA file in another location—anywhere on your hard drive.
4. Take a few moments to explore the FLA file. Remember that your primary goal is to keep the default instance names and file structure the same.

You'll see 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 together in a movie clip. You can edit the graphics in each of the movie clips as desired, but the movie clip nesting structure and the instance names must remain the same.

That's it. Your new skin SWF file is now 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 with editing the individual elements and make graphic changes.

The skin SWF file uses a scaling feature called 9-slice scaling, which places a grid of guides over a movie clip in the library. The scale guides divide the graphics into nine sections, which enables Flash CS4 to scale them from instance to instance without distorting the corner regions. To see how this works, open the Chromes folder in the Library and double-click its symbol to enter its timeline. In editing mode, you'll see guides overlaying the rectangular chrome graphic. The guides are viewable when editing a movie clip or button in the Library editing mode. The effects of the 9-slice scaling feature can be seen at runtime in the SWF file, as well as during author time on the Stage. Try scaling 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.

Next, let's explore the skin SWF FLA file and begin editing it:

1. Open the skin SWF FLA file that you want to edit in Flash CS4 Professional. Notice that the file consists of a layer named "All script" and two layer folders named "All Layout Layers" and "Sample Controls Layers" (see Figure 8). You do not need to edit the code on the "All script" layer. The "Sample Controls Layers" folder contains sample control skins on guide layers. You can use these as a reference while you edit. The "All Layout Layers" folder contains the controls that will actually appear in the exported skin. These controls can be seen in the layout area on the left side of the Stage.

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. Remember, you will want to edit the controls that appear on the left side of the Stage.
   To edit the chrome background graphic, for example, which appears horizontally across the bottom of the screen, unlock the ChromeFill layer and double-click the graphic once to enter into the movie clip's timeline and editing area.
3. With the fill selected, change the color using the Fill Color swatch in the Tool panel. Return to the main timeline and notice that the fill color has been updated. Experiment with changing the fill color, outline, and shadow of the elements.
4. The process is the same for any graphic you wish 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 within a movie clip. Click on the button with the symbol's name in the edit bar to return to the previous timeline after editing the graphics in a nested movie clip.
5. Save your file and export your SWF file to view your changes. Refer to the next section of this tutorial 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 exerting a great deal of effort towards the update process.

Note: Since you can set the color of a skin independently of choosing the skin, you do not need to edit the FLA file to modify the skin's color. If you create a skin that has a specific color and you do not want it to be editable in the Select Skin dialog box, set this.border_mc.colorMe = false; in the skin's FLA file ActionScript code.

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 on your hard drive, you'll probably find it most convenient to place the SWF file in the Flash CS4 Configuration folder so that it appears along with the default list of skins. This enables you to preview the skin SWF file alongside the other default files. If you save the SWF file here, Flash 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\FLVPlayback Skins\ActionScript 3.0 folder within the Flash CS4 application folder. Saving the SWF file in this folder means it will be included as an option in the Select Skin dialog box. Once you save it in this location, your custom skin will be available for you to use 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 CS3 Professional 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 through the list of options in the Skin pop-up menu and look for the name under which you saved your skin. You can select your custom skin and use it exactly as you would with the default skins now that it appears in the menu.

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 method may be useful if you're browsing for SWF files located on your company's server or if you've been saving your custom skin SWF files to your desktop for convenience:

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

3. Enter the path in the URL text box and click OK. The path should contain 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 after it's been 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 approach is particularly useful when developing a dynamic application that initializes during runtime.

Here are the steps to assign a skin SWF file to the FLVPlayback component using ActionScript:

1. Create an ActionScript 3 FLA file in Flash CS4 Professional 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 Frame 1 of the actions layer and open the Actions panel to add a bit of code.
6. Type the following code, replacing flvPlayback with the instance name you're using and replace the path with the correct name of the skin SWF file you're loading. The path to the SWF file can be either a relative or an absolute URL:

7. Export the SWF file to view the updated version. Note that ActionScript settings cannot be seen until runtime in the SWF file, so you must test the movie to see your changes.

Anatomy of a skin SWF

For those of you who are interested in building your skin SWF files from scratch, you should start by learning the anatomy of the expected layout for the file. The Create a new skin section of the Using ActionScript 3.0 Components online documentation outlines more key points regarding the file structure.

The ActionScript 3 user interface components are a big change from their ActionScript 2 counterparts in that they allow for easier graphical skinning. The process for editing ActionScript 3 component skins is now very similar to the process for editing the video component skins. Since combining user interface components with video interfaces is a fairly common need, examining the approach for skinning ActionScript 3 components is a logical next step.

The method used for skinning ActionScript 3 components has departed from the previous process—where many of the component skins were drawn in ActionScript with a style API supplied for simple modifications. The new approach uses graphic skins (movie clips) that can be edited visually to change a given skin state. Use of a style API is still in place, but now it is used primarily to assign movie clip symbols to component skin symbols or to supply supporting formatting.

Note: The default appearance of ActionScript 3 components could be considered a theme (Aeon Halo), but these skins are built into the components. The ActionScript 3 components do not support the external theme files used by ActionScript 2 components.

Setting ActionScript 3 component styles

Each component contains a styles API that allows you to assign skin symbols for graphic states, assign text properties for labels, and layout properties for a component. Styles can be set uniquely on each component instance or they can be set globally across all components of a given type.

The following code shows a sample of a TextFormat object being applied to a Button instance:

See the Customizing the UI Components section of the Using ActionScript 3.0 Components online documentation for more information on setting component styles.

Defining ActionScript 3 skin states

Graphic skins can also be created uniquely for some of the components or globally for all components of a given type. This approach makes creating custom interfaces much easier. The basic process includes creating a movie clip symbol that contains the graphic skin state, turning on the symbol's Export for ActionScript property and assigning it a class name, and then using a setStyle call on the component's style API to assign the symbol to the desired component state.

The following code illustrates how a custom skin is added to a Button component during its emphasized state:

In the code example above, bBtn is the instance name of the button and Button_selectedOverSkin is the class name entered into the symbol properties for the custom skin movie clip symbol in the Library.

See the About Skins section of the Using ActionScript 3.0 Components online documentation for more information on setting component styles.

Where to go from here

The three skinning approaches described in this tutorial will provide you with 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 CS4 Professional. You will notice some major improvements in the skin FLA layout when comparing them with the ActionScript 2 skins or skins in Flash Professional 8. The FLVPlayback component now also includes an expanded ActionScript API, which offers increased control over the state of UI elements and performance of the video player.

You may find that creating custom-built video controls from scratch is advantageous in some situations. As a next step, try to build a custom seek bar or volume slider component. You can use the FLVPlayback's ActionScript API to create a wide range of controls.

For more information on controlling the FLVPlayback component using ActionScript, see my article on Controlling Flash video with FLVPlayback programming.