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 << Animating the waveform

Part 2: Planning our controls

What do we want to end up with? For the "Western Australia: Land and People" exhibition we needed a movie control that we could just drag and drop on any file that had audio in it (we had over 80 files to add controls to, so it had to be quick and simple). This means that everything has to be put in to a single movie so that we can just drag and drop the controls onto our sound. So first up:

We needed a movie clip to contain our controls. We called this movie "media-controls".

Within that we needed Play/Pause and Rewind buttons, giving:

Play button, "play".
Pause button, "pause".
Rewind button, "rew".

A slider would be nice, for selecting a point to play from:

We wanted a movie clip to contain the slider, "progress-bar".

And the slider should have a Drag button for positioning the playhead:

Drag button, "dragger".

The slider should probably also contain a preload or streaming indicator to give some feedback on how much of the sound has been loaded so far:

Movie clip to indicate preload, "frames-loaded".

This image shows the slider (on the left) with the dragger and a light grey preload indicator. On the right are the rew, play, and pause buttons. All these elements will be contained in a single movie clip ready for us to drop on to a sound.

That'll do for now. We're going to build and test the controls in test.fla and then, when it all works, we'll rip out the control movie and dump it into a media-controller.fla where we will make it available as a shared resource. That way, we'll be able to use it anywhere.

All right, easy bits first.

Getting the sound to play, pause and rewind

First, we'll get the container movie out of the way. Create a layer in test.fla for our controls. I put the layer at the bottom and named it "controller". Select the "Insert > New Symbol..." command (Ctrl+F8) and name it "media-controls", giving it a Behaviour of Movie Clip.

Select the controller layer you created and drag the media-controls movie clip on to the stage just under your waveform image. All right, you may put it wherever you want. It doesn't make much difference for now.

Open your media-controls movie and create three buttons: "play", "pause", and "rew". We gave them some standard-looking icons and some clicky sounds for mouse-overs and presses. And I'm not going into details about how to make buttons. That stuff is in your help files - just don't use components. They are rather large (too many bytes) and tend to load in the first frame.

Put your buttons on layers named "play", "pause", and "rew", and align them with your sample waveform as you like! This is what I did:

I have placed the buttons on the right to leave room for the slider that we will add later.

Now for the button code. Because our sound is streaming on the timeline of our parent movie, all we have to do to control our sound is to control our parent movie as we would for any other movie.

Paste this code on the Rewind button:

on (release) {  //rew
        _parent.gotoAndStop(1);
}

Paste this code on the Pause button:

on (release) {  //pause
        _parent.stop();
}

Paste this code on the Play button:

on (release) {  //play
        _parent.play();
}

All of this is standard movie clip control code.

Test your movie (Ctrl+Enter). The sound should play and animate the waveform as it goes along. And the three buttons should operate as expected. This will give you the basic functionality, but we can do better than this. Let's make the Play/Pause buttons seem like one button that toggles between play and pause states, and get the Rewind button to rewind-and-play (if the sound is currently playing) or rewind-and-stop (if the sound is paused).

What we will do is hide the Play button (set its _visible property to false) if the sound is playing or show the Play button (set its _visible property to true) if the sound is paused. If we align the Play and Pause buttons so that the Play covers the Pause, we will get our toggling effect!

Because we will be accessing the Play button's _visible property, we need to give our Play button an Instance Name. Select the Play button on the stage and look at your Properties panel. You will see a text box with "<Instance Name>" greyed out. Click on the grey text and type in the name for the button that you want to use in your code to access the button's properties and methods. We named it "playBTN".

Make the changes to the code for our three buttons.

Paste this code on the Rewind button:

on (release) {  //rew
        if (playBTN._visible) {  //paused
                _parent.gotoAndStop(1);
        } else {  //playing
                _parent.gotoAndPlay(1);
        }
}

Paste this code on the Pause button:

on (release) {  //pause
        _parent.stop();
        playBTN._visible = true;
}

Paste this code on the Play button:

on (release) {  //play
        _parent.play();
        playBTN._visible = false;
}

Then realign the buttons by dragging the Play button over the Pause button.

Now test it. Working? Really? Here's the problem: the parent movie (our sound) starts out playing, but the Play/Pause button defaults to a state that is appropriate for a paused parent movie.

We have two options: (1) only add code to stop the parent movie and just leave the rest as it is, or (2) put the Pause button above the Play button in the layers and recode to show and hide the Pause button. I chose the first option, added an actions layer and put a stop command in frame 1 to stop the parent movie from playing. Like this:

Test it now! And save.

Next >> Adding a load indicator