Home
Username:
Password:
Adobe Flash CS3 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

Now up to this point, I've demonstrated how easy it is to add visual feedback to your buttons when your users interact with them. We did this by placing content in the over and down frames of the button timeline, but it's also easy and important to add audio feedback to your buttons so that when the user rolls over a button, a sound effect occurs, or when they click on the button, for example, this button here, has a button click when it's pressed. So it turns out that it's quite easy to add a new layer to your buttons. Let's go ahead and double click on the button and bring up the button timeline. I've added a new audio layer to this button, inserted a blank key frame in the down frame, and then dragged and dropped one of these audio files here in my library. In fact, it's this one here. You can hear it by selecting the audio file here in the library and then pressing the Play button right there. I also have some music that we can experiment with. So in this movie, let me demonstrate how easy it is to add audio to your buttons to add additional levels or layers of feedback for your users when they interact with your buttons. Applying audio to your files is really a four step process. You'll want to first visit Google and search for free sound effects or download some sound effects or get some sound effects that are already on your computer, locate and download these files, and then import the sounds into the library, and then add them to the stage. Let me demonstrate this by choosing File, Import to Library. Let me borwse to the location of some audio files. I have some audio files here in the MP3 folder in my Flash folder. There's one called Hype. Select it, and then click on the Open button in the lower right hand corner of the dialog. That'll place it right here in the library. Now the first thing you'll wanna do is make sure that the audio file plays ok. Sometimes Flash will import it into the library, but that doesn't mean that it will play back properly, so select the audio file and then click on the Play button here in the library, make sure that's playing ok. Let me continue by deleting this audio layer in the button timeline, and let's re-add it to simulate the process that you'll go through. So I'm gonna add my audio layer. I usually put my audio layer at the very top so they're easy to find. And let's go to the over frame and insert a blank key frame by pressing F7, like so. Go over here to the library, check to make sure the button sound is working that you want to add, like so, and then simply, with this key frame selected in the timeline, drag and drop the audio file onto the stage, not the timeline, but to the stage, a little bit counter-intuitive. As soon as you let go of the mouse and drag it and drop it on the stage, notice there's a wave form that appears here in the timeline; that's a good sign. Now what you'll wanna do is test that movie. Make sure that the button is working. Let's go ahead and do a Enable Simple Button, and now what should happen is the audio file should play when I rollover that button. Let's go ahead and do um, Test Movie, just to make sure. You don't want to run into the problems with testing a button as I did in the previous movie, when I had to this symbol instance and drag out another one. Let's now go back and disable the simple button. Double-click. Let me show you how easy it is to move this audio clip into the down frame. I simply grab that key frame and drag it. Notice that it's a blank key frame, see how it's got an open circle. You can still see the waveforms. Although it's a blank key frame, it's still holding that audio file so you can drag it over to the down frame. Now let's go ahead and go back, Control, Enable Simple Buttons, and now the audio file should play when I click on the button. Looks good. Let's also test the movie. Now if we double-click on the button to bring up the button timeline and then select that waveform of the audio, notice here in the Properties Inspector, you have some sound settings. Here's the name of the sound file. You have an effect drop down as well as an Edit button here. It lets you edit the volume of the audio as well as a sync event and then a repeat option. So I'll be covering all of these ways of setting the properties of your audio file a little bit later in the tutorial in the section working with sound, so we'll be going over the various ways to adjust the sound levels and balance and other properties of the sound a little bit later. In this section, you've learned about the various button states and button types. You've learned how to create rollover buttons and invisible buttons. And lastly, in this movie here, you learned how to add sound to buttons. Let me now move on to the next section of the tutorial, working with movie clips and cover how to create movie clips, how to edit movie clips, how to create animated buttons using movie clips and much, much more.

Tutorial Information

Course: Adobe Flash CS3
Author: James Gonzalez
SKU: 33793
ISBN: 1-934743-05-4
Release Date: 2007-10-12
Duration: 11 hrs / 125 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