Sizing the buttons on the NumericStepper

So your working on a new RIA in Flash and you want to use the built in NumericStepper, or any other Flash component for that matter but you aren’t happy with the skin. You’ve already seen Customizing the NumericStepper component by Adobe and you’re ready to move past changing the color of the component and want to update the buttons. Every time I updated the component skin after it has been added to the Library in Flash and tested the Movie, the smaller button graphics I created get stretched and distorted. It was always 21 pixels wide and 12 pixels tall! The Adobe documentation on the NumericStepper didn’t provide any help in resizing these buttons that control the increase and decrease for the NumericStepper component.

What you need to do is open up the source and take a look to figure out what was going on. I found the source files here C:\Program Files (x86)\Adobe\Adobe Flash CS4\Common\Configuration\Component Source\ActionScript 3.0\User Interface\fl\controls\NumericStepper.as on my system. I found out what was going wrong by doing a quick search for that pesky 21 pixel width and found my answer starting on line 527.

override protected function configUI():void {
	super.configUI();

	upArrow = new BaseButton();
	copyStylesToChild(upArrow, UP_ARROW_STYLES);
	upArrow.autoRepeat = true;
	upArrow.setSize(21, 12);
	upArrow.focusEnabled = false;
	addChild(upArrow);

	downArrow = new BaseButton();
	copyStylesToChild(downArrow, DOWN_ARROW_STYLES);
	downArrow.autoRepeat = true;
	downArrow.setSize(21, 12);
	downArrow.focusEnabled = false;
	addChild(downArrow);

	inputField = new TextInput();
	copyStylesToChild(inputField, TEXT_INPUT_STYLES);
	inputField.restrict = "0-9\\-\\.\\,";
	inputField.text = _value.toString();
	inputField.setSize(21, 24);
	inputField.focusTarget = this as IFocusManagerComponent;
	inputField.focusEnabled = false;
	inputField.addEventListener(FocusEvent.FOCUS_IN, passEvent);
	inputField.addEventListener(FocusEvent.FOCUS_OUT, passEvent);
	addChild(inputField);

	inputField.addEventListener(Event.CHANGE, onTextChange, false, 0, true);
	upArrow.addEventListener(ComponentEvent.BUTTON_DOWN, stepperPressHandler, false, 0, true);
	downArrow.addEventListener(ComponentEvent.BUTTON_DOWN, stepperPressHandler, false, 0, true);
}

Ah ha! They set the size of the buttons when the component is initialized on the stage. You can’t edit this file to solve your problem though you’ll need to extend the fl.controls.NumericStepper class and override the configUI function to change the size of your buttons. I suspect there are several other instances of hard-coded component sizes in the Flash component library but you just need to look to the source they provided to extend the components to your liking.