Flash MX MP3 player, Pt.2
source: http://www.thegoldenmean.com
10 — Play the Previous Track
As you might imagine, this page is very similar to Page 9.
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 left of the playPause_pb button. Name this instance “prev_pb.”. As before, don’t worry about what it looks like. We will style it with ActionScript at the end of this page.
the Button’s Properties
Click in the first frame of the “button code” layer and insert the following:
//code for previous button
prev_pb.setClickHandler ("prevTrack");
prev_pb.setLabel ("<<previous");
prev_pb.setSize(75, 12);
As you can see, this assigns a function as yet unwritten (“prevTrack()”) to the PushButton. Now would be a good time to write that function!
the Function
Click in the first frame of the “functions” layer, scroll to the bottom and add the following code:
//the prevTrack() function is called by "prev" button
function prevTrack() {
if (songList_lb.getSelectedIndex () == 0) {
songList_lb.setSelectedIndex (songList_lb.getLength () - 1);
} else songList_lb.setSelectedIndex (songList_lb.getSelectedIndex () - 1);
};
It’s essentially identical to the code on Page 9, except that it subtracts one instead of adding one. It also checks to see if we are at the beginning of the list and if so, we jump to the end of the list.
If you test your movie at this point you will see it cycles backwards through the titles in your list every time you click the “previous” button.
Styling the Buttons
As promised, here is how to create a style which can be applied to all your buttons. I am only using a few of the parameters available. You can color the button faces, the highlight and shadows — nearly every aspect of the component’s appearance. I encourage you to study the options available to you by reading the ActionScript Reference for the PushButton component.
Click in the first frame of the “logic” layer. I don’t know if this is the most sensible place for styling instructions but since we already have the style information for the ListBox there we might as well put these instructions there as well. Scroll until you reach the end of the ListBox style code block and add the following:
//add styling to buttons var buttonStyle = new FStyleFormat(); buttonStyle.textFont = "Verdana"; buttonStyle.textSize = 10; buttonStyle.textColor = 0x333363; buttonStyle.textAlign = center; buttonStyle.addlistener(pausePlay_pb, next_pb, prev_pb);
It’s just like magic! Of course you are encouraged to use styles that will suit your own web site’s colors.
Page Eleven concludes this tutorial by adding the option to play tracks one after the other.
--top--