gmg tutorials - reusable streaming flash audio control

Flash MX Audio Player

An in depth look at building a reusable streaming audio preloader for Flash MX that includes media controls.

01 Introduction
02 What should the media player do? / How should the player be structured? / Useful reading
03 Part 1: Start with some easy audio
04 Putting the sound on the stage / Adding a sample graphic
05 Animating the waveform
06 Part 2: Planning our controls / Getting the sound to play, pause and rewind
07 Adding a load indicator
08 Adding a thumb dragger to the slider
09 Dragger states
10 Limiting the dragger / Setting the sound's playhead position
11 Making the media controls ready for sharing
12 Part 3: Using the media player
13 Anything else? / Conclusion / About the authors / Copyright

Previous << Part 1: Start with some easy audio

Putting the sound on the stage

Ahh, that's better. Good coffee.

To get sound to play correctly for this tutorial we need to add sound to a layer and set it up to stream. This means that the whole sound does not need to download before it starts to play.

Select the media layer. At the bottom of your Flash MX application you will see your Properties window. Drop down the Sound combo and you should see the sound file you have imported. Select your sound and make sure that the Sync combo is set to Stream. This means that your sound will be downloaded and played frame by frame. Don't worry. The sound comes out sounding nice and smooth, it's just that you don't have to wait for the whole sound to download before you can start listening to it. You also have the added bonus of being able to jump to any frame (or position) in the sound by using a gotoAndPlay command.

Right now, though, your media layer will probably have only one frame. This is bad when we are trying to stream the sound. We need enough frames to play all of it. Right-click on the media layer timeline somewhere to the right of frame 1. Select Insert Frame. You should see your sound wave drawn in the frames that you have created. Keep inserting frames until you can see all of your sound.

Delete any extra frames that have no sound in them so that we don't end up with silent frames at the end of the sound.

Now if you click and drag the playhead (pinky-red rectangle in the timeline) you should hear the sound you imported. It will sound jerky here.

Test your movie (Ctrl+Enter) to hear your sound correctly.

Adding a sample graphic

It's great to hear a sound, but we're going to add an image of the waveform for people to look at while the sound plays. This gives a visual indication of what the audio will sound like. We will look at a simple method for generating a waveform and add it to our sounds.

This section is not critical to developing the audio controllers, so feel free to skip it if you are not really interested. You can animate anything you like over the duration of the sound. Feel free to experiment!

In the Library, when you have your sound selected, the wave form for the sound is shown. My sound is stereo; yours may be mono (you may only see one wave). If you make sure that your stage is shown at 100%, you can resize the Library window (and the area that the waveform is shown in) to a size that you would like to show the wave at.

Do a Print Screen to copy the screen to the clipboard. Start your favourite paint program. Paste in the image of the screen. Crop the waveform to an appropriate size. Adjust the colours of your wave so that it is a black wave on a white background. Save your waveform image as a GIF with white as your background transparent colour (so that we can easily tint the waveform later). I saved it as sample.gif.

This is what I ended up with for my audio file:

Import your GIF into the Library ("File > Import to Library..."). Don't do the Ctrl+R thing this time. We don't want the image on the stage yet.

Now create two new layers above the media layer. Name them "sample grey" and "sample black". You should now have this in your timeline:

What we are going to do here is have a greyed-out waveform of our sample which will slowly turn black as the sample plays.

Select the sample grey layer and drag your GIF bitmap on to the stage. Put it roughly in the centre. Done that? Good. In order to tint the GIF, we first need to convert it to a graphic. So, with the GIF bitmap selected on the stage, do an "Insert > Convert to Symbol..." command (F8), name it "sample" and give it a Graphic behaviour. Like this:

Down in your Properties panel you should now see a Color combo box. Set this to Tint and pick a colour and a percent to tint. I chose grey at 100%. (I did name the layer "sample grey", but you may choose anything you like!)

With your sample symbol still selected (sorry for the alliteration), do an "Edit > Copy" command (Ctrl+C), select the "sample black" layer, and do an "Edit > Paste in Place" command (Ctrl+Shift+V). This will put a copy of the waveform sample symbol in the same position that we had in the "sample grey" layer. Set the Color of the newly pasted sample to a black Tint (or set the Color to None, which is what I did).

We need these GIF bitmaps to line up so that when we reveal the black sample using a mask, we don't get the waveform wobbling. Doing a Paste in Place solves this nicely, but you could also do it with your Align panel.

Next >> Animating the waveform