NumericStepper Component

NumericStepper Component

Flash CS4 ActionScript 3.0 Tutorial


How to Add Pre-Built NumericStepper Component to Your Flash File



Flash ships with several Components. Components are pre-packaged objects that allow you to quickly add elements, such as scroll bars, text boxes and buttons.

Components can be added to the stage using the drag and drop method from the Components panel or added with ActionScript. The Component parameters are altered with the Component Inspector or ActionScript.

This example shows how to add a NumericStepper Component using the drag and drop method and with ActionScript. It also describes changing the Component parameters with the Component Inspector and ActionScript. To talk to a Component with ActionScript, it must first be added to the Library. When the NumericStepper is added to your project, NumericStepper and TextInput symbols are added to the Library.

A Numeric Stepper increases or decreases it's value each time you press the up or down arrow.

Components are actually Movie Symbol objects regardless of the Component. If you are developing in ActionScript 2.0, you will see a different set of Components available.

For more information on the other Components, see topics, Button Component, CheckBox Component, ColorPicker Component, ComboBox Component, DataGrid Component, Label Component, List Component, ProgressBar Component, RadioButton Component, ScrollPane Component, Slider Component, TextArea Component, TextInput Component, TileList Component, UILoader Component and UIScrollBar Component.

Tutorial Elements

NumericStepper Component with instance name numericStepper01_mc


Step One

Open a new Flash document and add a new layer.

Step Two

Name the upper layer Actions and the lower one Content.

Step Three

Select the first frame of the Content layer and open the Components panel (Window > Components).

Step Four

Double-click the NumericStepper Component icon to a add a NumericStepper to the center of the stage. The NumericStepper and it's assets are also added to the Library.

Step Five

With the NumericStepper selected open the Properties panel and change it's x and y settings to 100 and 100.

Step Six

With the NumericStepper still selected, open the Component Inspector (Window > Component Inspector).

Step Seven

Click the blank area (in the Value column) next to the word value and change the value to 0, then press Enter. Now the NumericStepper will start with zero instead of one.

Step Eight

Click the blank area (in the Value column) next to the word maximum and change the value to 20, then press Enter. Now the NumericStepper will start with 0 and increment to 20 maximum.

Step Nine

With the NumericStepper still selected, open the Properties panel and assign it an instance name of numericStepper01_mc..

Step Ten

Open the ActionScript panel for the only keyframe in the Actions layer by Option double-clicking (PC - Alt double-clicking) the keyframe

Step Eleven

Copy/Paste the following code in the ActionScript Panel:

import fl.controls.NumericStepper;

var numericStepper02_mc:NumericStepper=new NumericStepper();






numericStepper01_mc.addEventListener(Event.CHANGE, onStep01);

function onStep01(e:Event):void {



numericStepper02_mc.addEventListener(Event.CHANGE, onStep02);

function onStep02(e:Event):void {



Step Twelve

Click the Auto Format button to format the code

Step Thirteen

Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). The two pull-down NumericSteppers appear on the stage. By click one of the up or down arrows on either stepper, the new value displays in the Output panel.

Dissecting the Code

The first line of the code at Step Eleven imports the code necessary to talk to the NumericStepper class. Line two establishes a new NumericStepper variable named numericStepper02_mc. This is the second stepper that we are adding to the stage with ActionScript. It's starting value, maximum value and location are set with the next four lines of code.

Line seven adds the numericStepper02_mc to the stage.

Line eight adds an event listener to numericStepper01_mc. Whenever a the stepper's value is changed, the function onStep01 is run. The function displays the new value in the Output panel.

The final block of code repeats the process for the second NumericStepper.

More Component Options

In this example we showed how to change the NumericStepper initial value and maximum value. You can use this same method to change the other NumericStepper values shown in the Component Inspector (i.e., enabled, minimum, stepSize and visible). You can also alter the size to accommodate larger numbers by changing the width property (i.e., numericStepper01_mc.width=200;).