spacer

Adding sounds to buttons

Create movies that respond with sound as well as action!

Create a new movie and save it as btnsound.fla.

  1. Open a flash file with sound in it as a Library File: File > Open as Library.

    • Drag the sound files from that library into your library. (.wav is a simple, common sound file extension)
      • Symbols in the library with the Sound Icon icon signify a sound file.

    • Close the other file
    • Create a new button symbol called btnblank.
    1. In the Button Symbol Edit mode:

      1. Rename Layer 1 to Button

        Up State
      2. In the Up frame, create an oval button with a funky line around it.

      3. Double click on your oval (or drag a selection around it) to select both the oval and the line; use the align panel to Align the button both Vertically and Horizontally to the Stage. (Notice the crosshair + in the center of the button that the red arrow is pointing to.)

      4. Right click on the Over frame and choose Insert Keyframe to duplicate the contents of the Up frame.

        Over State of button
      5. Working in the Over frame, modify the oval and line into something else. 

        Down frame
      6. Right click on the Down frame and choose Insert Keyframe to duplicate the contents of the Over frame.

        Down State of button
      7. Working in the Down frame, add some little fun touch to your button - if you used eyes, add eyebrows. Or perhaps you want to just change the color of the oval.

        Hit frame
      8. Right click on the Hit frame and choose Insert Keyframe to duplicate the contents of the Down frame.

        Hit state of buttonIf your button is small or unusually shaped, you may need to drag out a rectangle here to define a larger selection area. Remember, the Hit State is not viewable in the movie....it just defines the clickable area of the button.
    1. Now let's add some sound to this button! We will continue to work in Button Symbol Edit mode....

      1. Add a new layer above the button layer and name it Sounds.

        blank keyframes in each frame
      2. Right click on the Over frame and choose Insert Keyframe. (This keyframe will be blank because the keyframe in the Up State is blank.) Repeat for the Down and Hit frames.

        Sound Wav
      3. Click on the Over frame in the Sound layer to select it. Open your library if necessary (should still be open unless you closed it earlier) and drag a sound(.wav file) onto the stage. Note: Nothing will appear on stage for this sound symbol, but a wavy line will now appear in the frame of the timeline we are working in.

      4. With the Over frame in the Sound Layer still selected, open the Property Inspector. Make sure that your sound settings match those shown below:



      5. Click on the Down State frame in the Sound layer to select it. Drag another sound file, say coocoo.wav out of the library onto the stage. Make sure that the properties for this sound symbol match those shown below:



      6. No action is necessary for the Hit frame.

    2. Exit Symbol Edit mode by clicking on Scene 1 to return to the main timeline of your movie.

    3. Let's test this whacky button! Drag a copy of the btnblank symbol onto the stage of your movie.

    4. If your button is not enabled, click Control > Enable Simple Buttons. Move your mouse over the button to hear and see the effects!
    This button bar will have no text, because it is just for fun (and to learn how to attach simple sounds to your buttons). Let's just put a few instances of the btnblank on stage:
    1. Drag 2 more copies of the btnblank symbol onto the stage, then hold down the SHIFT key while clicking on each to select them (or drag a selection around all 3 buttons).

    2. Open the Alignment Panel (use the button on the main button bar) and make sure that "To Stage" is selected. Align the buttons Vertically and then Horizontally to the stage; then click on Space Evenly Horizontally.



    3. Almost there - the buttons on the far right and far left are a bit too far over so let's adjust that:

                   

      1. Click on the left button to select just that button, then use the arrow key on your keyboard and move it to the right until the white edge of the stage shows to the left of the button. Tip: Keep count of how many "steps" you make with the arrow key.

      2. Repeat on the right button, the same number of steps except move the button to the left. You should end up with something similar to this in terms of placement:



    4. Add Actions to these instances of the btnblank symbol if you would like to do so.

    5. OOPS! We left a few housekeeping issues undone! Be sure to rename the layer on your main timeline to something pertinent, like Button Bar. And don't forget to organize your symbols into library folders!

    6. When done, create a Test Movie (Control > Test Movie) to generate the SWF file and save your btnsound.fla.
    Summary:    In this little exercise, we learned how to resize the stage to create just a button bar-style movie, we made some silly buttons and we learned how to add sound to them! If you exit Flash now and play the SWF file you will see a nice small button bar, all ready to pop into a web page.