Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now let's talk about changing the volume when you drag your mouse on top of the Volume Bar. If you're following along I'm working in 11_Changing_Volume.fla, in the 11 folder, in the Chapter 9 folder, in the Exercise Files folder. As always, we will click the Publish Settings button in the Property Inspector, click the ActionScript 3.0 Settings button, delete current class path and pick the new class path, which is in the Chapter 9 folder, in the 11 folder, Star folder and the Classes folder.
And we will click OK to exit all the windows. Now we'll open up our ActionScript files, so choose File, Open, and in the Chapter 9 folder, go to the 11 folder and the Start folder, classes, com, lynda, audio, mp3. I'm going to select the VolumeControl.as file, and I'm going to click Open, to open that file. At the very bottom of the constructor function we'll connect the Volume Bar to our mouse by typing volBar.addEventListener and the even it's going be MouseEvent.MOUSE_DOWN all caps.
We'll run a function called changeVol capital v, short for volume. So let's define the changeVol function. This will be a Private function. It's going to receiving an event with the type MouseEvent. And inside of the function we're going to do two things. First we are going to add an EventListener to the volumeBar so type volumeBar type volBar.addEventListener.
This is going to be an Interframe event, so type Event.INTER_Frame, all caps. we're going to run a function called setVolume, or setVol for short. We'll define that function in just a minute. Now we'll add an EventListener to the stage. So when we release our mouse on the stage we'll stop running the setVolume function. So type volBar.stage.addEventListener. This will add EventListener to the stage of the volBall or whatever stage the volBar is on, which is going to be the entire stage of our Flash movie and for the value we'll pass in MouseEvent.MOUSE_UP, that's in all caps and we'll run a function called stopChanging.
stopChanging. Now let's define this stopChanging function. This is going to be a Private function as well, and it will receive an event with the type MouseEvent. And it's basically going to undo the things that we did inside of the changeVolume function. So what I'm going to do is copy the two lines of code inside of the changeVolume function by selecting them and then pressing Cmd+C on my keyboard or Ctrl+C on the PC. Then I'm going to click inside of the stopChanging function and paste the code using Cmd+V on the Mac or Ctrl+V on the PC.
In volBar.addEventListener I'm going to change addEventListener to removeEventListener. So we'll stop running setVolume function and in the next line, volBar.stage.addEventListener I'll change that line of code and say volBar.stage.removeEventListener, and now we're ready to define our setVolume function. So right below all of our other functions we'll create a new Private function called setVol, short for setVolume. It's going to receive an event with the data type of Event and inside that function we're going to create a variable called volPercent, and this is going to be a Number, and this is going to be the percentage that the volume should be. So we'll set this equal to volBar dot mouseX divided by VolBar.width.
That will give us the percentage that our mouse is across the volumeBar and so will tell Flash that, that is the percentage that the volume should be. Now, using this code there is the potential that our volume will go above one or below zero. Let's write some conditional statements to keep the volume in the right boundaries. So we'll type if volPercent is greater than one we'll set volPercent equal to one, so volPercent equals one.
Below that conditional statement create an else if statement who checks to see if volPercent is less than zero. Now, if the volPercent is less than zero, we'll set the volPercent equal zero. Below the last Conditional statement you created we'll set the volume of our song equal to this volPercent variable's value. So type musicPlayer.soundLoader.setVol, capital V, then we'll pass in our volPercent variable.
So once we've set the volume, the the next step is to show a visual on the stage that the volume is been updated. So we'll scroll up in our code, and we'll copy the code where we already did this. In my code it's on line 17. It says volBar.gotoAndStop then we did this formula that connected the currentSound to our volumeBar and so it gave us a visual on where the currentSound was. Let's select that line of code and then Cmd+C or Ctrl+C on the PC to copy the code, we'll scroll down, and at the very bottom of the setVolume function we'll paste that code using Cmd+V on the Mac or Ctrl+V on the PC.
Now let's test the movie and watch our control of the volume. First let us save the file by choosing File, Save, then we'll test the movie using Cmd+Return on the Mac or Ctrl+Enter on the PC. I'm going to click and drag the Volume bar to adjust the volume, then I'm going to play the sound and adjust the volume while the sound is playing. I'll close the window, and that works great. We can now control the volume of our sound by clicking and dragging the Volume Bar.
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.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.