Section 7.3. Using Flash Pro s Media Components

7.3. Using Flash Pro's Media Components

Once you've created FLV files with any of the tools described earlier in this chapter, you're ready to put them to use in your own FlashCom applications. In this section, you learn how to use components designed to stream FLV files from a FlashCom application. If you don't know your NetStream basics, be sure to read Chapter 5 before proceeding with the examples shown in this section.

Among the several add-ons Macromedia includes in Flash Pro, beyond the standard edition of Flash MX 2004, the media components enable you to quickly add audio or video stream playback to your applications. The media components take care of everything from stream initialization to stream playback control.

7.3.1. MediaPlayback Component

The all-in-one MediaPlayback component enables you to play FLV files from a FlashCom Server application over RTMP or from a web server over HTTP. The component features a display area for the video portion of your stream, a playback controller, and a Halo-themed background. For our purposes, we review only the FlashCom-specific features of this component. For a review of the component's API, search for "MediaPlayback" in Flash MX 2004's Help panel.

As with other Flash components, you can add and control a MediaPlayback instance with ActionScript alone, or you can drag an instance to the Stage of your Flash document and specify its settings in the Parameters tab of the Component Inspector panel, as shown in Figure 7-25.

Figure 7-25. The parameters for the MediaPlayback component

The following parameters are configurable. Most apply only to FLV files:

FLV or MP3

Specify the type of media you want to load with the component instance, either from a web server or from a FlashCom Server application. When you select MP3, the display area of the component shrinks, accommodating only the progress bar (and hidden controls).

Video Length

Use these text fields to enter the duration of your FLV video clip in hours, minutes, seconds, and milliseconds. If the Milliseconds checkbox is cleared, the last field is measured in frames instead of milliseconds , and the frame rate (FPS) option becomes active.

Unless the FLV file is created with Flash Communication Server 1.5.2 or with Flash Video Exporter 1.2 (or higher), you need to specify the video length values for your media file. FCS 1.5.2 and Flash Video Exporter 1.2 automatically embed the duration value into FLV files. This data is retrieved using the new NetStream.onMetaData( ) callback. If you are using another utility to create your FLV files, consider using the FLV MetaData Injector, available at http://www.buraks.com/flvmdi, to insert the necessary metadata in FLV files to be compatible with the media components.

URL

Enter the RTMP path to your FlashCom application, including the stream name , or the HTTP path (relative or absolute) for the media file. If you are loading an FLV file from a FlashCom application, you can omit the .flv extension from the file path. For example, if you have a file named test.flv in the streams/_definst_ folder of an application folder named broadcast , you would use the following RTMP path (the path need not include the instance name when connecting to the default instance):

rtmp://fcs-server.com/broadcast/test

or

rtmp://fcs-server.com/broadcast/test.flv

The MediaPlayback component can also load FLV or MP3 files from an instance-specific folder within the streams folder of your FlashCom application. The following URL streams the MP3 file named song.mp3 from the streams/music folder of the application named jukebox :

rtmp://fcs-server.com/jukebox/music/song.mp3

Automatically Play

If you want your media file to play back as soon as the MediaPlayback instance loads onto the Stage, select this checkbox. Otherwise, the user must click the control bar's Play button to begin playback.

Use Preferred Media Size

This checkbox determines whether the video stream is displayed at its original width and height, as you encoded it. The only exception is if your video stream is larger than the width and height of the component instance. In that case, the video is scaled to fit within the boundaries of the component. However, if the component's video display area exceeds the width and height of the original video stream, the video stream does not scale up to fit within the component.

Respect Aspect Ratio

This option determines whether the video image is stretched to accommodate the width and height of the display area of the component instance. If this option is selected, the aspect ratio of the original video file is honored. If the option is cleared, the video image is stretched close to the edges of the component instance's display area.

Control Placement

Use this parameter to place the progress bar and control bar relative to the video display area. You can choose from Bottom, Top, Left, and Right.

Control Visibility

This option determines the behavior of the sliding control bar that displays next to the progress/playback bar. By default, the Auto option hides the control bar until the user mouses over the progress bar area. You can force the display of the control bar by choosing On, or you can disable the control bar by choosing Off.

Cue Points

Using the Add (+) or Remove (-) buttons , you can add or remove cue points to or from your media file. If you add a cue point to a media component, the instance fires an event whenever the cue point is reached. For example, you can click the Add button, enter test into the Name column, and enter 0:0:10.0 into the Position column. Thereafter, you can use a listener in your ActionScript code to detect when the media file has reached the 10 second position. The media components broadcast a cuePoint event when a cue point value is reached. Using cue points, you can add information overlays to your video for medical diagrams, instructional videos , and so forth.

For more information on adding event listeners for cue points, search for "Media.addCuePoint" in Flash MX 2004's Help panel.

To practice using the MediaPlayback component, follow these steps:

1. In Flash Pro, create a new Flash document. Save the document as mediaPlayback.fla .

2. Open the Components panel (Ctrl-F7 or Cmd-F7). In the panel, open the Media Components folder, and drag an instance of the MediaPlayback component to the Stage.

3. Select the instance on the Stage, and use the Properties panel to name the instance cmpStream .

4. In the Properties panel, click the Launch Component Inspector button. If the Component Inspector panel is docked , undock and expand the panel to see all of the options (as shown in Figure 7-25).

5. In the Component Inspector panel, make sure the FLV radio button is selected. In the URL field, enter the following RTMP path:

    rtmp://209.29.151.23/ch07/brother_running.flv 

   
   

6. This FLV file is publicly accessible on the book's official FlashCom Server. For the purposes of this example, the other options in the panel should be kept at their default values. You do not need to enter a Video Length value, as the FLV file's metadata contains the duration information.

7. Save the Flash document, and test it (Control Test Movie, or Ctrl-Enter or Cmd-Enter). Once the stream has been buffered from the book's server, playback will begin. Familiarize yourself with the component's UI, as shown in Figure 7-26. If you roll over the progress bar, the control bar expands below the display area. You can pause and resume playback with the Play button to the left, and you can rewind with the left arrow button. The right arrow button, which enables you to advance to the end of a media file, is disabled for FLV file playback. You can also control the volume of the audio track in the FLV file with the slider at the right of the control bar. When you roll off the control bar area, it hides itself again. Finally, click the top-right corner of the MediaPlayback instance and the window expands to fill the entire Flash movie Stage, scaling the video. Clicking the right corner again scales the component back to its original size.

Figure 7-26. The UI of the MediaPlayback component

7.3.2. MediaController and MediaDisplay Components

The MediaController and MediaDisplay media components can work either together or on their own. These components are essentially the main elements of the MediaPlayback component without the background chrome skin. MediaDisplay loads an FLV or MP3 file (and displays the video feed of an FLV file), while MediaController manages the playback of the media resource. You can build your own display clip or component to be used with the MediaController, build your own controller to be used with MediaDisplay, or use both together.

To use the MediaDisplay and MediaController components in concert with each other:

1. Open a new Flash document, then open the Components panel (Ctrl-F7 or Cmd-F7).

2. Drag an instance of the MediaDisplay component to the Stage. In the Properties panel, name the instance cmdStream .

3. Click the Launch Component Inspector button in the Properties panel. In the Component Inspector panel, make sure the FLV media type is selected, and specify the following RTMP path:

    rtmp://209.29.151.23/ch07/brother_running.flv 

   
   

   

   Unlike the MediaPlayback component, the MediaDisplay component requires a path that ends with an .flv extension. Feel free to substitute the RTMP path with one of your own.

   
   

4. Save your document as mediaDisplay_mediaController.fla , and test it (Ctrl-Enter or Cmd-Enter). You should see the FLV file play in the component. Because the component is using the Automatically Play option, the stream plays back on its own. Also, the video picture is larger than the component instance width and height because the Use Preferred Media Size option is enabled by default.

5. Now, drag an instance of the MediaController component onto the Stage. Place the instance below the MediaDisplay instance from Step 2. Name this instance cmcControl . Use the default values for the component parameters.

6. In order for the MediaController instance to work with the MediaDisplay instance, you need to add some ActionScript. Create a new layer in the timeline named Actions . Select frame 1 of the Actions layer, and open the Actions panel (F9). Add the following lines of code:

    import mx.controls.MediaDisplay; var cmdStream:MediaDisplay; cmdStream.associateController(cmcControl); 

   
   

7. Save your Flash document, and test it. The stream automatically plays, and if you roll the mouse over the progress bar, you can control the stream.