Creating 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.

To create an application with the Slider component:

Create a new Flash file (ActionScript 3.0) document.
Drag a Label component from the Components panel to the center of the Stage.
- Give it an instance name of valueLabel.
- Assign the value 0 percent to the text parameter.
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.

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 Slider's value.

To create an application with the Slider component using ActionScript:

Create a new Flash file (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 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.