Toggling Sound (AS3)

WE TOOK A quick look at ActionScripted audio in Chapter 8, but that was only an hors d’oeuvre. In that exercise, you loaded sounds from the Library. By loading your audio from external files instead, you can reduce the overall size of your SWF and still have all the programmatic control described earlier. 10 to 1, you’ll find that sound is a common part of your day-to-day Flash workflow, so let’s explore a bit more.

 

images

1 One of the most commonly requested audio features in a Flash movie is a mute button, something that gives the user the option to temporarily pause the audio, or silence it while it keeps playing. We’ll build up to that in just a moment but, first, you need some ActionScript that summons an MP3 file. In AS3, that means an instance of the Sound class and the URLRequest class. The first two lines create respective instances of the Sound and URLRequest classes and store those objects in variables. As the URLRequest instance is created, note that it receives the name of an MP3 file outside the FLA file. After that, the Sound.load() method is invoked on the audio variable, which loads the file, and finally, the Sound.play() method plays the music.

images

2 That gets the sound rolling, but it doesn’t give you the control to make it stop again. For that, you need an additional object – an instance of the SoundChannel class. Note how the instance is created and stored in a variable, just like the other two, but its value (a particular playing sound) is added in the last line of code.

images

3 Now that the playing sound is associated with a channel, you can invoke the SoundChannel.stop() method on the channel variable, like this: In this code, a button symbol has been given the instance name btnMute, and its MouseEvent.CLICK handler halts the playing sound.

images

4 But that’s only half the story, isn’t it? To do this right, you’ll want the user to be able to turn the sound off, and then back on, at will. You can do that with two buttons or a single button. Let’s start with two, because it’s easier. To restart halted audio, just re-associate the Sound instance with its SoundChannel instance, as before (this assumes a second button with the instance name btnRestart). Note that the restart button stops the audio, just like the mute button, before it restarts the audio. That extra line is there in case the user clicks the restart button first.

images

5 If you want to resume the audio, rather than restart it from the beginning, use the SoundChannel. position property to find out how far the audio has played when you halt it, and add an optional parameter to the Sound. play() method. Create a new variable to hold this information, such as offset.

 

image

Hot Tip

Variable names are arbitrary, so what you’re seeing here – audio, channel, offset – could just as easily be rock, paper, scissors ... but it’s a good idea to name your variables in a descriptive way, so you recognize them for what they are later on.

images

images

images

6 Let’s face it, two separate buttons are fine, but a single toggle button is definitely more cool. You can combine the previous MouseEvent.CLICK handlers into a single function when you reduce your pair of buttons to a single symbol. Because button symbols don’t have programmable timelines, you’ll have to make this combined symbol a movie clip. Frame 1 of this movie clip should display whatever graphic makes sense in your case. If audio plays by default, as we’ve been doing, you’ll want the symbol’s first frame to show a “mute this audio” graphic, to indicate to the user that clicking the button will stop the audio. If that’s your route, then put a “resume this audio” graphic in frame 2 of the same movie clip. Make sure to give your movie clip an instance name, such as btnToggle, invoke the MovieClip.stop() method on it right from the beginning, and then update your code as shown in the figure.

Note the addition of a buttonMode setting of true, because this symbol isn’t a button symbol. Without that line, the mouse cursor wouldn’t become a pointer finger. The trick to this approach is pretty simple. An if statement checks the current position of the btnToggle symbol’s timeline. If the playhead is on frame 1, it means the “mute this audio” graphic is showing and the audio is already playing. Under that circumstance, the code you’ve already seen is repeated, and btnToggle itself is instructed to display frame 2 of its own timeline. Otherwise, the opposite is true, and the function restarts the audio and repositions the symbol’s playhead at frame 1. If your audio does not play by default, you’ll reverse the ActionScript inside the if statement. This code allows the same symbol to perform double duty, by shuttling it back and forth between two frames.

images

7 When you’re using the single button approach, make sure to write an event handler to set the button to its default state when the audio ends! This will be an event handler for a SoundChannel event.

This event handler has to be reassigned every time the SoundChannel instance is re-associated with a playing sound, so you’ll find it convenient in this case to use a named function, as discussed on page 237, for the Event.SOUND_COMPLETE event otherwise, you’d have to write out that particular function twice.

images

8 Another way to pause and resume audio is simply to update the volume while the audio keeps playing, in which case you’re not really pausing at all, but muting. For this, you’ll need one more object, an instance of the SoundTransform class. This gets a tad more complicated, but it paves the way for volume adjustment in general, which is the last thing we’ll look at. The basic idea is that every SoundChannel instance is associated with a SoundTransform partner. The SoundTransform class features a volume property that controls the volume of the channel it’s coupled with. See if you can connect the dots. This time, a new variable named adjust holds a SoundTransform instance. The MouseEvent.CLICK handler sets the SoundTransform.volume property of the adjust variable, which mutes the audio, and adjust is then associated with the SoundChannel. soundTransform property of the channel variable. The same thing occurs when the button has already been toggled, except the volume property is set to 1 (100%; half volume would be 0.5).

images

9 By applying the same principle, you can use the Slider component from the Components panel to throw together a quick volume slider. Get rid of the toggle button and drag out an instance of the Slider component. Give it an instance name, such as volumeSlider, and use the Component Inspector panel to configure its parameters like this:

This code assigns an Event.

CHANGE handler function to the volumeSlider instance:

 

image

Hot Tip

ActionScript 2.0 versions of these scripted audio examples are available on the CD. The principles are the same; it’s really only the syntax that changes.

images

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.139.97.40