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.

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!

So far we have a good set of controls in a movie, but they're not going to be easy to reuse as they are. If you've done any of our other tutorials, you will know that our next step will be to share the resources for use in other files.

Using the "File > Save As..." command (Ctrl+Shift+S), save the test.fla file as media-controller.fla. This will be the file that we will get media controls from after we have finished this section.

You should now have two Flash MX files:

From now on we are only working on the media-controller.fla file

Go back to your main timeline: the one with the sound and waveform graphics on it. Now delete all of the layers except the controller layer. Really. Do it. And delete all additional frames on the controller layer, leaving only frame 1.

And save it. We don't need those bits any longer. They were just for development. It's difficult to build media controllers without any media to control!

And we need to dump all of that media from the Library as well. So open the Library (F11) and let's get started. I deleted the sound resource, the sample GIF and the graphic we made from the GIF. That left all this stuff:

So I tidied it up a bit:

The next bit of preparation involves exporting our resources for runtime sharing (look it up in the online help, or check out our other tutorials). Right-click on the media-controls movie clip and select "Linkage..."

The Linkage Properties dialog opens. Fill it out like this:

Do the same to all resources in the Library. You will find that once you have set up one resource for runtime sharing, when you go to do the others, all of the fields will be filled in automatically. The Identifier text box will change to the name of each resource you export.

Save the file.

Do a quick test (Ctrl+Enter). This will create the media-controller.swf file for us. Have a look at the size of the media-controller.swf file: mine came out to 2,836 bytes! Not bad! And our site visitors will only have to download this sucker once.

Next up, I will demonstrate how to use the controls.