AS3 How to and Tips > How to Use Slider and NumericStepper Components in ActionScript 3

The Slider and NumericStepper components provide an easy way to add motion and interactivity to your applications. The example below does not do a whole lot -- it simply adjusts the alpha (transparency) property of a textbox as the user changes either component. We chose this example to illustrate how to set-up the components, how to respond to user interaction with each component, and how to get and set values of each component.

Download

Open the Flash CS3 file SliderStepper.fla that produces the example shown above.

Setting up the stage

The stage has three interactive elements: a dynamic textbox with instance name txtOutput, a Slider object with instance name slAlpha, and a NumericStepper object with instance name nsAlpha. The textbox is created using the Tools panel and initially has text shown in the screen shot below. The two component objects are pulled from the Components panel (select Window > Components, if this panel is not visible) as shown in the screen shot on the right. The instances can be placed anywhere on the stage since we will use ActionScript to position them relative to txtOutput at runtime.
SliderStepper Stage
Component Panel Screenshot

The code

The code is fairly minimal, and we encourage the reader to look up details of the properties referenced in the Flash documentation. We will include general comments in the code to explain what is going on.

// Set slider width to match textbox width

slAlpha.width = txtOutput.width;

 

// Set slider position to be 15 pixels beneath the textbox

slAlpha.move(txtOutput.x, txtOutput.y + txtOutput.height + 15);

 

// Set maximum, minimum, and starting values of the slider

slAlpha.minimum = 0;

slAlpha.maximum = 100;

slAlpha.value = 100;

 

// Set interval for slider tick marks

slAlpha.tickInterval = 10;

 

// Set snap interval to make the slider values always be multiples of 2

slAlpha.snapInterval = 2;

 

// Change the following to be "false" to see what effect this has

slAlpha.liveDragging = true;

 

// Set numeric stepper width

nsAlpha.width = 50;

 

// Set stepper position to be 25 pixels to the right of the textbox

nsAlpha.move(txtOutput.x + txtOutput.width + 25,txtOutput.y);

 

// Set maximum, minimum, and starting values of the stepper

nsAlpha.minimum = 0;

nsAlpha.maximum = 100;

nsAlpha.value = 100;

 

// Set stepSize to make the stepper values change by 2's

nsAlpha.stepSize= 2;

 

// Add listener for Slider changing. The function sliderChanged handles the event.

slAlpha.addEventListener(Event.CHANGE, sliderChanged);

 

function sliderChanged(evt:Event):void {

// Set alpha value of txtOutput to be 1/100 the value of slAlpha.

txtOutput.alpha = slAlpha.value/100;

 

// Update txtOutput to show its current alpha value.

txtOutput.text = "alpha = " + (slAlpha.value/100).toFixed(2);

 

// Update nsAlpha to match the value of slAlpha.

nsAlpha.value = slAlpha.value

}

 

// Add listener for NumericStepper changing. The function stepperChanged handles the event.

nsAlpha.addEventListener(Event.CHANGE, stepperChanged);

 

function stepperChanged(evt:Event):void {

// Set alpha value of txtOutput to be 1/100 the value of nsAlpha.

txtOutput.text = "alpha = " + (nsAlpha.value/100).toFixed(2);

 

// Update txtOutput to show its current alpha value.

txtOutput.alpha = nsAlpha.value/100;

 

// Update slAlpha to match the value of nsAlpha.

slAlpha.value = nsAlpha.value;

}

Another example

You can find another example of using the Slider component in another simple How-To: Flash AS3 Slider Component in Action: Filling Sectors of a Circle, in which sectors of a circle are filled when slider is dragged.

Back to AS3 How To and Tips              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.