12 September 2005
This article focuses on customizing the FLVPlayback component using the skinning features. For details on how to play and control videos, see Flash Video Template: Video Presentation with Navigation.
You should test your skin customizations with a working file. If you don't have an FLV file on hand, use the sample file attached with this article.
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:
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.
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:
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.
contentPathproperty holds the URL to the video and the
skinproperty 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.
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:
skinproperty in the Component inspector parameters list to select it and then click again to launch the dialog box. The Select Skin dialog box opens.
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:
skinproperty in the Component inspector parameters list. The Select Skin dialog box opens.
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:
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.
To add a custom UI component to an FLVPlayback instance, follow these steps:
skinproperty is set to
Nonein 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.
skinproperty 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).
flvPlaybackwith the FLVPlayback instance name you're using, and replace
mySeekBarwith the instance name of your seek bar:
// Assign the mySeekBar instance to the flvPlayback instance flvPlayback.seekBar = mySeekBar;
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.
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:
This same process can be applied to all the custom UI components. For more complex customizations, read the Help documentation listed below.
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
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:
flvPlayback.playButton = playbtn; flvPlayback.pauseButton = pausebtn; flvPlayback.playPauseButton = playpausebtn; flvPlayback.stopButton = stopbtn; flvPlayback.muteButton = mutebtn; flvPlayback.backButton = backbtn; flvPlayback.forwardButton = forbtn; flvPlayback.volumeBar = volbar; flvPlayback.seekBar = seekbar; flvPlayback.bufferingBar = bufbar;
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:
flvPlayback.bufferingBarHidesAndDisablesOthers = true;
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).
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:
That's it. Your new skin SWF file is ready for customization.
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:
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.
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.
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.
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:
skinparameter once to select it and then again to open the Select Skin dialog box.
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:
That's it! You should see the SWF file appear in the Live Preview for the component and in the movie when exported.
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:
// Assign a new skin to my FLVPlayback instance using ActionScript flvPlayback.skin = "myCustomSkin.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
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).