Craig Campbell’s School of Flash

This tutorial will be building on two previous tutorials:

• Using Sound in ActionScript 3.0
• Creating a Volume Slider

In this tutorial, we’ll look at how to add a pause button to our music player. If you haven’t yet worked through the first two tutorials, or if you haven’t downloaded the source file from the volume slider tutorial, then you can download it here. This is the file we’ll be starting with. In this file, we’ve already created the basic functionality to play and stop a sound and to control the volume with a draggable slider.

The Pause Button

Creating the code for the pause button is going to be similar to the code for the stop button, but it’s going to take a little bit of extra tweaking in order to get it to work properly. With our stop button, we simply stopped the sound from playing so that when we clicked on the play button again, we were starting the song over from the beginning. When we hit the pause button, however, we want to be able to resume the playback from the point in the song where we were when clicked the pause button. So, in order to do this, we need to store the current position of the song whenever we click on the pause button.

1. Create the pause button. Naturally, before you can start adding code for your pause button, you need to actually create it. I created mine to go along with the theme I had already developed for my play and stop buttons, and then I gave the pause button an instance name of pause_btn.

2. Create a variable called “pos.” In this variable, we’ll keep track of the current playing position of our song. As you’ll notice in the image below, I declared the pos variable just below the rest of my initial variable declarations, on line 7.

I also set the pos variable equal to a default value of zero, because–naturally–when our file first opens, we’re going to be at the very beginning of the song. This number, by the way, represents how far we are into the song in milliseconds. The reason for this is that when we use the “play()” method of the Sound class, we can enter in a number within the parentheses in order to tell Flash how far into the song (in milliseconds) we would like to start playing. Also, there is a property of the SoundChannel class called “position” which gives us the current position of the song (again–you guessed it–in milliseconds).

3. Write the code for your pause button. This code will consist of the usual event listener and corresponding function, as seen below:

In line 9, we add our event listener, which causes our “pauseMusic” function to execute when triggered. Within this function, we’re checking the “isPlaying” variable to see if the music player is currently playing music (this variable was created in a previous tutorial), and if the music IS currently playing, then 3 things need to occur:

• We need to store the current position of the song, as seen in line 15. The current position can be accessed with the “position” property of our SoundChannel object, which we’ve called “sc.” In this example, we’re storing this position in the “pos” variable that we created back in step 2.
• We need to stop the sound (line 16). The code for doing this is nothing new. It’s the same code we used for the stop button.
• We need to change the “isPlaying” variable to false. Since the music will no longer be playing once we hit the pause button, the “isPlaying” variable needs to reflect that.

4. Update the code within the “playMusic” function. We already created this function in the first tutorial of this series, but we need to add one more thing to it.

Before we altered the code, the parentheses for the “music.play()” method were empty. If we were to leave it empty, then Flash would assume that there was a zero in the parentheses, which would cause the song to play from the beginning. But if we’ve only hit the pause button, then we don’t want to start over from the beginning when we hit play again. We want to start from where we were when we hit pause. In order to do this, we simply put the desired position, which is stored in the “pos” variable, in the parentheses.

5. Update the code within the “stopMusic” function. Because the “music.play()” method is now using the “pos” variable to point to a specific position within the music file (instead of pointing to the default of zero), we now need to update the stopMusic function so that when we hit the stop button, the “pos” variable is reset to zero.

Now, when we hit the play button after hitting the stop button, the music will once again start from the beginning.And that about wraps it up for our music player tutorials. I hope you’ve learned a lot from these. Be sure to keep me updated with the types of tutorials you’d like to see on the site, and if you haven’t subscribed to the site yet, you can do so from the subscription options in the left column of the website.

Source file: pause.zip

Tags: actionscript 3, Flash CS3, music player, pause button, tutorial

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.