Beginner's guide to streaming audio through Flash Media Server 3.5

Streaming audio with the FLVPlayback component

I recently started using an Apple MacBook Pro and, along with the Leopard OS, I installed Microsoft Vista. The thing is, every time I launch Vista, I can't help but think, "This isn't right. I am using an Apple computer." I get the same feeling whenever I stream audio through the FLVPlayback component. Running audio through a component that I use to play video takes a lot of getting used to.

This example shows you two things: how to play an audio file and how to turn the sound on and off.

Basic audio streaming through the FLVPlayback component

To get started:

1. Download the files for this tutorial. When you unzip the sample download, open the Exercise folder and place a copy of AndreHprofile.mp3 in the vod folder found at C:\Program Files\Adobe\Flash Media Server 3.5\applications\vod\media

   Note: I would like to thank William Hanna, dean of the School of Media Studies and Information Technology at the Humber Institute of Advanced Learning and Technology in Toronto, for permission to use this clip, produced by the students in the Radio Broadcast program at Humber.

2. Open a new Flash CS4 ActionScript 3.0 document.
3. When the document opens, select Window > Components to open the Components panel.
4. Drag a copy of the FLVPlayback 2.5 component to the Stage.
5. With the component selected on the Stage, open the Component inspector and click the Parameters tab there to see the FLVPlayback component's parameters.
6. Double-click the skin parameter. When the Select Skin dialog box opens, select SkinUnderPlay.swf.

7. Double-click the source parameter and enter
   rtmp://localhost/vod/mp3:AndreHprofile (see Figure 1).

   When you click OK, a progress bar will show that the component is reading the audio file's metadata. Still, the key here is the media type. Notice it is MP3. If you do not add mp3 in the path, the audio file won't play.

   

   Figure 1. Streaming audio through the FLVPlayback 2.5 component

8. Save the file and test it. The audio plays and you can use the button in the skin to turn the audio on and off.

   Obviously there are a couple of things wrong here. The first is that there is a great big white area where "the video" should play. The second is the skin just seems to hang around. What this should tell you is that maybe adding a skin isn't such a good idea; the FLVPlayback component uses up Stage space that could be put to better use.

   Note: You can add a photo to fill the FLVPlayback screen at runtime. I would love to show you how, but that technique is way out of the scope of this article.

   So, assume the audio will be playing in the background and there is no need to turn it on or off.

9. Move the component to the pasteboard (see Figure 2) and, with the component selected, set the skin parameter to None.
10. Test the movie. The audio file still plays.

Figure 2. Using the component to play background audio

Controlling audio streaming through the FLVPlayback component

In the previous example the audio played. The problem is, this is not exactly regarded as an industry best practice. The user has to be given the opportunity to turn to audio on or off. Here's how:

1. Open the Component03.fla file in the sample download. When it opens you will see I have already added a copy of the FLVPlayback component to the pasteboard and added some text.
2. Select the Audio layer and open the Components panel.

3. Open the Video components list and drag a copy of the MuteButton component to the Stage (see Figure 3).

   

   Figure 3. Controling the audio with the MuteButton component

4. Select the FLVPlayback component on the Stage and, in the Parameters, set its source parameter to rtmp://localhost/vod/mp3:AndreHprofile
5. Save the file and test it. When you click the Mute button, the audio file turns on and off.

Now that you know how to use the component, I'll show you how to do the same thing using ActionScript 3.0.

Page 2 of 3

Previous Page

Next Page