Flash MX MP3 player, Pt.2

source: http://www.thegoldenmean.com

9 — Play the Next Track

The user can always click the next title in the ListBox, but it’s not too hard to make a button which will do that, so let’s.

The Button

Make sure the “UI controls” layer is selected. As we did in the previous page, drag another instance of the PushButton component out of the Components palette onto your movie, to the right of the playPause_pb button. Name this instance “next_pb.”. As before, don’t worry about what it looks like. We will style it with ActionScript on the next page.

the Button’s Properties

Click in the first frame of the “button code” layer and insert the following:

//code for next button
next_pb.setClickHandler ("nextTrack");
next_pb.setLabel ("next>>");
next_pb.setSize(75, 12);

As you can see, this assigns a function as yet unwritten (“nextTrack()”) to the PushButton’s click handler. We better write that function!

the Function

Click in the first frame of the “functions” layer, scroll to the bottom and add the following code:

//nextTrack() is called by the "next" button
function nextTrack() {
   if (songList_lb.getSelectedIndex () == songList_lb.getLength () - 1) {
      songList_lb.setSelectedIndex (0);
   } else songList_lb.setSelectedIndex (songList_lb.getSelectedIndex () + 1);

Here we exploit three “getter/setter”methods of the ListBox component. “getSelectedIndex()” will return the index number of the currently selected track, while “setSelectedIndex()” will change the selection in the ListBox to the value supplied as an argument in the method. Since we want to play the next track, we simply set the index to one more than it currently is. But what if we are already at the last item? We first check to see if the current selection is equal to the total (using “getLength()”) and, if it is, set it to zero — the first item in the list. (Like arrays, the ListBox component uses a zero–based indexing system.)

If you test your movie at this point you will see it cycles through the titles in your list every time you click the next button.

Page Ten deals with the “previous track” button.

go to page: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
divider ornament