Flash's Hidden Gems: The NumericStepper Component

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

The main difference between the NumericStepper and ComboBox components, apart from the methods, properties and events, is to do with ease of use.

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 this article's downloadable code archive.

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.

Let's move on. Now, we'll add the ActionScript that allows us to see the component in action…

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.

   As you can see, clicking on the NumericStepper instance increments or decrements the values of the component, and pushes the next and previous values into the dynamic text areas.

   This example gave us a nice simple introduction to the component. We can now build on these foundations by creating more complex creations for use in your projects.

Date Selection

The source FLA file for this example is NumericStepperDates.fla.

This example is a little different as it uses the NumericStepper component to create simple date controls within the application. These date controls might be used within an online application form, or a Flash-driven blog-searching application. In this example, we'll just send the output of a function to the Output Panel.

Setting the Stage

We'll use some of the same core code that we used in the previous example and build upon that to create a different outcome; also in this example we will populate the NumericStepper component using ActionScript rather than hard-coding its contents via the Property Inspector.

1. Create a new Flash document with default properties and rename the default layer Actions. Below it, add a further layer called Components.


2. Drag 2 instances of the NumericStepper component from the UI Components section of the Components Panel into the first frame of the Components layer. Name the instances StepperYear and StepperMonth.


3. Add relevant text labels above each component (e.g. Select Year, Select Month).