Recipe 9.10. Using a Dial Control

Problem

You want to use a dial control.

Solution

Use an instance of the RightActionScript Dial component.

Discussion

Like slider controls, dial controls are a moderately common element in Flash applications. You can use dials to control audio settings (volume, pan, and so on), mimic analog devices (such as radios), and much more. However, as with slider controls, Flash has no (practical) built-in dial controls. That means that you either have to make your own dial control or use a third-party component. In this recipe, I'll discuss how to use the RightActionScript Dial component.

Adding a dial is as simple as dragging an instance from the Components panel to the stage of a Flash document. When you test the movie, you'll notice that the dial automatically responds to mouse events. As you mouse over it, the dial highlights. As you click on the dial, it visually changes to the down state, and you can drag the mouse to move the dial.

As with the slider control, you can retrieve the value from a dial as a percent or in a range. The default range is from 0 to 100, so unless you change the range, the percent and value are equal. However, you can set the range in the Component Inspector panel with the minimum and maximum parameters. For example, if you want to use the dial to control the red element of a color, you might want to change the range from 0 to 255. You can retrieve the percent (always from 0 to 100) using the percent property. You can retrieve the value using the value property. Both require Action-Script. The following code uses trace( ) statements to display the values in the Output panel:

	trace(dlVolume.percent);
	trace(dlVolume.value);

Most commonly you'll want the dial to send a notification when the user changes the setting. Just like the slider components, the dial component dispatches events to any listening object. You can add a listener using some ActionScript code with a method called addEventListener( ). You need to pass that method three parameters: the name (exp 3pod.com) of the event, the object for which the function is defined, and the name (exp 3pod.com) of the function you want it to call when the value updates. The name (exp 3pod.com) of the event dispatched by a dial is called change. The following code tells a dial called dlVolume to notify a function called onVolumeChange( ) when the value changes:

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

You can then define a function with the same name (exp 3pod.com) specified in the third parameter, and when the value of the dial changes, the dial will automatically call that function. It will pass that function one parameteran object with a type property and a target property. The type property specifies the name (exp 3pod.com) of the event. In the case of a dial component, the type is always change. The target property is a reference to the dial that dispatched the event. The following defines a function that uses a trace( ) statement to display the value of a dial:

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

By default, the dial rotates on a range from 45° to 315° where 0° is at the bottom of the dial. That is to say that the stops on the dial are at angles on the lower-left and lower-right sides. If you want, you can adjust the range over which the dial can rotate by way of the minimumAngle and maximumAngle parameters. To do so, simply change the values via the Component Inspector panel.

Although the default artwork may be suitable for many projects, it is likely that you'll want to occasionally use custom artwork. The component has just one element, and that element is entirely customizable. You can customize the dial by completing the following steps:

The custom artwork won't display in live preview during authoring time. However, when you export the movie, it will display properly in the SWF.