Using the FLVPlayback Component | Macromedia Flash8 Bible

In the last couple of sections, you've seen the FLVPlayback component at work in Flash Pro 8, as inserted into your Flash document with the Video Import wizard. In this segment of the chapter, you learn more "under the hood" usage of the FLVPlayback component. Remember, you can only access the FLVPlayback component in the Flash Pro 8 edition.

Cross-Reference

This part of the chapter explores many ActionScript-based features of the FLVPlayback component and its event model. For an introduction to components, read Chapter 33, "Using Components." We also utilize more advanced ActionScript in many of these examples. To learn more about ActionScript, be sure to read Parts V, VII, VIII, and IX of this book.

Working with the Component Parameters

You don't have to use the Video Import wizard to add an FLVPlayback component instance to your movie. In fact, you can just drag and drop the component from the Components panel (Window ð Components) to the Stage of your Flash document. You can access the following parameters of an FLVPlayback component instance from the Property inspector's Parameters tab.

Note

All of these parameters can also be used in ActionScript, with the same spelling. For example, if you have an instance of the FLVPlayback component named cfp, you can set the autoPlay parameter to false with code: cfp.autoPlay = false;.

autoPlay: This parameter determines if the video loaded into the component automatically plays (true) or loads in a paused state (false).
autoRewind: This parameter controls how the video clip behaves when the clip has finished playing. If this parameter is set to true, the clip rewinds to the starting frame. If the parameter is false, the video freezes on the last frame when reached.
autoSize: This parameter determines if the instance should resize to accommodate the width and height of the video content. If this property is set to true, then the FLVPlayback component's video display area is the actual pixel width and height of the .flv file. If the parameter is set to false, the FLV content is scaled to fit within the display area of the component.
contentPath: This property determines which .flv file is loaded into the component. You can use a relative path (for example, myVideo.flv), an absolute path (for example, /videos/myVideo.flv), or a fully-qualified domain (for example, http://www.flashsupport.com/video/lizard_112k_vp6.flv).
cuePoints: This property specifies the cue points that are linked to the playback of the FLV file. If you create embedded cue points (see our coverage later in this chapter), this property auto-fills within the Property inspector after you select a new .flv file with the contentPath property. If you double-click the cuePoints field, the Flash Video Cue Points dialog box opens (see Figure 17-20), where you can create new ActionScript-based cue points or view embedded cue points. Embedded cue points can not be changed. We discuss cue points later in this chapter.
isLive: This property determines if the video content is a live stream being published from a Flash Communication Server (or Flash Media Server). The default value is false. If set to true, the duration of the stream (which is nonexistent for a live stream) is not displayed in the component's UI and the scrub bar is disabled.
maintainAspectRatio: This parameter controls how video content fits within the display area of the component. If the display area uses an aspect ratio different than that of the video content and this property is set to false, the video will be stretched vertically and/or horizontally to fit the display area. If the property is set to true, the video content maintains its aspect ratio regardless of the display area's aspect ratio.
skin: This property, when accessed in the Property inspector, opens a dialog box from which you can choose a skin .swf file for the component. The values in this menu match the skins available in the Skinning screen of the Video Import wizard.
skinAutoHide: This property controls if the skin .swf used for the component hides itself if the user's mouse cursor is not over the video display area. If set to false, the skin is always visible. If set to true, the skin disappears when the user's mouse cursor rolls off the component.

totalTime: This property determines the duration of the video clip. Generally, you do not need to set this value, as the property is automatically read from the metadata of an .flv file or from the server-side API of a Flash Communication Server. If you do set this value in the Property inspector or with ActionScript, the new value overrides any value specified in metadata of the .flv file.

Caution

In order for the totalTime property to be set with a streaming .flv file from Flash Communication Server, you must include the custom code in your Flash Communication Server application script. You can find this code within the main.asc file located in the Flash 8 application folder, Samples and Tutorials\Samples\Components\FLVPlayback. If you're using a Flash Video Streaming Service provider, this code should already be enabled on the provider end.

volume: This property controls the loudness of the .flv file's audio channel, if one exists. You can use a value in the range of 0 to 100, with 0 being absolute silence and 100 being the maximum loudness of the audio channel.

image from book
Figure 17-20: The Flash Video Cue Points dialog box

Using FLV Playback Custom UI Components

If you have Flash Pro 8, you can also add custom UI components specifically designed to be used with the FLVPlayback component. In ActionScript, you can tell an FLVPlayback instance to use other components for playback control. The following properties represent component references used with the FLVPlayback component:

backButton: This property can specify a custom UI component to seek to previous cue points in the video.
bufferingBar: This property controls which component displays the buffering status of the video clip.
forwardButton: This property specifies the component to seek to cue points past the current playhead time.
muteButton: This property specifies the component that can toggle the muting of the video's audio track.
pauseButton: This property controls which component can pause the video playback.
playButton: This property controls which component can initiate playback of the video file.
playPauseButton: This property specifies which component can toggle between play and stop states of the video stream.
seekBar: This property specifies the component that displays the scrubbing area and Playhead control for the video.
stopButton: This property controls which component stops and resets the stream back to its starting position.
volumeBar: This property specifies the component that controls the volume setting of the video clip.

We'll show you how to practice using a few custom UI components with an FLVPlayback instance.

In Flash Pro 8, create a new document and save it as flvplayback_custom.fla.
Rename Layer 1 to cfp. On frame 1 of this layer, drag an instance of the FLVPlayback component from the FLV Playback - Player 8 nesting to the Stage.
In the Property inspector, name the instance cfp. Click the Parameters tab, and double-click the value for the skin parameter. In the Select Skin dialog box, set the Skin type to None, as shown in Figure 17-21.
Create a new layer named custom UI, and place this layer above the cfp layer.
Open the Components panel, and expand the FLV Playback Custom UI group. With frame 1 of the custom UI layer selected, drag an instance of the PlayPauseButton component to the Stage. Place the new instance below the cfp instance, near the left corner.
In the Property inspector, name the new instance cppb, as shown in Figure 17-22.
Now, you need to link the cppb instance to the cfp instance in ActionScript. Create a new layer named actions, and place it at the top of the layer stack.
Select frame 1 of the actions layers, and open the Actions panel (F9, or Option+F9 on Mac). In the Script pane, add the following actions:
```
 var cfp:mx.video.FLVPlayback; var cppb:MovieClip; cfp.playPauseButton = cppb; cfp.contentPath = "stella_raw.flv"; 
```
Note
For this example, make sure you have copied the stella_raw.flv file from the ch17 folder to the same location on your computer where you saved the .fla document in Step 1.
Save the Flash document, and test it (Ctrl+Enter or z+Enter). The stella_raw.flv file automatically plays in the cfp instance. You can click the cppb instance to pause the video, and click it again to resume playback.
Go back to the Flash document. Let's add another custom UI component. Select frame 1 of the custom UI layer. From the Components panel, drag an instance of the SeekBar component to the Stage, to the right of the PlayPauseButton instance.
Name the SeekBar instance csb in the Property inspector. Optionally, use the Free Transform tool to stretch the width of the SeekBar instance to span the remaining width of the FLVPlayback instance.

Select frame 1 of the actions layer, and open the Actions panel. Add the following bold code to the existing script:

 var cfp:mx.video.FLVPlayback; var cppb:MovieClip; var csb:MovieClip; cfp.playPauseButton = cppb; cfp.seekBar = csb; cfp.contentPath = "stella_raw.flv";

Save the Flash document, and test it (Ctrl+Enter or z+Enter). You should see the playhead of the SeekBar instance move to the right as the video plays (see Figure 17-23).

image from book
Figure 17-21: The Select Skin dialog box

image from book
Figure 17-22: The PlayPauseButton component

image from book
Figure 17-23: The SeekBar component displaying the current position of the video

You can continue adding other custom UI components from the Components panel and specifying the new instance names to the corresponding property of the cfp instance in the frame 1 script of the actions layer.

Tip

You can also modify the graphics used by the custom UI components. Open the Library panel to view the skin symbols in the FLV Playback Skins folder.

On the CD-ROM

You can find the completed file, flvplayback_custom.fla, in the ch17 folder of this book's CD-ROM.