Audio is a great way to bring your site to life and add confirmation on tasks, such as adding rollover and click sounds on buttons and that's what I'd like to do this main menu is add some audio confirmation. So when you roll over any one of these, you are going to hear like a highlight sound and when you click on it, you are going to hear like a button click sound. So the first thing I need to do is go to File and import my sound. I am just going to import to my library and in the sound folder, which happens to be in the Assets folder, go to sound and what I want to do is I want to add the rollover.mp3 and the clickSwoosh.mp3, but notice I can actually import all sorts of different sound formats.
So just take a look at this list if you ever want to determine what sound can be imported. Of course, MP3 is really popular, so that's what I'm using. Okay, Import to Library and if I minimize the Properties panel, right in there, you'll see the clickSwoosh and you'll see that rollover.mp3. All right. I want to add it to all these buttons including this Home button. So I am going to first double-click to enter inside of the content movie clip and then I am going to double-click again to enter into this Home button.
So notice right up here at the top in the timeline, I have my various Over, Down and Hit states. So what I need to do is I need to create a new layer by clicking the New layer button and I am just going to type in Sound. So this is where I want to add my audio and I want to add my audio right in this Over frame. So what I need to do is I need to right click and I need to insert a keyframe. So at this point in the state of the button, I want to add that audio track. Okay, so with that frame selected, I am going to open up the Properties panel and right underneath Sound, you might need to twirl it down if you don't see it, I can select the name.
So here it is going to list out all of the audio tracks that I have imported. Now since this is the Over state, I am going to select rollover.mp3. Now I am just going to confirm that the Sync is Event. I can also use Start. The last thing you want to use is Stream because Stream will not play the audio track for you, in this particular case. So I am just going to leave that on Event. That's looking pretty good. Maybe for the Down state, I will do the same thing. I am going to insert a keyframe and on that keyframe, If I go over to Properties, I can select clickSwoosh, because that is going to be on the Down state.
It is kind of a click sound with a slight swoosh since this interface turns. All right. Sync is set to Event and we are looking pretty good. All right. With that done, I am going to go to Control>Test Movie and if I click on it, you can hear the sound and when I roll over it, you can hear it activates. So let me rollover it again. So you could hear those two sounds.
Now you can play with the volume if you want to as well. It is just a fine balance as far as getting the sound that you want. But luckily, if you ever want to edit any of this audio, you can always come in here and with that frame selected where the audio is, you can always select this Pencil icon, which allows you to edit the sound envelope. So here you can raise or lower the volume of that particular sound. So, all right it is looking good so far. So, what I want to do is I want to really add those same sounds to other buttons.
So all I am going to do is just go ahead and select those three frames and right-click and Copy Frames. Now if go back to the content movie clip, I can double-click on the About movie clip and it's the same process of adding a layer called Sound and then right in here, I can go ahead and Paste Frames, just like that. So I am just going to repeat this process by going into that particular button, creating a new layer, selecting all of those frames and pasting them in.
And the last one, I am going to double- click on portfolio, create a new layer, select all those frames. Notice when I paste it in, it is actually going to change the name of that layer as well. Paste Frames, it changes it to sound. I like how it does that. Let's go to Control>Test Movie. Again, I am just going to be quiet for a second and so you can listen to these various button sounds. (Button sounds) Looks like everything is working. This does get hung up a little bit and I am going to talk about that later how to kind of take care of the little transitions that might get stuck.
But in general, you can hear all the audio and I can get as elaborate as I want with the audio, but I like how I am able to integrate audio into the user experience to give the users confirmation as to what they are doing.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Your file was successfully uploaded.