PreviousNext

Using the NumericStepper component

The NumericStepper can be used anywhere you want a user to select a numeric value. For example, you could use a NumericStepper component in a form to allow a user to set their credit card expiration date. In another example, you could use a NumericStepper to allow a user to increase or decrease a font size.

NumericStepper parameters

The following are authoring parameters that you can set for each NumericStepper component instance in the Property inspector or in the Component Inspector panel:

value sets the value of the current step. The default value is 0.

minimum sets the minimum value of the step. The default value is 0.

maximum sets the maximum value of the step. The default value is 10.

stepSize sets the unit of change for the step. The default value is 1.

You can write ActionScript to control these and additional options for NumericStepper components using its properties, methods, and events. For more information, see NumericStepper class.

Creating an application with the NumericStepper component

The following procedure explains how to add a NumericStepper component to an application while authoring. In this example, the stepper allows a user to pick a movie rating from 0 to 5 stars with half-star increments.

To create an application with the Button component, do the following:

  1. Drag a NumericStepper component from the Components panel to the Stage.
  2. In the Property inspector, enter the instance name starStepper.
  3. In the Property inspector, do the following:
    • Enter 0 for the minimum parameter.
    • Enter 5 for the maximum parameter.
    • Enter .5 for the stepSize parameter.
    • Enter 0 for the value parameter.
  4. Select Frame 1 in the Timeline, open the Actions panel, and enter the following code: 
    movieRate = new Object();
movieRate.change = function (eventObject){  
  starChart.value = eventObject.target.value;
}
starStepper.addEventListener("change", movieRate);

    The last line of code adds a change event handler to the starStepper instance. The handler sets the starChart movie clip to display the amount of stars indicated by the starStepper instance. (To see this code work, you must create a starChart movie clip with a value property that displays the stars.)

PreviousNext