Recipe 9.9. Using Slider Controls

Problem

You want to use a slider control.

Solution

Use an instance of the RightActionScript HorizontalSlider or VerticalSlider.

Discussion

Slider controls are useful and even necessary in a whole host of possible applications. The ways in which you might use a slider include, but are not limited to:

• Adjusting the volume of a sound

• Adjusting the pan of a sound

• Changing color values for a movie clip

• Changing transparency for a movie clip

• Allowing users to select values for a form

However, Flash does not have any (practical) built-in slider controls that you can use in your applications. While there are a few sliders in the Buttons Common Library, they are difficult to use and to customize. If you want to use a slider component, it is recommended that you either write your own (which is outside the scope of this book) or use a third-party component. In this recipe, you'll find instructions for using and customizing the RightActionScript HorizontalSlider and VerticalSlider components.

Using a horizontal or vertical slider doesn't require many steps. In order to add an instance to a project, drag an instance from the Components panel to the stage. If you then test the movie, you'll see a functioning slider at the default dimensions and with the default artwork.

The horizontal and vertical sliders have identical parameters and they work identically. The primary difference between them is that one is horizontal and one is vertical.

By default, the sliders have minimum values of 0 and maximum values of 100. However, you can set the range by using the Component Inspector panel. Update the values for the minimum and maximum parameters. For example, if you want to use slider controls to control the red, green, and blue elements of a color value, then you probably want to work with a range of 0 to 255. Or perhaps you want to use a slider to allow a user to select a year in a range from 1900 to 2100. You can also use negative numbers. For example, you might want to use a range from10 to 10.

If you want to retrieve the value of a slider instance, you can retrieve by percent or by value. The percent is always in the range 0 to 100 regardless of the range set by the minimum and maximum parameters. The value is the value from the range that corresponds to the percent. If the range is set to the default of 0 to 100, the percent and value are equal. Regardless of which you want to retrieve, you have to use some simple ActionScript. The percent is returned by the percent property, and the value is returned by the value property. The following code uses a trace() statement to display the percent and value of a slider instance called sldrVolume:

	trace(sldrVolume.percent);
	trace(sldrVolume.value);

Most frequently, you'll want to retrieve the value only when the user moves the slider. The slider components can send out notifications when that occurs. You simply have to write some ActionScript code to listen for those notifications.

In order for the slider to send a notification, you have to tell it where to send that notification, by way of a method called addEventListener( ). The addEventListener( ) method for the sliders is defined such that it requires three parameters: the name (exp 3pod.com) of the event, a reference to an object for which the function is defined, and the name (exp 3pod.com) of the function. The name (exp 3pod.com) of the event dispatched by sliders is called change. The following code tells sldrVolume to call the onVolumeChange( ) function when the user moves the slider:

	sldrVolume.addEventListener("change", this, "onVolumeChange");

The next step is to define the function. The function always gets passed one parameter. That parameter is an object with two properties: type and target. The type property specifies the type of event (change), and the target property is a reference to the component that dispatched the event (sldrVolume). The following function uses oEvent.target to reference the slider instance that just dispatched the event. It then references the value property from that slider instance. It uses a trace( ) statement to display the value in the Output panel.

	function onVolumeChange(oEvent:Object):Void {
	  trace(oEvent.target.value);
	}

The horizontal and vertical sliders are each composed of two basic elements: the thumb bar and the track. Although the default artwork may be suitable in many cases, it is likely that you'll want to customize the appearance in some projects. Therefore, you can customize the thumb bar and/or the track element. To do so, complete the following steps:

The changes won't be reflected in the live preview during authoring time. However, when you export (or test) the movie, you'll see the custom artwork.

When you build the movie clip for the track, align the track artwork so the upper-left corner is at position 0,0 within the symbol. When you build a movie clip for the thumb bar, align the artwork so it is centered at 0,0. If you notice that the artwork doesn't align correctly in the SWF, it's likely that you have to realign the artwork within the symbols.

For the thumb bar states (up, over, and down) you need only to specify the artwork for the states on frames 1 (up), 2 (over), and 3 (down) on the timeline of the movie clip symbol that you specify as the custom thumb bar.