In this tutorial you will learn how to use the Numericstepper component in Actionscript 3. The Numericstepper component displays a series of numbers which step up and down incrementally. This component contains an input text field and two arrow buttons that step through the values. When the arrow buttons are selected the numbered value can either increase or decrease incrementally, until the minimum or maximum value is reached. The Numeric stepper uses the change event to detect when a change has occurred. For more information checkout the AS3 NumericStepper component reference.
I will be showing a brief overview of the stepper components properties, and then I will show a practical example of this component.
Brief overview
1. Open up a Flash AS3 file.
2. Select Window > Components and drag a NumericStepper component onto the stage. After select the text tool and drag a dynamic text field above the component as show below.
3. Give the following instance names for the component and text field accordingly: my_ns and my_text.
4. On timeline create a new layer called Action then open up the Actions panel (F9) and enter the following code:
This code basically increases and decreases the number value on the stepper and text
field using the ‘value’ property.
my_ns.addEventListener(Event.CHANGE, updateText);
function updateText(event:Event):void{
my_text.text = "The NumericStepper value is " + my_ns.value;
}
You can set the maximum and minimum value on the stepper by using the
‘maximum’ and ‘minimum’ properties.
my_ns.minimum = 5;
my_ns.maximum = 50;
my_ns.addEventListener(Event.CHANGE, updateText);
function updateText(event:Event):void{
my_text.text = "The NumericStepper value is " + my_ns.value;
}
You can set the next unit change of the stepper using the ‘stepSize’ property.
my_ns.minimum = 5;
my_ns.maximum = 45;
my_ns.stepSize = 15;
my_ns.addEventListener(Event.CHANGE, updateText);
function updateText(event:Event):void{
my_text.text = "The NumericStepper value is " + my_ns.value;
}
Checkout the AS3
NumericStepper component reference for a list of the other properties.
Practical example Step 1 Open a new Flash AS3 file.
Select the Oval tool with any colour and drag an oval shape on the stage like below.
Step 2Convert your oval shape into movie clip (
F8) with the registration point at the top left and give the instance name: my_oval.
Step 3 On the timeline insert a new layer called “Components” then select
Windows > Components and drag three stepper components on the stage. Now select the Text tool with static text and type the following message above the components.
Step 4 Give each of the components the following instance names accordingly: my_x and my_y.
Step 5 On the timeline insert a new layer called “Actions”. Then open up the Actions panel and enter the following code:
//Sets the minimum (x) and maximum (x) values of the stepper,
//then sets the ovals position to the stepper.
my_x.minimum=0;
my_x.maximum=stage.stageWidth - my_oval.width;
my_x.value=my_oval.x;
//Sets the minium (y) and maximum (y) values of the stepper,
//then sets the ovals position to the stepper.
my_y.minimum=0;
my_y.maximum=stage.stageHeight - my_oval.height;
my_y.value=my_oval.y;
//Event listeners to for the steppers.
my_x.addEventListener(Event.CHANGE, moveXOval);
my_y.addEventListener(Event.CHANGE, moveYOval);
//This moves the oval in the x direction according to the stepper.
function moveXOval(event:Event):void{
my_oval.x=event.target.value;
}
//This moves the oval in the y direction according to the stepper.
function moveYOval(event:Event):void{
my_oval.y=event.target.value;
}
Step 6 Test your steppers
Ctrl + Enter. Now change the values of the steppers and you should notice the oval shape move.
You should now be able to use the Numericstepper component in Actionscript 3
