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.
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:
In Flash Pro, create a new Flash document. Save the document as
mediaPlayback.fla. 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. Select the instance on the Stage, and use the Properties panel to
name the instance cmpStream. 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). 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
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. 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.
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:
Open a new Flash document, then open the Components panel (Ctrl-F7 or
Cmd-F7). Drag an instance of the MediaDisplay component to the Stage. In the
Properties panel, name the instance cmdStream. 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.
|
|
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. 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. 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);
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.
|
