Adding sounds to buttons
Create movies that respond with sound as well as action!
Create a new movie and save it
- 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
icon signify a sound file.
- Close the other file
- Create a new button symbol
- In the Button Symbol Edit mode:
- Rename Layer 1 to Button
- In the Up frame, create an oval button with a funky line around
- 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
- Right click on the Over frame and choose Insert Keyframe to
duplicate the contents of the Up frame.
- Working in the Over frame, modify the oval and line into something
- Right click on the Down frame and choose Insert Keyframe to
duplicate the contents of the Over frame.
- 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.
- Right click on the Hit frame and choose Insert Keyframe to
duplicate the contents of the Down frame.
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.
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:
- Now let's add some sound to this button! We will continue to work in
Button Symbol Edit mode....
- Add a new layer above the button layer and name it
- 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.
- 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
- With the Over frame in the Sound Layer still selected, open the
Property Inspector. Make sure that your sound settings match those
- 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
- No action is necessary for the Hit frame.
- Exit Symbol Edit mode by clicking on Scene 1 to return to the main
timeline of your movie.
- Let's test this whacky button! Drag a copy of the btnblank
symbol onto the stage of your movie.
- If your button is not enabled, click Control > Enable Simple
Buttons. Move your mouse over the button to hear and see the effects!
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
- 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).
- 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
- Almost there - the buttons on the far right and far left are a bit
too far over so let's adjust that:
- 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.
- 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:
- Add Actions to these instances of the btnblank symbol if you
would like to do so.
- 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!
- When done, create a Test Movie (Control > Test Movie) to generate
the SWF file and save your btnsound.fla.