Use Flash Behaviors and ActionScripting to Control Audio Playback
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
One of Flash’s strengths is its ability to consistently and reliably play audio across a wide variety of computer platforms and environments. This capability might be the best reason to use Flash for projects in which sound is an important component. For example, if you need accurate and consistent sound playback on a Web site, Flash MX 8 is a great tool for the job.
Starting with the MX 2004 version, Flash has included a behaviors panel that provides the ability to quickly and easily add specific functionality to movies without the need to write any code. Behaviors can save you the time and expertise of having to write scripts each time you need to add basic functionality to your movies. Currently there are seven categories of behaviors: Data, Embedded Video, Media, Movie Clip, Sound, and Web. Each provides menu options for adding scripts that will perform specific tasks.
)
Figure 1 The sound behavior category in the Flash 8 behaviors panel
In this article, I will show you how to use Flash sound behaviors and ActionScript to control audio playback in your Flash projects.
Controlling Sound with On/Off Buttons
It’s always a good idea to give users as much playback control of your movie as possible. Let me show you how to add controls to stop and play your Flash sound elements. In my next article, I will show you how to add additional controls for letting users adjust the volume of your sound elements.
- The first step in setting up sound control in your Flash projects is to prepare your audio resources in a dedicated audio editing application. See my earlier Flash article for two excellent and free audio applications that will help you do exacly this.
- You need to pay special attention to the file type and compression codec you
will use on the file prior to importing it into Flash. In most cases, the bulk
of the published Flash file can be attributed to the audio content. In turn, the
size of your audio files can be attributed to the file type and compression
codec used on the file.
Flash works with a variety of sound formats, including WAV files, AIFF files, and MP3 files. In Macromedia Flash 8, you have two general options for sound compression—you can set audio compression settings inside Flash or do it with an external audio editor and import the audio file as-is. If you decide to use Flash to set your compression settings, you have two options—setting compression for individual sounds or for all sounds.
Figure 2 The Sound Properties dialog box accessible via the Flash Library.
Use the Sound Properties dialog box to set sound properties for individual audio files. Check the Use Imported MP3 Quality setting to accept compression settings established in an external audio editor.
You can set compression settings for all sounds in the movie using the Publish Settings dialog box, or you can set the compression settings for each sound file individually in the Library. Whenever possible, I recommend setting compression settings individually for each sound, preferably using a dedicated external audio editor. This process usually takes more time and effort, but it produces better results because not all sounds are the same.
Option
Description
Default
This option uses the global compression settings in the Publish Settings dialog box.
ADPCM
This compression model is the "old" method of compression dating from Flash 3. It sets compression for 8-bit and 16-bit sound data. You may want to consider using this format if you need to author back to the Flash 3 Player.
MP3
This compression model can be heard by users with Flash 4 and later. It offers the best compression rates and sound fidelity.
Raw
This format resamples the file at the specified rate but does not perform any compression.
Speech
This option uses a compression method designed specifically for speech sound files.
- Create a new layer in your Timeline. Label this layer Audio.
- Choose File > Import To Library to bring your audio file into the file
library.
Figure 3 The waveform of the imported audio file is visible only if you add additional frames.
- Drag the audio file from the library onto the stage and add a Frame (F5) out
to Frame 30 on the Timeline so you can see the audio waveform in the audio
layer.
Figure 4 Set the Property inspector settings for your sound to match the settings here.
- Select the sound in the Timeline. In the Property inspector, set the Effect
to Fade In, the Sync to Start, Repeat, and 4. These settings make the sound fade
in, play independently of the Timeline, and repeat four times.
If you want the sound to play continuously, looping over and over, select Loop instead of Repeat.
Figure 5 Prepare a new layer for your sound control buttons.
- In the Timeline, click Insert Layer to add a new layer and rename it buttons. Make sure the buttons layer is below the sounds layer, as shown here.
- Create two buttons labeled Sound On and Sound Off. Any graphic will work
here, even just a simple label using text. However, make sure you convert your
graphic into a symbol because the next step, adding a behavior, works only with
symbols.
Figure 6 Add a Stop All Sounds behavior to your Sound Off button.
- Choose Window > Behaviors to open the Behaviors panel. Select Sound Off on the Stage. In the Behaviors panel, click the plus sign and choose Sound > Stop All Sounds. The Stop All Sounds dialog box appears.
- In the Stop All Sounds dialog box, click OK to accept the behavior. This behavior will stop any sounds that are currently playing in the Timeline.
- Choose Control > Test Movie to test the Sound Off button. Notice that the sound stops playing after you click the button.
- When you finish previewing your movie, close the Preview window.
- Now that you have the Sound Off button working, we turn to the Sound On
button. Because there is no Play All Sounds behavior, we need to write our own
ActionScripting to get the sound to play again.
In the Timeline, add a new layer and name it actions. Make sure the actions layer is above all the other layers.
Figure 7 Add a Stop action to stop the playback head at Frame 2.
- In the Timeline, select Frame 2 of the actions layer and press F7 to add a
blank keyframe. Open the Actions panel (F9), choose Global Functions >
Timeline Control and double-click the stop action to add it to the Script pane.
This action tells the playhead to stop when it gets to Frame 2.
We have added this script to stop the playback head when it reaches Frame 2. However, keep in mind that the sound file will not stop because event and start sounds are independent of the Main Timeline. Even though you stop the Timeline at Frame 2, the sound will keep playing until you click the Sound Off button. You will add ActionScript to the Play button next.
Figure 8 Add a script to handle a release event for the Sound On button.
- On the stage, click the Sound On button to select it. In the Actions panel (F9), choose Global Functions > Movie Clip Control and double-click the on action to add it to the Script pane. In the Code Hint menu that appears, choose release for the mouse event.
- In the Script pane, place your cursor after the open curly brace and press
Enter/Return to bring the cursor down to the second line.
Figure 9 This line of script moves the playback head off of Frame 2, therefore playing the audio file again.
- In the Actions pane, choose Global Functions > Timeline Control and
double-click the play action to add it to the Script pane. This will tell the
playhead to move to the next frame, which is Frame 3, and the sound will begin
to play again from Frame 3.
Here is a summary of what you have scripted so far. When the movie begins, the sound also starts playing because the sound starts on Frame 1. The playhead moves on to Frame 2 and encounters a Stop Frame action, which tells the playhead to stop. Because the Sync is set to Start, the sound will continue to play although the Timeline has stopped. When you click Sound Off, the sound will stop playing, and the playhead will stay at Frame 2 until you click the Sound On button, instructing the playhead to move to the next frame and play. The playhead then loops back to Frame 1 and the sound starts playing again.
- Choose Control > Test Movie to preview the movie. Click Sound Off and then click Sound On. Notice that the sound immediately stops when you click Sound Off and starts over again when you click Sound On.
)
)
)
)
)
)
)
)