Flash MX MP3 player, Pt.2
source: http://www.thegoldenmean.com
11 — Play Mode
We have come a long way. The final enhancement is a mechanism to enable playing tracks consecutively — when one ends, the next begins automatically. I don’t want that to be the default behavior, but I do want the visitor to have that available as an option. We already have a nextTrack() function in place. All we need now is a “switch” to turn the continuous play mode on or off. The simplist, most unobtrusive means to this end is the CheckBox component. When checked we’re in continuous play mode. When unchecked we’re in single track mode.
The CheckBox
Back to the Components palette one more time. After clicking to select the “UI controls” layer, drag an instance of the CheckBox component onto your movie. You will probably find you need to do some juggling of the controls already in place to make room for the CheckBox and its label. As with the PushButton components, don’t worry about what the default label or font is. We will assign those with ActionScript. Name this instance something descriptive like “continuous_ch”. (The suffix “_ch” triggers MX’s code hinting.)
Set the CheckBox’s Properties
Click in the first frame of the “button code” layer, scroll to the bottom and insert the following:
//code for checkbox
continuous_ch.setLabel("continuous");
continuous_ch.setValue(false);
continuous_ch.setChangeHandler("playMode");
This defines the label, sets the default value to false (or unchecked) and assigns a callback function as yet unwritten (“playMode()”) to the CheckBox.
Styling the CheckBox
This is simply a matter of adding continuous_ch as a listener to the format Object. In the “logic” layer, modify the buttonStyle formatting code as shown:
buttonStyle.addlistener(pausePlay_pb, next_pb, prev_pb, continuous_ch);
Global Variable
The “logic” layer seems the appropriate place to hold this variable so, while you are still editing the code in tthat layer, scroll up to almost the top. Add the following just after you declare the _global.mainTL Object:
//variable "continuous" determines play mode: //either stop at the end of a track or play consecutively. //initialized as false (single play mode) mainTL.continuous = false;
Now we have a variable which can be called even inside functions becuase its scope is global. Its value will be a boolean: either true or false. We’ll see shortly how this will be useful.
the Functions
Click in the first frame of the “functions” layer, scroll to the bottom and add the following code, which you should recognize as the callback function the CheckBox references when it is changed (by checking or unchecking the box):
//function playMode() - called by CheckBox's change handler
//it modifies the global variable "continuous"
//if continuous is true, doPlay() calls the nextTrack() function
function playMode() {
mainTL.continuous = continuous_ch.getValue();
}The CheckBox can have one of two values: true or false. When changed, it updates the value of mainTL.continuous. We’re about to make a modification to the doPlay() function where this value will be checked.
Scroll down of necessary so you can see all of the doPlay() code. Previously we wrote the function so that the onSoundComplete event handler clears the display fields and deletes the current myTunes Object in preparation for whatever title the user might select next. The modification we are about to make wil cause doPlay() to check the value of mainTL.continuous when one track reaches its end. If mainTL.continuous is false, the function will end as it did previously. If mainTL.continuous is true, doPlay() will call nextTrack() which we already have in place.
We accomplish this by replacing the last part of doPlay() with the following:
//what to do when tune ends
//clean up stuff from previous song
myTunes.onSoundComplete = function () {
//if single track mode
if (!mainTL.continuous) {
//clean up from previous song
//clear the text fields
displayDuration_txt.text = "";
displayPosition_txt.text = "";
//delete existing Sound object
myTunes.stop ();
delete myTunes;
//stop the setIntervals
clearInterval (streamingID);
clearInterval (playingID);
} else if (mainTL.continuous) {
//if set to continuous mode, call the nextTrack() function
nextTrack ();
}
};
}Conclusion
A demo .fla of the mp3player can be downloaded here. It’s done! You have a pretty simple, flexible, robust little widget for your website and a potential showcase if you are a musician. Along the way we covered some interesting topics regarding using the Sound class and some data driven components which I hope you will find applicable to other projects. Keep in mind that I paid only a passing nod to what the thing looks like. Now that you know how to make it work, I’m expecting your imagination will soar from here on and you will produce music playing modules that are as stunning to the eye as they are to the ear!
Project files updated to MX 2004 syntax and components may be downloaded here.
If you hunger for more, page 12 of this tutorial outlines some frequently requested modifications. If you are still hungry, version two of the Player adds some powerful enhancements.
--top--