DekGenius.com
[ Team LiB ] Previous Section Next Section

Recipe 13.10 Adding Sounds to Buttons and UI Components

13.10.1 Problem

You want to add sounds that play when the user clicks a button or when a UI component selection is made.

13.10.2 Solution

Add the sound to the movie by attaching it from the Library or by loading an external MP3. Create a Sound object to target the sound. Then add a call to start( ) within the button's or component's handler function.

13.10.3 Discussion

You can use sounds in conjunction with buttons and UI components to alert the user that something has happened (i.e., a selection has been made, a button has been pressed, etc.). To accomplish this, you need to complete the following three steps:

  1. Add the sound to the movie, either programmatically by attaching the sound from the Library or by loading the sound from an external MP3. If you are loading the sound, be sure to do so on a keyframe of a timeline prior to when you want to use the sound. You should make sure you give Flash enough time to download the sound.

    // Create a sound holder movie clip.
    this.createEmptyMovieClip("soundHolder_mc", 1);
    
    // Create the Sound object.
    click_sound = new Sound(soundHolder_mc);
    
    // Attach a sound from the library.
    click_sound.attachSound("MySoundSymbol");
  2. Call the Sound.start( ) method from within the handler function or method for the button or UI component. For example, if you want the sound to play when a push button is clicked, place the call to start( ) inside the click handler function:

    function onClick (  ) {
      click_sound.start(  );
    }
    
    myPushButton.setClickHandler("onClick");

    Alternatively, if you are using a standard button or a movie clip as a button, you can place the call to start( ) inside the onPress( ) or onRelease( ) event handler method:

    myButton_mc.onRelease = function (  ) {
      _root. click_sound.start(  );
    };

    Or, if you are using another type of UI component, you can add the call to start( ) to the appropriate handler function. For example, you can play a sound when a selection is made in a combo box by adding the call to start( ) in the change handler function:

    function onChange (  ) {
      click_sound.start(  );
    }
    
    myComboBox.setChangeHandler("onChange");

    If you want to play a sound when a message box opens, you cannot use this exact technique because there is no open handler function available. Instead, place the call to start( ) on the line before or after the line of code in which you open the message box. (For more information on using message boxes, see Recipe 11.15.)

    myMessageBox._visible = true;
    click_sound.start(  );

You can use these techniques to play short sounds such as clicks or beeps when buttons are pressed or selections are made, as in the preceding snippets of code. Here is a complete example:

// Attach a push button from the Library. You must first drag a push button from the
// Components panel to the Stage to create the Library symbol.
this.attachMovie("FPushButtonSymbol", "myPushButton", 1);

// Create a sound holder movie clip.
this.createEmptyMovieClip("soundHolder_mc", 2);

// Create the Sound object.
click_sound = new Sound(soundHolder_mc);

// Load a sound from an external MP3. You can use this URL as long as you are playing
// the movie in the test Player or standalone Player.
click_sound.loadSound("http://www.person13.com/ascb/sounds/click.mp3");

// Define the click handler function.
function onClick (  ) {
  click_sound.start(  );
}

// Set the click handler function and label for the push button.
myPushButton.setClickHandler("onClick");
myPushButton.setLabel("Click!");

You can also use the same technique to play longer sounds. The following example shows how you can use a push button to toggle between playing and stopping an attached sound:

// Attach a push button from the Library. You must first drag a push button from the
// Components panel to the Stage to create the Library symbol.
this.attachMovie("FPushButtonSymbol", "myPushButton", 1);

// Create a sound holder movie clip.
this.createEmptyMovieClip("soundHolder_mc", 2);

// Create the Sound object.
click_sound = new Sound(soundHolder_mc);

// Attach the sound from the library. You must have a sound symbol with a linkage
// identifier of MySoundSymbol for this to work.
click_sound.attachSound("MySoundSymbol");

// Create two click handler functions: one to start the sound and one to stop the
// sound. When one is called, it switches the push button's click handler and label
// so that the sound alternately plays and stops.
function startSound (  ) {
  click_sound.start(  );
  myPushButton.setClickHandler("stopSound");
  myPushButton.setLabel("Stop Sound");
}

function stopSound (  ) {
  click_sound.stop(  );
  myPushButton.setClickHandler("startSound");
  myPushButton.setLabel("Start Sound");
}

myPushButton.setClickHandler("startSound");
myPushButton.setLabel("Start Sound");

13.10.4 See Also

For basic information on using sounds in Flash, see Help Using Flash Adding Sound. Also refer to Recipe 13.2, Recipe 13.3, and Recipe 15.5.

    [ Team LiB ] Previous Section Next Section