Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Through several hands-on tutorials, instructor Todd Perkins shows how to best build dynamic, streamlined sites using Flash CS3 Professional. Learn how to create custom keyboard shortcuts, apply advanced text techniques such as animating scrolling text with custom easing controls, and using advanced animation techniques. Flash CS3 Professional Beyond the Basics covers many challenging features, including adding complex interactivity to a Flash CS3 project and getting Flash content on a phone. Exercise files accompany the tutorials.
Now we'll talk about controlling the progress of our movie clip by dragging the slider inside the Progress bar. If you're following along, I'm working in 13_Controlling_Progress.fla, in the 13 folder, in the Chapter 9 folder, in the Exercise Files folder. First thing we'll do, as usual, set the Publish Settings, ActionScript 3.0 Settings, delete the current class path, set a new class path. Chapter 9, in the 13th folder, Start and then Classes. Once we have our class path set up we'll open the ActionScript files we'll be working with, then we'll navigate to them by going to the Chapter 9 folder, in the 13 folder, Start folder, classes, com, lynda, audio, mp3.
Then I'm going to select the SoundLoader.as file and I'm going to Cmd click the ProgressSlider.as, that's Ctrl+click on the PC, and then I'll click the Open button to open the files. Let's go to SoundLoader.as. So scroll all the way down to the bottom of the code. What we'll do is create a Public function that will allow us to set the resumeTime from our ProgressSlider instance. So we'll create a Public function called setResumeTime. It will accept one parameter that's going to be time that's going to be a Number and in this functional we will just type resumeTime equals time. So we'll set our resumeTime variable to whatever time is passed in via the time parameter. Now let's save this file by choosing File, Save, then we'll go over to ProgressSlider.as.
The first thing we'll do is create some variables. we'll do this right below our other variables so I'm on line 15 right now and I'm going to create a Private variable. This is called isPlaying and the data type will be Boolean. The isPlaying variable will specify whether the sound should resume playing once we stop dragging the DragSlider. We'll talk more about that a little bit later on in this exercise. Let's scroll down to the bottom of the constructor function and we'll add an EventListener to dragSlider. So type dragSlider.addEventListener and the event will be MouseEvent.MOUSE_DOWN, all caps and we'll run a function called updateProgress.
Ok, let's scroll down to the bottom of our code here and we'll create a Private function called updateProgress. That's going to receive an event with the data type of MouseEvent. The first thing we're going to do in updateProgress function is start dragging the dragSlider Movie Clip. So type dragSlider with capital S, dot startDrag and we'll pass in false, now we'll create a new Rectangle right inside the parameters of this method.
And for the rectangle we're going to pass in an X of zero, a y of the current y position of the dragSlider, then we'll pass in progBar.width minus dragSliders.width for the width of the Rectangle and then for the last value we'll pass in 0 for the hight. Type closed parantheses for both startDrag and the Rectangle. Make sure to type a semicolon in the statement.
Next we'll add an EventListener to the stage of the progressBar, When we release, the Mouse button will stop draging the slide. So type progBar. stage.addEventListener and the event is going to be MouseEvent.MOUSE_UP, all caps, then we'll run a function called stopDraging. Now let's define the stopDragging function. We'll do this right below the updateProgress function, so create a new Private function called stopDragging and that's going to receive an event with the type MouseEvent, and the first thing we'll do is stop dragging the dragSliders so type dragSlider.stopDrag.
Then we'll remove the EventListener for stopDragging so what we'll do is select progBar.stage.addEventListener line of code that we've just wrote and copy using Cmd+C on the Mac or Ctrl+C on the PC and below the stopDrag line of code we'll paste that code that we've just copied by pressing Cmd+V on the Mac or Ctrl+V on the PC. In the pasted code change addEventListener to removeEventListener. Now, when we drag the slider, we want the sound to stop if it's currently playing but we don't want it to stop if it's not currently playing. So let's define that in the updateProgress function. So the very top of the updateProgress function we'll type if and then in parentheses musicPlayer.soundLoader.isPlaying so the sound is currently playing and we want it to stop.
So we'll set isPlaying and that's inside of this class to true then in the next line we'll set musicPlayer.soundLoader.pauseSong and it's in parentheses and a semicolon. So if the sound is currently playing we'll set isPlaying value to true and we'll pause the song else, and we'll set isPlaying= false. So now we've set up our slider so that we can drag it. One problem that's going to happen is that when we drag our slider, the Progress bar is going to try to update the playback of the sound, while we're dragging the slider. So we're going to run into problems there. So what we're going to do is scroll up in our code and find the showProgress function, and we only want to show the progress if the sound is currently playing.
So, above all the code, inside of the showProgress function type if musicPlayer.soundLoader.isPlaying, than we'll just wrap all the code inside of this function in the curly braces. So it will only run if the sound is currently playing and it will be paused when we click to drag the Slider Movie Clip. Now just to make sure that this function is not running when we're trying to drag we're going to turn off the EventListeners for this function. So let's scroll up and find in the Constructor function progBar.addEventListener, event.ENTER_FRAME. That's going to be on line 23 in my code, but it might be under different line in yours. Select that line of code and then copy it using Cmd+C on the Mac or Ctrl+C on the PC.
With the copyed code, scroll down into the updateProgress function. So soon as we click on the slider to drag it we'll all have the Progress of the slider trying to update it in the same time. So let's paste the code at the very bottom of this function by pressing Cmd+V on the Mac or Ctrl+V on the PC and in the pasted code change addEventListener to removeEventListener. Now let's scroll down to the bottom of our code and find the stopDragging function. So go at the very bottom of this function and paste the code using Cmd+V on the Mac or Ctrl+V on the PC. We remove the EventListener while over dragging the slider, then we add the EventListener again when we've released the slider in the stopDragging function. At the very top of this function we'll set the resumetime for the song. In order to set the resumeTime, we need to figure out the procentage that the Slider has been dragged across the progress bar. So let's create a variable inside of the function called dragPercent.
And that's going to be a Number and will set this equal to dragSlider.X divided by and then some parentheses, and in the parentheses we're going to type the maximum range for the dragSlider, and that's going to be progBar.width minus dragSliders.width. Notice that these boundaries are the same as the Rectangle for dragingSlider. On the next line we'll set the resumeTime for the sound. So type musicPlayer dot soundLoader, with capital L, dot setResumeTime.
And then we're going to pass in a value here, and the value we'll pass will be dragPercent times, and here we'll get the total length of the song. So type musicPlayer dot soundLoader, dot getSongLength and some parentheses. So once we stop dragging the slider then we'll set the resume time for the song. The last thing we need to do here is make the song resume playing if it's already playing. So on the next line, create an if statement that checks to see if the isPlaying variable is true.
If the sound was playing when we started dragging it, then we'll type musicPlayer.soundLoader.playSong, with capital S and some parentheses. So if the sound was playing when we started dragging it, it will play again when we stop dragging it. Let's test this all out. Choose File, Save to save the file, and then we'll test movie using Cmd+Return on the Mac or Ctrl+Enter on the PC. click and drag the slider to move it on the stage, then click the Play button to play the song and drag the Slider to navigate to different positions of the song.
And looks like it's working great. So let's close this window and maybe the last thing you'd want to do is just set the buttonMode property of the slider to true so that you see a Hand Cursor and the user of the Mp3 Player knows that you can click and drag that slider. Let's do that as the fishing touch. Scroll at the very top of your code and then at the very bottom of the constructor function type dragSlider with the capital s, dot buttonMode equals true. Let's save the file by choosing File, Save, then test the file with Cmd+return on the Mac or Ctrl+Enter on the PC. When you roll over the slider you see a Hand Cursor.
I'll close the window, so that our slider works and our Mp3 Player works great. Now I just have to say congratulations, you just completed a full object oriented application. Good job.
There are currently no FAQs about Flash CS3 Professional Beyond the Basics.
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.