11. Numeric Stepper Component
The Number Stepper is useful for letting the user select a numeric value
with known limits and a known step-size between choices. It is much better
to use a Numeric Stepper with a lower and upper limit than to use a textfield
and then tell the user that they entered the wrong value (too low/too
high). Here's a simple example showing you how to use this component.
- Start a new FLA and use the screenshot below as a guide when laying
out the movie in the latter steps.
- Create two new layers. Call the topmost one Actions and the other
two, Component and Fill.
- Drag a Numeric Stepper component on stage, into the Component layer.
Set its instance name and component parameters using the Property Inspector,
as shown below.
- (Optional; Eye-Candy) Create a light-gray fill in the Fill layer
to accentuate the 3D shadow of the component. Add a Static Text Field
to label the component.
- Enter the following code in the Actions layer.
// create event listener object for stepper
ageStepperListener = new Object();
// change event handler
ageStepperListener.change = function(eventObject)
{
var theStepper = eventObject.target;
var theValue = theStepper.value;
trace ("You just selected " + theValue );
}
// register the event listener
ageStepper.addEventListener("change", ageStepperListener);
- Test the movie. Click on the arrows of the Stepper and note the messages
that get traced out into the Output window. The code, in this case,
should be self-explanatory.
|
Download Source Files (5MB!) 
go to previous page