Flash's Hidden Gems: The NumericStepper Component

Adding the ActionScript

It's now time to populate the components with the values we want for the month and year. When the values in either of the component instances change, the selected date is pushed to the Output Panel.

1. Select the first frame of the 'Actions' layer and add the following code within the Actions Panel:

Note: Code highlighted in bold has altered from the previous example.

var monthArray = new Array();  
monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];  
 
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();  
 
var stepsListener = new Object();  
stepsListener.change = function() {  
 pushDate();  
};  
stepperYear.addEventListener("change", stepsListener);  
stepperMonth.addEventListener("change", stepsListener);  
 
function pushDate() {  
 trace("The selected year is: "+stepperYear.value+  
   "; the selected Month is: "+monthArray[stepperMonth.value-1]);  
}  
function populateYearStepper() {  
 var now = new Date();  
 stepperYear.minimum = now.getUTCFullYear();  
 stepperYear.maximum = now.getUTCFullYear()+10;  
 stepperYear.stepSize = 1;  
 stepperYear.value = now.getUTCFullYear();  
}  
populateYearStepper();  
function populateMonthStepper() {  
 var now = new Date();  
 stepperMonth.minimum = 1;  
 stepperMonth.maximum = 12;  
 stepperMonth.stepSize = 1;  
 stepperMonth.value = now.getUTCMonth()+1;  
}  
populateMonthStepper();

Initially, we create a new array called monthArray, which holds the names of the months of the year; we will use this later in the example to get month names from the pushDate() function.

Note that in this example, we tie both instances of the component to the same listener object. Whenever the value of either instance changes, the pushDate() function is called.

stepperYear.addEventListener("change", stepsListener);  
stepperMonth.addEventListener("change", stepsListener);

We have two functions in this example (populateYearStepper(), and populateMonthStepper()), both of which are called at startup. They dynamically populate the stepperYear and stepperMonth NumericStepper instances, respectively.

The populateYearStepper() function creates a new date object, then pushes the minimum, maximum, stepSize and value properties into the stepperYear component instance using various iterations of the getUTCFullYear() method. This produces a minimum value, which is the current year, and a maximum value, which is the current year plus 10. It sets the step size to 1 and the initial value of the NumericStepper instance to the current year.

A similar process occurs with the populateMonthStepper() function, which populates the stepperMonth instance with the month numbers (1-12). It then sets the initial value to the current month using the following code:

now.getUTCMonth()+1

The getUTCMonth() method returns an integer between 0 and 11, indicating the month value in the Date object (January will appear as 0, December as 11, etc.). We add 1 to this to obtain the number we wish to display in the NumericStepper.

When either of the values of the NumericStepper instances change, the pushDate() function is called. We use this function to trace out the selected date.

The year is simple enough to trace out, as we can easily get the value of the stepperYear NumericStepper instance using stepperYear.value.. But, in order to convert the zero-based month value into a month name, we need to look up its position within the monthArray array we initiated earlier.

trace("The selected year is: "+stepperYear.value+  
 "; the selected Month is: "+monthArray[stepperMonth.value-1]);

2. Save your Flash document and preview your work.

   When you click on either of the NumericStepper instances, the pushDate() function is called and the selected month and year are traced out to the Output Panel in a convenient manner.

There are multiple iterations and uses of the NumericStepper component that can be derived from this example, so I suggest that you experiment and see how you can apply this component in your own projects.

Experimental Control

As we've already mentioned, another interesting application of the NumericStepper component is to use it as a control for experimental effects, such as the one shown in the screenshot at the beginning of this tutorial.

In this example, we'll use the component dynamically to create multiple dynamic iterations of text fields via the createEmptyMovieClip() and createTextField() method.

The value property of the NumericStepper instance is retrieved and used to iterate through a loop, which creates a series of text fields. On each subsequent change of the component's value, the screen is redrawn with the number of text fields reflecting the value within the component.

The source FLA file for this example is called NumericStepperDynamicText.fla and can be found in the code archive for this article.

Note: The code archive includes another example of this FLA in which the dynamic creations are placed randomly on the stage. The file's named NumericStepperDynamicRandomText.fla

While this example shows how to dynamically control the creation and destruction of Movie Clips and text fields, I'm going to skim through the dynamic creation code. Instead, I'll concentrate on the logic flow through the example so you can get on with dissecting the example and modifying it for your needs.

Setting the Stage

1. Create a new Flash document with default properties and rename the default layer Actions. Add below it a layer called Components.


2. 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. With the NumericStepper component instance selected, add the following values within the Property Inspector: maximum:100, minimum:0; stepSize:5, value:10.

   From a setup point of view, that's all we need to do. The rest of the example is controlled via ActionScript.

Adding the ActionScript

1. Select the first frame of the Actions layer and 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();  
 
var stepsListener = new Object();  
stepsListener.change = function() {  
 removeDeadClips();  
 createTextBoxes();  
};  
stepperMain.addEventListener("change", stepsListener);  
 
function createTextBoxes() {  
 if (stepperMain.value>stepperMain.minimum) {  
   var yPos = 30;  
   var yStart = stepperMain._y;  
   var yStep = 20;  
   var xStart = 150;  
   var textMC = _root.createEmptyMovieClip("textMC", 10);  
   for (var i=1; i<=stepperMain.value; i++) {  
     var field = textMC.createTextField("sampleText"+i, i, xStart, yStart+yPos, 200, 25);  
     field.multiline = true;  
     field.wordWrap = true;  
     field.border = false;  
     //Format Text  
     formatText(field, i);  
     var yPos += yStep;  
   }  
 }  
}  
createTextBoxes();  
 
function formatText(field, number) {  
 var textFormatter = new TextFormat();  
 textFormatter.color = palleteArray[0];  
 textFormatter.bullet = false;  
 textFormatter.underline = false;  
 textFormatter.font = "_sans";  
 textFormatter.size = 12;  
 textFormatter.bold = true;  
 field.text = "Dynamic Text Creation #: "+number;  
 field.setTextFormat(textFormatter);  
}  
 
function removeDeadClips() {  
 for (z in _root) {  
   if (typeof (_root[z]) == "movieclip") {  
     _root[z].removeMovieClip();  
   }  
 }  
}

As before, we set up the change event handler. This time, it fires two functions (removeDeadClips() and createTextBoxes()) when the value of the NumericStepper component changes.

After setTheme(), the first function to be called at startup is createTextBoxes(), which takes the initial value of the stepperMain instance, and creates an empty movie clip. It then iterates through a for loop using the stepperMain.value property as the limiting value.

As we iterate through the for loop, a series of text fields are created and formatted using the formatText() function. This sets general properties of the text field, including color from the palletteArray array, and adds some simple dynamic text.

When the stepperMain NumericStepper instance value is changed, the removeDeadClips() function is called from the event handler. It removes the empty movie clip we created to hold the text fields.

Note: While only a single Movie Clip is created dynamically on the stage, and we could simply remove it using removeMovieClip(), I chose to use the function in this example. This approach provides extra benefits in that, if I wish to create multiple Movie Clips later on, I can simply alter the function to suit my needs, and point it at a particular level or nested Movie Clip instance.

After the stage has been cleared up, we call the createTextField() function again, to create the empty Movie Clip and dynamic text fields.

2. Save your Flash document and preview your work.

   It's as simple as falling off a bike! This example shows the basics of using the component as a starting point that triggers dynamic object creation.

Just the Beginning…

While the examples presented in this tutorial have shown a few different uses for the NumericStepper component, the possibilities really are without limits. Use your imagination and the skills you've developed here, and you can create some interesting applications of the component.

And when you do create some interesting applications using the component, don't be shy about sharing them with the rest of the SitePoint community. We're looking forward to seeing what you've done!