Use the Slider component
The Slider component
lets a user select a value by sliding a graphical
thumb
between the end points of a track that corresponds to a range
of values. You can use a slider to allow a user to choose a value
such as a number or a percentage, for example. You can also use
ActionScript to cause the slider’s value to influence the behavior
of a second object. For example, you could associate the slider
with a picture and shrink it or enlarge it based on the relative
position, or value, of the slider’s thumb.
The current value of the Slider is determined by the thumb’s
relative location between the end points of the track or the Slider's
minimum and maximum values.
The Slider allows for a continuous range of values between its
minimum and maximum values, but you can also set the
snapInterval
parameter to specify intervals between the minimum and
maximum value. A Slider can show tick marks, which are independent
of the slider’s assigned values, at specified intervals along the
track.
The slider has a horizontal orientation by default, but you can
give it a vertical orientation by setting the value of the
direction
parameter to vertical. The slider track stretches from
end to end and the tick marks are placed from left to right just
above the track.
User interaction with the Slider component
When
a Slider instance has focus, you can use the following keys to control
it:
Key
|
Description
|
|---|
Right Arrow
|
Increases the associated value for a horizontal
slider.
|
Up Arrow
|
Increases the associated value for a vertical
slider.
|
Left Arrow
|
Decreases the associated value for a horizontal
slider.
|
Down Arrow
|
Decreases the associated value for a vertical
slider.
|
Shift+Tab
|
Moves focus to the previous object.
|
Tab
|
Moves focus to the next object.
|
For more information about controlling focus, see the IFocusManager interface and
the FocusManager class
in the
ActionScript 3.0 Language and Components Reference
and Work with FocusManager.
A live preview of each Slider instance reflects changes made
to parameters in the Property inspector or the Component inspector
during authoring.
Slider component parameters
You can set the following authoring
parameters in the Property inspector or in the Component inspector
for each Slider component
instance:
direction
,
liveDragging
,
maximum
,
minimum
,
snapInterval
,
tickInterval
, and
value
. Each of these parameters has a corresponding ActionScript
property of the same name. For information on the possible values
for these parameters, see the Slider class in the
ActionScript 3.0 Language and Components Reference
.
Create an application with the Slider
The
following example creates a Slider instance to allow the user to
express his or her level of satisfaction with some hypothetical
event. The user moves the Slider to the right or the left to indicate
a higher or lower level of satisfaction.
Create a new Flash (ActionScript 3.0) document.
Drag a Label component from the Components panel to the center
of the Stage.
Drag a Slider component from the Components panel and center
it below
value_lbl
.
Give it an instance name of
aSlider
.
Assign it a width (W:) of
200
.
Assign it a height (H:) of
10
.
Assign a value of
100
to the
maximum
parameter.
Assign a value of
10
to both the
snapInterval
and
tickInterval
parameters.
Drag another Label instance from the Library panel and center
it below
aSlider.
Give it an instance name of
promptLabel.
Assign it a width (W:) of 250.
Assign it a height (H:) of 22.
Enter
Please indicate your level of satisfaction
for the
text
parameter.
Open the Actions panel, select Frame 1 in the main Timeline,
and enter the following ActionScript code:
import fl.controls.Slider;
import fl.events.SliderEvent;
import fl.controls.Label;
aSlider.addEventListener(SliderEvent.CHANGE, changeHandler);
function changeHandler(event:SliderEvent):void {
valueLabel.text = event.value + "percent";
}
Select Control > Test Movie.
In this example,
as you move the thumb of the slider from one interval to another,
a listener for the
SliderEvent.CHANGE
event updates the
text
property of
valueLabel
to display the percentage that corresponds to the thumb’s
position.
Create an application with the Slider component using ActionScript
The following
example creates a Slider using ActionScript.The example downloads
an image of a flower and uses the Slider to let the user fade or brighten
the image by changing its
alpha
property to correspond to the Slider’s value.
Create a new Flash (ActionScript 3.0) document.
Drag the Label component and the Slider component from the
Components panel to the current document’s Library panel.
This
adds the components to the library, but doesn’t make them visible
in the application.
Open the Actions panel, select Frame 1 in the main Timeline,
and enter the following code to create and position the component
instances:
import fl.controls.Slider;
import fl.events.SliderEvent;
import fl.controls.Label;
import fl.containers.UILoader;
var sliderLabel:Label = new Label();
sliderLabel.width = 120;
sliderLabel.text = "< Fade - Brighten >";
sliderLabel.move(170, 350);
var aSlider:Slider = new Slider();
aSlider.width = 200;
aSlider.snapInterval = 10;
aSlider.tickInterval = 10;
aSlider.maximum = 100;
aSlider.value = 100;
aSlider.move(120, 330);
var aLoader:UILoader = new UILoader();
aLoader.source = "http://www.flash-mx.com/images/image1.jpg";
aLoader.scaleContent = false;
addChild(sliderLabel);
addChild(aSlider);
addChild(aLoader);
aLoader.addEventListener(Event.COMPLETE, completeHandler);
function completeHandler(event:Event) {
trace("Number of bytes loaded: " + aLoader.bytesLoaded);
}
aSlider.addEventListener(SliderEvent.CHANGE, changeHandler);
function changeHandler(event:SliderEvent):void {
aLoader.alpha = event.value * .01;
}
Select Control > Test Movie to run the application.
Move the Slider’s thumb to the left to fade the image and
to the right to brighten it.
