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 << Dragger states

Limiting the dragger

It's time to start working on the dragger. Our dragger will ultimately control what frame of our sound the playhead is on.

We will need to limit its movement to horizontal movement so it can't move up and down, and additionally limit its horizontal movement to only what has been downloaded so far (that will be defined by the current width of our progressBar).

Nothing fancy here, just making use of the various dragger methods in Flash. Here is the code to add to the functions layer:

function startDragger() {
        gotoAndStop("moveMedia");
        var leftLimit = progressBar._x;
        var rightLimit = progressBar._width + progressBar._x;
        startDrag("draggerBTN", false, leftLimit, progressBar._y, rightLimit, progressBar._y);
}

function stopDragger() {
        gotoAndStop("mediaPlaying");
        stopDrag();
}

When the visitor starts dragging, we move to the frame labelled moveMedia so that our mover movie clip stops trying to update the slider. When the visitor stops dragging, we go back to the mediaPlaying frame label so that our mover movie clip starts updating the slider again as the sound plays.

This code needs to be placed on your draggerBTN:

on (press) {
        startDragger();
}

on (release, releaseOutside) {
        stopDragger();
}

Time to test it (Ctrl+Enter). Your dragger should now drag okay, but it won't be affecting anything because we haven't written any ActionScript for this yet. And when you release the dragger, it will snap back to the position that is appropriate for the position of the sound playhead because we haven't been changing the playhead position when you were dragging the slider.

Test the streaming (Ctrl+Enter again). You should only be able to drag within the bit that has been loaded.

One more bit to code and we've finished with our slider.

Setting the sound's playhead position

The mover movie clip on the movieMover layer controls two things: (1) it moves the dragger to a position that is appropriate for where the sound playhead is, and (2) it moves the sound playhead to a frame that is appropriate for where the dragger is dragged to.

We've got bit 1 working: time to work on bit 2.

This is the code to move the sound playhead:

function setMediaFrame() {
        var targetFrame = int(draggerBTN._x / 170 * _parent._parent._totalframes) + 1;
        _parent._parent.gotoAndStop(targetFrame);
        _parent.playBTN._visible = true;
}

We take the _x position of the dragger, work out its fraction along our slider, and convert that to a portion of our sound's total frames. This will give values from zero to less than the _totalframes property, so we add one because we need targetFrame to start at 1 just like the timeline does. And because we have stopped playing the sound (because we used gotoAndStop), we need to make our Play button visible.

This code needs to go on the mover movie clip in frame 2 to call the setDraggerPosition function:

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

Test it now. We're all done here with the major development! Save it and go get a beer. Get one for me too while you're up. Guinness, if you've got one. Thanks!

Next >> Making the media controls ready for sharing