Home
Username:
Password:
Adobe Flash CS4 Tutorials

Working with Buttons / Adding Sound to Buttons




Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com’s entire library of video tutorials.


Learn More

Subtitles of the Movie

In this movie I demonstrate how to add sound to your Flash buttons. It's pretty easy to add sound effects to your Flash buttons either when they're pressed or when they're rolled over. You simply add a new layer to the button timeline and then import some button sound effects, dragging them from the Library into this new layer. You can see if I double click on the button to bring up the timeline, each button state can hold a different sound to give feedback to the user, although I don't recommend placing a sound in the up state. The sound will then automatically play as soon as the button is loaded into the browser. The user doesn't have to interact with it. Also I don't recommend placing a sound in the hit state. So in this movie I'll demonstrate how to add a simple sound to a button. First thing you want to do is open up the Common Libraries, Window, Common Libraries and you'll notice that there is a Sounds, Common Libraries, that contains a variety of sound effects, some of which may be appropriate for buttons, others not. Ocean shore sounds, cartoon drum rolls, male babies, giggles, human sounds, household sounds like a broom sweep, door close. You can go through here and select the sound effect and then click on the little play button here in the upper right-hand corner of the library. Let's go ahead and detach the library here. And let's go ahead and add a sound effect to the over state of this particular button. Let's find one here in the Library that sounds appropriate. That's probably pretty good. I'm going to click on that new audio layer that I've created and insert a blank keyframe like so and I'm going to take the sound effect from the Library and drag it onto the stage; not the timeline but onto the stage. I won't see a visual representation of this sound on the stage. Instead you'll see a sound wave form here in the timeline for the button. Probably a good idea after you drag and drop the sound onto the stage to go back to Scene 1, Enable your Simple Buttons and make sure the button sound effects are in fact working. In this case, a button click when I press on the button and also a sound effect when I roll over the button. Let's Disable my Simple Buttons. Double click on the button there to bring up the timeline. Now, you'll notice that the wave forms will extend into the other frames, in this case my over frame. The wave form there is extending into the down frame. This will have no effect on the button; however, if you place a very long sound in that over frame, it will play all the way through so you probably don't want to put music files in these frames. Let's go ahead and delete this sound here by right clicking on the frame and choosing Clear Keyframe from the contextual menu. If you're on a Mac, you'll hit a Control Key and then press the mouse button to remove that. Let's go now to my File Library. You'll notice that the file that I dragged from the Common Library is now added to my File Library here. There's the original button click. There's my multimedia Internet CD-ROM Flash File that I added from the Common Library. Now, I have a longer music file here. Notice that if I drag this onto the stage with the keyframe selected there in the over frame; actually I've cleared that keyframe so I'm going to need it back. Blank keyframe that is. Drag this what loop onto my stage. This is a longer file so if I Enable Simple Buttons now, when I rollover the button. Let's go back to Scene 1, roll over the button. Notice that it keeps playing all the way through even if I roll off the button. And if I roll over the button again, I'll get two versions of this sound file playing. Let's turn that down. It can prove problematic if you include very long audio files for your buttons. Let's go ahead and Disable the Simple Buttons there. And go into the Button Timeline one more time. You can also import your own audio files and sound effects if you don't see one that you like in the Common Library. You can do a search in Google for free sound effects or free button sound effects and get a variety of websites that provide small, little sound effects that may be appropriate for your buttons. You can also Foley your own button sounds. That means record them on your own. Get a little microphone and tap on things to get the exact sound that you need. I have a file prepared here and I can import it to my Library on my Desktop. Flash will import AIFF files, WAV files and MP3 files. Here is an MP3 file that I'm going to bring in here. And you do bring in the files into your Library, your sound files. Make sure that they play back by selecting the file here in the Library and then pressing the little Play Button in the upper right-hand corner. Make sure that file plays back here in the Library. Let's go ahead and turn the volume up. And that's playing back OK. If it doesn't play back here in the Library, it definitely won't play on your button. So do a little test by playing the sound file there in the Library before adding it to your buttons. Let's clear out that music by removing the keyframe. Let's insert another blank keyframe and let's drag and drop on that over state there, this multimedia Internet CD-ROM sound effect that I go from the Library and let's do one more test to make sure that the button is behaving correctly. And there's the rollover sound and the button click sound. So there you have a demonstration of how to add sounds to your buttons. That will conclude this section of the tutorial on working with buttons. In this section we learned about button states and button types. We learned how to create rollover buttons and invisible buttons and how to add sounds to buttons. I did not cover the fourth type of button and that is the animated buttons with movie clips but that will be a topic in the next section of the tutorial; Working with Movie Clips. We'll also learn how to create and edit movie clips and how to apply blending modes to your movie clips and much, much more.

Tutorial Information

Course: Adobe Flash CS4
Author: James Gonzalez
SKU: 33981
ISBN: 1-935320-37-8
Release Date: 2009-04-19
Duration: 11 hrs / 126 lessons
Work Files: Yes
Captions: Available on CD and Online University
Compatibility: Vista/XP/2000, OS X, Linux
QuickTime 7, Flash 8

VTC Sign up & Benefits

  • Unlimited Access
  • 98,729 Video Tutorials (23,265 free)
  • Video Available as Flash or QuickTime
  • Over 1026 Courses
  • $30 for One Month Access
  • Multi-User Discounts Available