Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now we'll make the Progress bar show the progress of the song playing. If you're following along, I'm working in 12_Showing_Progress.fla in the 12th folder, in the Chapter 9 folder, in the Exercise Files folder. Yet again, we will click the Publish Settings button and then click the ActionScript 3.0 Settings button to lead the current class path, browse to the appropriate class path, in the 12 folder, in the Start folder and the Classes folder and then we will open up the ActionScript files that we'll working with for this movie.
And those are in Chapter 9, in the 12th folder and in the Start classes, com, lynda, audio, mp3, and I'm going to select the SoundLoader file and I'm going to hold Cmd on my keyboard and click the ProgressSlider file and then open the files by clicking the Open button. And now let's go to SoundLoader.as and we'll create some variables. We need two things in order to display the progress for our sound. The length of the sound and the current position of the sound. Now, the first thing we'll do in this file is create a variable to hold the song length. So we'll do that below all of our other variables. I'm working on line 21.
This will be a private variable called songLength, and it's going to be a Number. Now we'll initialise the value of this variable, Once our song finishes loading. So let's scroll down and find the songLoaded function and at the very top of our songLoaded function we'll type songLength equals loader.length. Next we'll define some functions that will give us the progress of the song, and the song length, so scroll down.
We're going to the very bottom of our functions here and we'll create two Public functions. The first one will be called getProg, short for getProgress and it's going to return a Number. And this function is simply going to return song.position, and that gives us how many milliseconds into the song, the song currently is. Below that function we'll define another Public function called getSong with a capital S, Length, with a capital L, and this function will return a number. And it's simply going to return the value of the songLength variable.
And the last thing we need to do before we start working in our ProgressSlider file, is create an instance of the ProgressSlider class. So let's scroll up in our code and what we're looking for is the initialised conditional statement inside of the songLoaded function. At the very bottom of that Conditional statement, type musicPlayer.progSlider with capital S equals new ProgressSlider.
We're going to pass in some values here. The first thing is the ProgressBar so we'll type musicPlayer.progBar. The next value is the slider, so type musicPlayer dot dragSlider and the third value we'll pass in is the musicPlayer itself. Now that we've created an instance of our ProgressSlider, let's define what the ProgressSlider does. So, choose File, Save to save this file. We'll had in over to ProgressSlider.as.
So the first thing we'll do is create some variables or properties inside of this class. These are all going to be private. So the first one's going to be progBar, and that's going to be a Movie Clip. And the next one is going to be our musicPlayer, and that will be instance of the Mp3Player class. The next variable is going to be our dragSlider. It's going to be a Movie Clip.
And the last one we'll create is called ProgPercent. This represents the procent of progress in the song, so is progPercent and the data type is going to be Number. And now our constructor function is going to either receive a few values and the first one is going to be the Progress bar so i'm going to call this pBar, and that's a Movie Clip, and the next value is going be the Draggable Slider, so I'm going to call this drag, that's also a Movie Clip, and the third value is going to be the musicPlayer which we'll call player and the data type is going to be Mp3Player.
Inside of the constructor function we'll initialise some of our variables, so type progBar equals pBar. On the next line type dragSlider equals drag and on the next line type musicPlayer equals player. So now we've connected to some of our variables with the values passed in when an instance of this class is created. So now we can work with the Progress bar and the dragSlider and control sound inside of this class.
The next thing we'll do is go to the next line and add an EventListener to the progBar so type progBar. addEventListener and the event is going to be Event.ENTER_FRAME, all caps. We're going to run a function called showProgress. This is going to display the progress of the sound on the stage. So below the Constructor function we'll define the showProgress function. It's going to be Private and again is called showProgress. It's going to receive an event with the data type of Event.
And the first thing this function is going to do is set the value of our progPercent variable. So type progPercent equals musicPlayer.SoundLoader.getProg. So the current progress or the current position of the sound divided by musicPlayer dot soundLoader, dot getSongLength.
Once we have the progress percent we can move the slider accordingly. So on the next line we'll type dragSlider.X equals progPercent times progBar dot width minus dragSlider dot width. I'm going to wrap the progBar dot width minus dragSlide dot width in parantheses. progBar.width - dragSlider.width represents the maximum value that the dragSlider can move.
The width of the progBar minus the width of the draggable slider. And so that our line, the right edge of the slider width the right edge of the progress bar, and multiplying that value by ProgPercent we'll place the dragSlider in the appropriate place for the position of the sound. Let's test the movie and see this in action. File, Save, to save the file and then Cmd+Return on the Mac to test the movie or Ctrl+Enter on the PC. Click the play button and watch the dragSlider update on the screen.
So now our slider shows the progress of our song.
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.