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 2: Planning our controls / Getting the sound to play, pause and rewind

Adding a load indicator

We could use a preloader for this, but that wouldn't make the best use of Flash's streaming capabilities. What we are going to do is show how much has loaded and then let the visitor play any part that Flash has cached. We thought this would be best achieved with a slider. So let's make one.

Our first task is to create a progress bar movie clip to contain our slider.

Create a layer in the media-controls movie clip in test.fla for our slider. I put the layer between the actions and rew layers and named it "slider". Select the "Insert > New Symbol..." command (Ctrl+F8) and name it "progress-bar", giving it a Behaviour of Movie Clip.

Select the slider layer you created and drag the progress-bar movie clip on to the stage to the left of the buttons we have completed (or put it anywhere else you feel is appropriate).

Open the progress-bar movie clip and now draw the background rectangle that will form the basis for our slider. I made mine with a black fill and border. My dimensions for the rectangle were 171 wide and 4 high. Rename "Layer 1" to "base" ('cos it's the base of our slider). You should have this (the stage is zoomed in a bit):

Now for the highlight that will grow within this base as more and more of the audio file is loaded.

Create a layer above the base layer and name it "highlight". On the highlight layer, draw a rectangle (any colour you like), select and delete the rectangle's border, and align it with the start of the base layer's rectangle. Like this:

To be able to change the size of this in code, it needs to be a movie clip, and it needs to have an Instance Name.

Select your grey (or whatever colour you chose) rectangle and use the "Insert > Convert to Symbol..." command (F8). Name it "frames-loaded" and give it a Behaviour of Movie Clip.

Make sure that your new frames-loaded movie clip is selected. In the Properties panel, set the <Instance Name> to "progressBar".

Time for a slight diversion.

The code for the slider will get a little tricky. To minimise confusion and to make code maintenance easier, we are going to keep as much of our code in one place as we can. That place will be a functions layer that will contain our ActionScript code. So create a new layer at the top of the timeline and name it "functions".

Out of habit, we usually have some standard layers in all of our FLA files:

Layer name	What we use it for
labels	Contains a whole bunch of labelled keyframes and nothing else. This makes it easy to see where our labels are and what they are called.
actions	ActionScript that needs to be executed as the movie is playing. We don't put any functions in this layer, just code that needs to be executed on a keyframe.
functions	This is for ActionScript functions that we call from the actions layer or in event handlers on movie clips or buttons. When we have the majority of code in one place, it makes debugging much easier because it is easy to find the code.

That's it. Diversion over. Back to our progressBar code.

Our first function will set the size of the progress bar according to the sound download progress. This code needs to go into your newly created "functions" layer:

function setProgressBar() {
        var parentLoaded = 170 * _parent._parent._framesloaded / _parent._parent._totalframes;
        progressBar._width = parentLoaded;
}

We are setting the _width of the progressBar movie clip to a fraction of the width of our rectangle on the base layer. I made the rectangle 171 wide and indented the progressBar movie clip by 0.5 from the left, so I want the same distance in from the right, giving 171 - 0.5 - 0.5 = 170. The fraction of 170 that we want is given by the usual _framesloaded / _totalframes. No new stuff here! The only tricky thing is that we have to go up far enough so that _framesloaded and _totalframes will refer to the Flash movie that has the sound streaming on the timeline.

The following table shows what code accesses which movie clip:

Variable	Movie clip
_framesloaded	progress-bar
_parent._framesloaded	media-controls
_parent._parent._framesloaded	Main timeline

And now back to the progressBar movie clip. This is the code that needs to go on it to call the setProgressBar function:

onClipEvent (enterFrame) {
        _parent.setProgressBar();
}

Test this (Ctrl+Enter) with streaming (Ctrl+Enter again). As Flash simulates the download, you should see the grey bar in the black slider background growing until all of your sound has loaded.

Save now.

Next >> Adding a thumb dragger to the slider