Flash MX 2004 MP3 Player Pg.9
source: http://www.thegoldenmean.com/
9 — Script the User Interface
ActionScript - Button and general UI Code
All the funcitons from the previous two pages won’t do anything useful if you can’t invoke them. We have made all the graphic elements for a User Interface, so now we need to hook up the controls with the functions. All code for all UI controls is right here on the main timeline making it very easy to spot and work with.
Volume Control
Code for the volume control does two important things: it makes the slider draggable and it modifies the volume variable based on the position of that slider. Notice how no hard coded values are used. This is one of the ways we make the ActionScript gracefully accept graphics of different dimensions. If your volume track is 75 pixels long or 150 pixels the code will adapt and adjust. Note the use of the onMouseMove method of the MovieClip Object. I use this instead of onTnterFrame because the former supports the updateAfterEvent() method for a smoother appearance because it forces the screen to redraw immediately.
marker.onPress = function ():Void {
this.startDrag(false, 0, this._y, controls_mc.volume_mc.track_mc._width, this._y);
this.onMouseMove = function():Void {
volume = Math.floor(this._x/volTrackFactor);
myTunes.setVolume(volume);
updateAfterEvent();
}
}
Now we shut off that behavior when the user stops interacting with the volume control:
marker.onRelease = marker.onReleaseOutside = function():Void {
this.stopDrag();
delete this.onMouseMove;
}
“Scrubber”
Here comes what is sometimes referred to as a “scrubber”. It’s not really a scrubber because a real scrubber makes sound as you drag it. This is more of a “nonlinear rewind/fast forward”, but it’s still cool.
When the user presses the pBar clip the Sound Object stops playing and the pBar clip can be dragged as far as the dBar has progressed if the track hasn’t completely downloaded (this is an important point because “streaming” as Flash uses the term really just means the track starts to play before it has fully downloaded; you can’t access any portion of the MP3 data that hasn’t downloaded yet, so we have to be careful to limit the pBar to not go beyond hte dBar.). When the user releases the pBar clip the pauseTime variable is updated and the song continues from that point. It is a very fast and intuitive way to move to different portionsof the currently playing track.
The function begins in much the same way the pause function does: when the pBar symbol is pressed the function stops the Player, turns any lit buttons off and stops any running setIntervals. It hen becomes draggable but only horizontally and only as far as the _x position of the dBar. As it is dragged its _x position is used to calculate a new value for the pauseTime variable.
pBar.onPress = function():Void {
myTunes.stop();
extinguish(controls_mc.play_mc);
clearInterval(playingID);
clearInterval(streamingID);
clearInterval(crawlerID);
this.startDrag(false, 0, this._y, dBar._x, this._y);
this.onMouseMove = function():Void {
pauseTime = Math.floor(((pBar._x/pBar._width)*times[ct].nodeValue)/1000);
updateAfterEvent();
}
}
As with the volume slider, we have to shut off the drag behavior when the user finishes interacting with it. In addition we need to switch the play button’s state to “lit” and invoke the playTrack() function which then takes over in exactly the same way it does when the play button button is clicked after the Player has been paused.
pBar.onRelease = pBar.onReleaseOutside = function():Void {
this.stopDrag();
delete this.onMouseMove;
controls_mc.play_mc.gotoAndStop("lit");
playTrack();
}
Buttons
the next series of functions should be pretty easy to follow. When clicked, the buttons call functions previously declared. The stop, pause and play buttons only require one function to work because they get simply clicked:
controls_mc.stop_mc.onRelease = function () {
extinguish(this);
this.gotoAndStop("lit");
stopTrack();
}
controls_mc.pause_mc.onRelease = function () {
extinguish(this);
this.gotoAndStop("lit");
pauseTrack();
}
controls_mc.play_mc.onRelease = function () {
extinguish(this);
this.gotoAndStop("lit");
playTrack();
}
The previous and next track buttons require three functions apiece: they light up when rolled over, turn off when rolled off and invoke a funciton when clicked. Each of those events needs a separate function
controls_mc.prev_mc.onRelease = function () {
extinguish(this);
prevTrack();
}
controls_mc.prev_mc.onRollOver = function() {
this.gotoAndStop("lit");
}
controls_mc.prev_mc.onRollOut = function() {
this.gotoAndStop("unlit");
}
controls_mc.next_mc.onRelease = function () {
extinguish(this);
nextTrack();
}
controls_mc.next_mc.onRollOver = function() {
this.gotoAndStop("lit");
}
controls_mc.next_mc.onRollOut = function() {
this.gotoAndStop("unlit");
}
Shuffle “radio button”
A radio button or check box has two states: on or off, true or false, active or inactive. But how does it know what state it is currently in? The trick with the shuffle clip is that it has to be aware of its current state before it can change it. shuffle_mc invokes a switch statement which evaluates the current frame of the clip. If it’s frame one (“unlit”), we assume the user wants to switch to shuffle mode and the value of the variable shuffle is modified and vice versa. The symbol is two frames long so every time it gets clicked it moves the playhead to whatever frame it wasn’t previously on. Siimple.
shuffle_mc.onRelease = function():Void {
switch(this._currentframe) {
case 1:
shuffle = true;
this.play();
break;
case 2:
shuffle = false;
this.play();
break;
}
}
The Player is very nearly complete now. All that remains is to create the XPathDocument Object and load the XML playlist that gets the ball rolling. This we will do on page ten. In addition, the optional setup panel will be attached.
--top--