Perhaps one of the easiest components to overlook in Flash MX 2004 is tucked away in the UI Components section of the Components Panel, and carries the uninteresting name NumericStepper. Perhaps you're developing experimental effects and require on-screen controls to alter dynamic feedback within those effects. Maybe you're building complex forms that allow users to quickly select numerical data. Either way, it's time to cast your eye over the NumericStepper component.

Let's look at an example. All the dynamics of the movie pictured below are controlled with instances of the NumericStepper.

NumericStepper is an extremely valuable component, but at its most basic, it's designed to step up or down through a series of numbers incrementally. There are several properties of the component that we can get and set. These extremely useful properties, which we'll explore in this article, are as follows:

• minimum: the minimum value of the component
• maximum: the maximum value of the component nextValue: the next incremental value of the component (read-only)
• previousValue: the previous incremental value of the component (read-only)
• stepSize: the incremental change value for the component
• value: the currently selected value of the component
  Potential uses for the NumericStepper component include:
• used as form elements to facilitate rapid numeric value selection
• used as date selection elements (months, years etc)
• used in experimental applications to control complex values

While you can accomplish similar effects using the ComboBox component, the NumericStepper component allows you to increment up or down a selection rapidly via the 'up' and 'down' arrows, or the up and down keys on the keyboard. Using the ComboBox, you need to click the ComboBox, wait for it to display the options, then select the desired value from a dropdown.

The NumericStepper solution is obviously much quicker than the ComboBox, and its capabilities allow NumericStepper to be implemented and used easily and effectively in some unique applications.

Numeric Stepper Basics
To get a feel for this component, let's add a single instance of NumericStepper to the stage. We'll then populate some dynamic text boxes with a couple of the NumericStepper component's properties.

The source FLA file for this example is called NumericStepperBasics.fla and can be found in the downloadable code archive accompanying the online version of this article at http://mxdj.sys-con.com.

Setting the Stage

1. Start by creating a new Flash document. Accept the default width, height and frame rate settings.
2. Rename the default layer Actions and add another layer beneath it called Components. Drag an instance of the NumericStepper component from the UI Components section of the Components panel into the first frame of the Components layer. Name the instance StepperMain.
3. Select the NumericStepper component instance and add the following values within the Property Inspector: maximum:100, minimum:0; stepSize:5, value:10. Note: Here, we've added the component's property values via the Property Inspector, but we can also add these values programmatically via ActionScript if we wish (more on this later).
4. Create two dynamic text boxes one above the other. Name the instances previousTextBox and nextTextBox.
   When we click the NumericStepper component, these text boxes will be populated with the next and previous values of the component. We'll add the ActionScript that achieves this in a moment.
5. Add relevant labels to the component and text boxes if you wish, as shown in the above screenshot.

Adding the ActionScript

1. With the first frame of the Actions layer selected, add the following code within the Actions Panel:

   
   var palletteArray = new Array ();
   palleteArray = ["0x7FAAD4", "0xFFDF7F"];
   function setTheme() {
    _global.style.setStyle("themeColor", palleteArray[0]);
    _global.style.setStyle("backgroundColor", palleteArray[1]);
    _global.style.setStyle("fontSize", 11);
    _global.style.setStyle("fontWeight", "bold");
    _global.style.setStyle("color", palleteArray[0]);
   }
   setTheme(); // Called at startup
   
   var stepsListener = new Object();
   stepsListener.change = function() {
    populateTextBoxes();
   };
   stepperMain.addEventListener("change", stepsListener);
   
   function populateTextBoxes() {
    if ((stepperMain.value<stepperMain.maximum)
    && (stepperMain.value>stepperMain.minimum)) {
      nextTextBox.text = stepperMain.nextValue;
      previousTextBox.text = stepperMain.previousValue;
    }
   }
   

   The first thing that we are doing here is creating a new array called 'palletteArray', which we populate with a couple of color codes that we've selected for our interface: a nice pastel yellow (#7FAAD4) and a complementary blue (#FFDF7F).

   Note: Creating an array of colors makes it much easier to switch those colors if we need to: we simply change the values of different array members. This solution allows us to avoid having to search through the code, changing individual hexadecimal values as we find them.

   We then have a function called setTheme(), which is called at startup. It sets the theme for the NumericStepper component (or any other Flash MX 2004 component on the stage) using the palletteArray array we set up earlier.

   We then create a new listener object that listens for a change in the value of the NumericStepper component. When a change is detected, the populateTextBoxes() function is called. It pushes the nextValue and previousValue properties of the component to the relevant dynamic text boxes.

2. Save the Flash document to a location of your choice and preview your work in Flash.