• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Workshop Chapter 3. Creating a Horizonta... > Creating a Quick-and-Dirty Slider

Creating a Quick-and-Dirty Slider

Create a shape that will serve as the slider the users are supposed to grab. Convert it to a Movie Clip symbol called “Simple Slider.” Perhaps you’ll want to use a vertical rectangle with rounded corners.

Making the slider movable is easy enough—but we just need it to move horizontally, and only while users are dragging it. To move the slider only while users are dragging it, we’ll set a homemade variable (active) to true when they press and then false when they let go. Then, for every mouseMove event, we’ll only move the clip if the active variable is true. First name the instance of clip to slider, and then put the following code in the frame of the main timeline:


Notice that there are two ways to “unclick”: onRelease and onReleaseOutside. That is, if users press the mouse on the slider and keep holding their mouse until it’s outside the Flash window, only onReleaseOutside will capture that event.

Now you can add the code for an onMouseMove callback function (anywhere in this same frame):


Now, any time the mouse moves, this code sets the clip’s _x (this._x) to the mouse’s _x (provided that the variable active is true).

You can test the movie now and see we’re getting pretty close. It would be nice to set some limits for the high and low points, and to see a percentage displayed as it slides. The limits are pretty easy. We’ll start by setting arbitrary (and hard-wired) values, and then improve on it later.

First determine the minimum and maximum x positions for the slider instance. You can draw a few vertical lines and then snap the slider to those lines—taking note as to what is displayed in Info panel. (Remember to use the center point option when gathering this information instead of the top-left option.) In my case, I decided upon a minimum of 50 and maximum of 250 (yes, to make it easier later)—but you can use any numbers you want. Because I know I’m going to need access to the minimum and maximum values later, they should be stored in a variable. Here are two lines of code that can precede everything else you’ve written:


I decided to store my two variables inside the slider instance itself.

Now we can adjust the onMouseMove callback so that the slider never goes past the limits. There are often two ways to approach this issue: to prevent the slider from ever going past the limits, or to let it go past the ends but fix it before anyone sees anything. I’m going to opt for the second choice—that is, if the code places the slider past the end points, I’ll fix it. You can see the code I came up with is pretty wordy but easy to follow. Use this replacement for the onMouseMove callback:


Those two if statements just say, “If it’s greater than the max, set it to the max; if it’s less than the minimum, set it to the minimum.” I find this “fix it when there’s a problem” approach is usually easier than trying to avoid any possibility of users breaching the limits. Users won’t see anything refresh onscreen until this function is complete, so it doesn’t matter.

Now we can display the percentage. Double-click the slider instance to edit the contents of the Simple Slider symbol. Create a Dynamic Text field and give it an instance name percent. Make sure the margins are wide enough to display 100 (actually, just type 100 into the field). You can position it next to or on top of the slider shape. (See Figure W3.1.) Now go back up to the main timeline so that we can edit the scripts.

Figure W3.1. A Dynamic Text field inside the Simple Slider symbol will display a percentage.

The formula for percentage is simply “current position divided by the total distance.” Actually, that formula will yield percentages from 0 to 1. For example, if the current position is the same as the total, you’ll get 1. Multiplying by 100 gives us the right formula: current/total*100. You can try a few “what-if” numbers to confirm this formula. Now, translating that formula to our application is not very difficult at all. First, let’s try a few easy examples to deduce a formula. My minimum was 50 and my maximum was 250. What would the percentage be if the current position was 150? Sketch it out and I’ll bet you know it’s 50 percent. That’s because the total difference is 200 (250-50) and the current position (150) was really an “elapsed” distance of 100 (because it started at 50). So the current position is 150-50. By replacing those numbers with dynamic expressions based on our variables, the percentage is returned from the expression:

(_x-minX) / (maxX-minX) *100

Replace the variables and replace _x with 150 and you have:

(150-50) / (250-50) *100

It helps to make up nice numbers when testing such formulas.

Now we can add one line of code to complete our onMouseMove callback:

 1 slider.onMouseMove=function(){
 2   if(this.active){
 3     this._x=_xmouse; 
 4     if(this._x>this.maxX){
 5       this._x=this.maxX; 
 6     } 
 7     if(this._x<this.minX){
 8       this._x=this.minX; 
 9     } 
10     this.percent.text=(this._x-this.minX)/(this.maxX-this.minX) *100; 
11     updateAfterEvent(); 
12   } 
13 }

Notice line 10, which set the text property of the percent instance. If you test it now, you’ll see the percent is displaying decimal values, which is really more than we need. To display only the integer portion of the value found, change line 10 to:

this.percent.text=Math.floor((this._x-this.minX)/(this.maxX-this.minX) *100);


Go ahead and test the movie to see if you can find anything you think we should fix. There are just a couple minor touches that I think are worth fixing before we convert it to a component. First, I don’t like the way the slider always snaps a tiny bit unless I grab it right by the center. The problem is that the slider is being placed at the exact _xmouse location. Also, the slider doesn’t display the correct percentage until I start sliding it. Finally, it would be nice if this slider did something—such as control the _alpha level of another clip or the volume of a sound.

Although fixing the snap issue is pretty easy, it’s important to fully understand the problem and exactly what you want it to do differently. The problem is that the slider centers itself to where the mouse is. Say you click on the right side to start dragging. We’d like (as the slider gets dragged) for it to position itself to where the mouse is minus a little bit. When you click on the left, we want the slider to be where the mouse is plus a little. Exactly how much extra is added or subtracted depends on how far off center you click. So the fix is two-part: First, use a variable to save how far off center they click. Then, use that variable’s value when moving the slider.

To fix the snap issue, change the onPress callback by adding one line of code so that it reads as follows:


The second line simply stores (into the variable offSet) the difference between the slider’s _x and the _xmouse.

Now, adjust the third line inside the onMouseMove callback (from earlier) so that when you set the _x of the slider you set it to the _xmouse plus offSet:


To make the slider display the correct percentage at the very beginning, place the following code below all the other code:



Basically, this is the same code from inside the onMouseMove callback (line 10 shown previously), but I changed all the this’s to address slider. I realize it’s sort of ugly and long, but we’ll fix this later (when converting to a component).

Finally, to make this slider do something, we’ll just invoke a function and send the current percent as a parameter. We can define this function in the same frame with all the rest of the scripts:

function doit(howMuch){

This function sets the _alpha of the slider to whichever value is received as a parameter. You can change the code inside the function to affect any clip you want, in any way. For example, you might have another instance called dial that you want to rotate. You could change the code to:


To trigger the doit() function (and send the percentage), we’ll add an extra line to the onMouseMove callback. Because we need to both display percentage and send it as a parameter, I decided to add a local variable p. Notice that where I used to set the text of percent, I now do three things (lines 10–12): calculate the percentage and save it in a variable p, set the text property, and trigger the doit() function:

 1 slider.onMouseMove=function(){
 2   if(this.active){
 3     this._x=_xmouse+this.offSet; 
 4     if(this._x>this.maxX){
 4       this._x=this.maxX; 
 5     } 
 6     if(this._x<this.minX){
 7       this._x=this.minX; 
 8     } 
 9     var p=Math.floor((this._x-this.minX)/(this.maxX-this.minX)*100); 
10     this.percent.text=p; 
11     doit(p); 
12     updateAfterEvent(); 
13   } 
14 }

This is a pretty solid slider now. You could probably spend more time refining it even further, but (for better or worse) other issues will arise when converting it to a component, so it makes sense to move on (and deal with the other issues if and when they arise). Sometimes just knowing which issues remain is all that’s necessary; they sometimes fix themselves or become moot. Anyway, we’re moving on to make this a component.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint