Using FLVPlayback custom UI components

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

Figure 3. Components panel in a Flash CS4 Professional ActionScript 3 file showing only ActionScript 3 components organized into two simplified categories: User Interface and Video

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

   

   Figure 4. SeekBar instance on the Stage placed below the FLV file

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

   

   Figure 5. Library panel containing the SeekBar custom UI component and component skins

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:

   // Assign the mySeekBar instance to the flvPlayback instance
   flvPlayback.seekBar = mySeekBar;

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

   

   Figure 6. Clicking the SeekBar button on the edit bar while editing a skin quickly returns you to this location

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:

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; 
flvPlayback.fullScreenButton = fullBtn;

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:

flvPlayback.bufferingBarHidesAndDisablesOthers = true;

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.

Page 3 of 5

Previous Page

Next Page