Lesson 11.3 Simple Sound Toggles

A toggle is a button that is created from ONE button movie clip. When the button is on, it will say OFF so you can shut it off. When you click and shut it off, the button will say ON so you can turn it back on. You can substitute MUTE/PLAY or DARK/LIGHT, etc. for the labels. Get the picture?

For the sound toggle, we want to do these two things: When the sound is off and the button is clicked (ON), we want to play a sound. When the sound is on and the button text reads OFF, we want to stop or mute the sound. There are many tutorials and open source files on the net concerning sound. Many of them suggest creating a separate movie for your sound file and exporting it as a .swf and then loading the movie into Flash. We aren't going to cover loading movies in this course, so we'll turn the sound into a movie clip and apply actions on the button to the movie clip.

Here's the plan for our button. The plan is essentially a storyboard for the button.

Open a new Flash movie 18x18. Save it as toggle-button1.fla. Import a sound file by going to the File Menu - File>Import and find a nice background sound loop of music on your computer. The advantage of a loop is that you can import a small file, and have the music repeat in the background so you keep your file size small. The imported sound will go directly into the library of your open movie. Save your work.

Go to the Insert Menu - Insert>New Symbol. Assign a button behavior to the new symbol and name it toggle-but. Draw a circle and use the Info Panel to make its width and height 16x16 and the Align Panel to center in symbol editing mode. If you want to change the color of the over and down states, do that now. Save your work.

Go to the Insert Menu - Insert>New Symbol. Assign a movie clip behavior to the new symbol and name it sound clip. Double click on the sound clip movie clip symbol to open it in symbol editing mode. Create 5 layers and name them:

actions
labels
sound
button text
button

Drag the cursor through all 5 layers at frame 30 to select all layers at frame 30. Now add frames to all layers at once by pressing F5 or Insert>Frames.  The movie is now 30 frames long.

Insert keyframes in frames 5, 15, and 30 of the actions layer.
Insert keyframes in frames 5 and 15 of the labels and sound layers.
Insert keyframes in frame 15 of the button text and buttons layers.

In the labels layer insert a frame label "on" in frame 5 and "mute" in frame 15. After you enter a label name in the PI for the selected frame, press the tab key to go to another field in the PI or else Flash sometimes deletes the label name.

Back to Top

Your timeline should look like this:

Drag a button to the stage in the button layer of frame 1 and use the align panel to center it to the stage. Add the word mute, off, or type an "X" to the button text layer above the button layer in frame

1. Select the button on the stage and add this action:

on (release) {
      gotoAndStop("mute");
}

Drag a button to the stage in the button layer of frame 15 and use the align panel to center it to the stage. Add play text to the button text layer above the buttons layer in frame 15. Select the button on the stage and add this action:

on (release) {
      gotoAndPlay("on");
}

In the actions layer, insert a blank keyframe in frame 14 and add this frame action:

      gotoAndPlay("on");

This action in frame 14 will keep the playback head looping in the on frames so the music will continue to play.

In the actions layer in frame 30 add this frame action:

      stop();

In the sound layer on frame 5 select a sound from the Properties Panel Sound: drop-down menu. I have selected an mp3 sound file and set the Sync: options to Start and the Loop: options to 99. The sound toggle will NOT work with the Sync set to Event.

In the sound layer on frame 15 I have selected the same mp3 sound file and set the Sync: options to None and the Loop: options to 0.

Please note that if you decide to change the sound file you use, you will have to adjust the Sync: settings again.  Flash automatically resets the settings so you may be sure that you have the sound in the mute frame Sync: to stop. But if you replace the sound file, it will reset automatically. You must set it back to the options you want for the Synch: each time.

Go to the main timeline and drag an instance of the sound clip movie clip onto the stage. Use the Align Panel to center it vertically and horizontally to the stage. Make sure your movie clip is smaller than the stage size of 18 x 18 so the entire button can be viewed by the user. This sound clip movie clip has the toggle and the sound in the same movie clip.

Test your movie. The sound in this movie is set to play at the start of this movie. Since I don't want the sound to be playing for this entire web page, I have a link to the sample of this Flash interactive demo. 

Back to Top

Here's my Simple Sound Toggle Movie

The pop-up window is 60 x 60 pixels and the embedded .swf movie is 18 x 18 pixels. I created this to pop up in a new window so you wouldn't have to listen to the sound while reading the lesson.

INTERACTIVE Flash DEMO

Please click here or roll your mouse over the following small image to see and hear this sound toggle movie. Click the "X" to toggle the sound off and on.

The page also has screen shots illustrating the development and actionScripting associated with the movie. Follow the steps in the new browser window which will open when you roll your mouse over the image below to create your first simple sound toggle .swf.

Variations on the Sound Toggle - and 2 .fla files for you to deconstruct

The simple sound toggle above works fine until you start to develop more complex movie structures. Sometimes, you'll find a problem with movies that are structured to have the sound play by default. The problem occurs when the user mutes the sound, then clicks a button to move to a different section of the movie, then clicks a button to return home, and the sound begins to play again from home. If the users don't want the sound to play, they can mute the sound. They just want to return to the home screen. Flash is actually doing what we, the authors, designed Flash to do. We told Flash to start playing the sound in Frame 1, the home section.

How can we script a toggle so that the sound plays by default AND stays muted no matter where the user sends the playback head?  This becomes a little more complex.

I have attached two more advanced .fla files for you to analyze and deconstruct to solve the problem described in the paragraph above. One structures the sound toggle with 3 states in the sound clip.  The other structures the sound toggle movie clip with a second background sound movie clips. Review both of these in detail and implement one of them successfully in your final project.

Back to Top

Sound Advice

Here are a few sound tips to help you get going with Flash Audio:

Flash often doesn't play sounds correctly when you start the sound in frame 1 of your movie. The book recommends starting all sounds around frame 5.

For buttons with long sounds attached using the Event sync option: The sound will replay every time the button is clicked rather than stopping the first sound if the button is pressed again. The new sound will play over the top of the original sound. This could create a cacophony of sounds. If this is not the effect you want, set the sync option to Start which won't allow more than 1 version of the same sound to play at the same time.

Event Sounds - are only synchronized to the timeline when they start. If the computer is slow and/or doesn't keep up with the frame rate, your sounds can get out of sync. Event sounds have to be completely downloaded before they begin to play. They don't stream and they will play to the end of the sound even if the timeline comes to the end of the movie. Event sounds will replay every time the button is clicked creating an overlapping cacophony of sounds.

Start Sounds is similar to event sounds but Flash will not play a new instance of the start sound if an instance of that sound is already playing. Start sound will prevent multiple instances of a sound in a movie that loops.

Streaming Sounds is geared for Internet playback. Flash breaks the sound into small sound clips and attaches these clips to specific frames in the movie. Streaming sounds start to play when a few frames have downloaded. Flash favors the sound over animation when synching and may drop frames as needed to have the playback head keep in sync with the sound.

This is the last section of this lesson. Please proceed to the Assignments area.

Back to Top

Up » 11.1 Sounds » 11.2 Creating Your Sound » 11.3 Simple Sound Toggles