Using NumericStepper - Flash CS3 component

**Flep** · 27-11-07

Today I would like to introduce the NumericStepper component to carry on the series of tutorials on how to use the Flash CS3 components.
Normally this component is used in application containing lots of numerical data or also is useful when developing forms to send data.
In this tutorial, I will used it applied to a MovieClip using Actionscript 3.0 .

I create a FLA and I save it as "main.fla" into which I have a MovieClip of square shape with an instance name "clip_mc".
I create the Document Class, an AS file saved as "Main.as", implemented the following way:

Code:

package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	import fl.controls.NumericStepper;
	
	public class Main extends MovieClip
	{
		private var num_x:NumericStepper;
		private var num_y:NumericStepper;
		private var num_w:NumericStepper;
		private var num_h:NumericStepper;
		
		public function Main()
		{
			init();
			initSteppers();
		}
		
		private function init():void
		{
			stage.frameRate=31;
		}
		
		private function initSteppers():void
		{
			num_x=new NumericStepper();
			num_x.move(30,30);
			num_x.minimum=0;
			num_x.maximum=stage.stageWidth;
			num_x.value=clip_mc.x;
			num_x.stepSize=1;
			addChild(num_x);
			
			num_y=new NumericStepper();
			num_y.move(num_x.x+num_x.width,30);
			num_y.minimum=0;
			num_y.maximum=stage.stageHeight;
			num_y.value=clip_mc.y;
			num_y.stepSize=1;
			addChild(num_y);
			
			num_w=new NumericStepper();
			num_w.move(num_y.x+num_y.width,30);
			num_w.minimum=clip_mc.width/2;
			num_w.maximum=clip_mc.width*2;
			num_w.value=clip_mc.width;
			num_w.stepSize=1;
			addChild(num_w);
			
			num_h=new NumericStepper();
			num_h.move(num_w.x+num_w.width,30);
			num_h.minimum=clip_mc.height/2;
			num_h.maximum=clip_mc.height*2;
			num_h.value=clip_mc.height;
			num_h.stepSize=1;
			addChild(num_h);
			
			num_x.addEventListener(Event.CHANGE,moveX);
			num_y.addEventListener(Event.CHANGE,moveY);
			num_w.addEventListener(Event.CHANGE,resizeW);
			num_h.addEventListener(Event.CHANGE,resizeH);
		}
		
		private function moveX(evt:Event):void
		{
			clip_mc.x=evt.target.value;
		}
		
		private function moveY(evt:Event):void
		{
			clip_mc.y=evt.target.value;
		}
		
		private function resizeW(evt:Event):void
		{
			clip_mc.width=evt.target.value;
		}
		
		private function resizeH(evt:Event):void
		{
			clip_mc.height=evt.target.value;
		}
	}
}

The result is the following:

Let us analyse the code

I import the needed classes
import flash.display.MovieClip;
import flash.events.Event;
import fl.controls.NumericStepper;

Properties
4 variables type NumerciStepper
private var num_x:NumericStepper;
private var num_y:NumericStepper;
private var num_w:NumericStepper;
private var num_h:NumericStepper;

Constructor function
I call the method init()
init();
I call the method initSteppers
initSteppers();

Methods
init();
I impost the frame rate
stage.frameRate=31;

initSteppers();
I create the 4 NumericStepper, assign a position, a minimal value, a maximal value, an initial value, a step value (the added value at each click) and I add them to the stage
num_x=new NumericStepper();
num_x.move(30,30);
num_x.minimum=0;
num_x.maximum=stage.stageWidth;
num_x.value=clip_mc.x;
num_x.stepSize=1;
addChild(num_x);

num_y=new NumericStepper();
num_y.move(num_x.x+num_x.width,30);
num_y.minimum=0;
num_y.maximum=stage.stageHeight;
num_y.value=clip_mc.y;
num_y.stepSize=1;
addChild(num_y);

num_w=new NumericStepper();
num_w.move(num_y.x+num_y.width,30);
num_w.minimum=clip_mc.width/2;
num_w.maximum=clip_mc.width*2;
num_w.value=clip_mc.width;
num_w.stepSize=1;
addChild(num_w);

num_h=new NumericStepper();
num_h.move(num_w.x+num_w.width,30);
num_h.minimum=clip_mc.height/2;
num_h.maximum=clip_mc.height*2;
num_h.value=clip_mc.height;
num_h.stepSize=1;
addChild(num_h);
I add to each NumericStepper a listener to the event Event.CHANGE which will call the respective functions
num_x.addEventListener(Event.CHANGE,moveX);
num_y.addEventListener(Event.CHANGE,moveY);
num_w.addEventListener(Event.CHANGE,resizeW);
num_h.addEventListener(Event.CHANGE,resizeH);

moveX(evt:Event):void
I move the clip_mc x based on the value of the correspondent NumericStepper (retrieved with evt.target which is the numeric stepper with the changed value and then .value, its value)

moveY(evt:Event):void
I move the clip_mc y based on the value of the correspondent NumericStepper

resizeW(evt:Event):void
I change the clip_mc width based on the value of the correspondent NumericStepper

resizeY(evt:Event):void
I change the clip_mc height based on the value of the correspondent NumericStepper

See you soon!