| How to Create Previous and Next Buttons for Sound Objects | Return to Index | Do you want all FLA's used for this tutorial? | Do you have a question? |
For whatever reason, I'm asked this question a lot. The player shown will load five external sounds using the loadSound method. The sounds will be set to streaming. The code will take advantage of the fact that the external sounds are named sequentially (kenny1.mp3, kenny2.mp3, etc). Frankly, if you have much more than five songs, you really should create an array, or even better - an XML driven array. However, I felt that the way it is documented below would be more easily understood. Here is the player.
| Fig. 24: Previous and next buttons for sound objects |
The main buttons of interest in this tutorial are the previous and next song buttons. Basically, the next-song button increments a variable called "nextSound", which can have a value from 1 to the number of potential songs (5 in this case). Then, it stops any sound that is playing, and it loads the corresponding song that equals the value of nextSound. If you press the next-song button enough times, the value of nextSound will eventually exceed the number of songs, so there is a line of code that keeps an eye on this, and if it goes above or below the correct range, it is immediately corrected back to 1 or 5.
For the main buttons, none of the code is actually on the buttons. Instead, the code is placed on a movie clip, using its clip events to update the selections. The drop-down song list is dynamic text, that is updated in the same movie's clip events.
Begin by defining your sound objects in frame 1 of a layer named "Sound Objects" (the name is only important for organizational reasons). Lock the layer, and paste the following into frame 1 of your new sound object's layer.
| // Sound Objects mySound1 = new Sound(); mySound2 = new Sound(); mySound3 = new Sound(); mySound4 = new Sound(); mySound5 = new Sound(); |
To create the button code, press CTRL-F8 to insert a new movie, and name the movie "emptyMc". Drag an instance of emptyMc out of the library, and place it just outside of the stage (or anywhere you want). Click the movie, and give it the instance name of "buttonMc". Paste the following code into the Action pane (press F9 to see Action pane) of buttonMc.
| onClipEvent (load) { nextSound = 1; } // onClipEvent (enterFrame) { // Use the following if you want this information to display in dynamic text boxes. _root.mySoundDurationText = _root["mySound"+nextSound].duration/1000; _root.mySoundPositionText = _root["mySound"+nextSound].position/1000; // Set variables for your sounds duration and position. However, for this player, only the position is used. mySoundDuration = _root["mySound"+nextSound].duration/1000; mySoundPosition = _root["mySound"+nextSound].position/1000; if (mySoundPosition == null) { mySoundPosition = 0; } // Text for dynamic song names _root.songListMenu.myText1.mySound1Text = "This is the title of Song 1"; _root.songListMenu.myText2.mySound2Text = "This is the title of Song 2"; _root.songListMenu.myText3.mySound3Text = "This is the title of Song 3"; _root.songListMenu.myText4.mySound4Text = "This is the title of Song 4"; _root.songListMenu.myText5.mySound5Text = "This is the title of Song 5"; // -------------------BUTTON PRESS // -----nextSongButton _root.nextSongButton.onPress = function() { nextSound++; if (nextSound>5) { nextSound = 1; } stopAllSounds(); mySoundPosition = 0; mySoundPaused = 0; songName = ["kenny"+nextSound+".mp3"]; _root["mySound"+nextSound].loadSound(songName, true); }; _root.nextSongButton.onRollOver = function() { _root.menuText.nextText = "Next Song"; }; _root.nextSongButton.onRollOut = function() { _root.menuText.nextText = ""; }; // // -----prevSongButton _root.prevSongButton.onPress = function() { nextSound--; if (nextSound<1) { nextSound = 5; } stopAllSounds(); mySoundPaused = 0; _root["mySound"+nextSound].start(); }; _root.prevSongButton.onRollOver = function() { _root.menuText.prevText = "Prev Song"; }; _root.prevSongButton.onRollOut = function() { _root.menuText.prevText = ""; }; // -----playButton _root.playButton.onPress = function() { stopAllSounds(); songName = ["kenny"+nextSound+".mp3"]; if (mySoundPaused != 1) { _root["mySound"+nextSound].loadSound(songName, true); } _root["mySound"+nextSound].start(mySoundPosition, 0); mySoundPaused = 0; }; // -----stopButton _root.stopButton.onPress = function() { _root["mySound"+nextSound].stop(); mySoundPaused = 0; }; // -----pauseButton _root.pauseButton.onPress = function() { mySoundPaused = 1; _root["mySound"+nextSound].stop(); }; } // END |
The above code uses the instance names of the buttons on stage to access methods for each button. The next-song button is on the _root level with the instance name of "nextSongButton". Similarly, the previous-song button is called "prevSongButton". The other buttons have instance names of "stopButton", "playButton" and "pauseButton".
The line, if (mySoundPaused != 1), asks whether the sound is paused. More correctly, it checks whether the variable that is set to true when the pause button is pressed is true or not. If not, it loads the sound. If it is, it starts the sound in the sound object's last know position, which is being tracked by the line, "mySoundPosition = _root["mySound"+nextSound].position/1000;". Remember that all of the sound objects are defined on the _root level with the names mySound1, mySound2, mySound3, etc. This line adds the value of the variable "nextSound" to "mySound". Therefore, if nextSound equals 3, for example, then the position for _root.mySound3 will be tracked. When the next or previous button is pressed, this updates accordingly.
When the buttons within the song list menu are pressed, the value of nextSound is updated to reflect the value of the sound that was selected.
This is just one way to do it. There are many ways this could be done.
This document copyright © 2004 by Kenny Bellew of Cowfly.Com Design, kennybellew@hotmail.com