Creating a 'slider' interface component

In this tutorial you will create a slider interface component, the type of component you might use to control volume levels, to scroll text or graphics, or control audio panning.

Try this example, it doesn't actually do anything yet, except slide up and down - just click and drag the blue 'handle': -

1. Open Flash and create a new movie.

2. Insert a new Button symbol and draw an ellipse, similar to the one shown in the example.

3. Back on the main Timeline, draw a vertical line and using the Properties Inspector, ensure that the line is 100 pixels in height (see below).

   

4. Open the Library, and drag the elliptical button from the Library onto the stage of the main Timeline. Select the button, then choose Insert > Convert to Symbol. Select the Movie Clip option and give the new symbol a suitable name.

5. Drag the Button Movie Clip by its centre and attach it to the top of the vertical line you drew earlier. The Button should snap into place (see below).

   

6. Open this Button Movie Clip for editing, select the button symbol that is embedded in it, then add the following Actionscript code to the button:

   on (press) {
   	startDrag("", false, left, top, right, bottom);
   	dragging = true;
   }
   
   on (release, releaseOutside) {
   	stopDrag();
   	dragging = false;
   }
   

7. Go back to the main Timeline and select the Button Movie Clip. Add the following Actionscript code to the Button Movie Clip:

   onClipEvent (load) {
   	top = _y;
   	bottom = top + 100;
   	left = _x;
   	right = _x;
   }
   
   onClipEvent (enterFrame) {
   	if (dragging == true) {
   		// execute this code
   	}
   }
   
   

8. You should now test your movie and it should work like the example shown above.

Additional things to try

1. Smarten up the look of your slider. Try using a gradient fill for the button, adding some horizontal markings to the vertical line and perhaps adding a background.

2. Get the button to do something. Look back at the second section of code you added - any code you place in the section marked // execute this code will be executed while the slider is being dragged.

   One thing you should try is to use the slider to control the volume of a music clip. Create a sound object and set it to play continuously. Add a slider to your Flash movie and add code so that it will alter the volume of the sound when it is dragged. Hint: the slider can move up and down in a range of 100 pixels. Sound volume has a range of zero (lowest volume) to 100 (highest volume).