Sizing the buttons on the NumericStepper

By | January 5, 2010

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\ 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 {

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

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

	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);

	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.

2 thoughts on “Sizing the buttons on the NumericStepper

  1. ts

    hi, thx for the helpful tip. is it possible to override an already overridden function? when I copy the entire overridden function above and place into the extended class I created I can change the arrow size but then errant images and numbers show up.

  2. sosuke Post author

    No compile errors? You can always extend and override functions that have already been overridden just make sure to call super if you need to run what was inside the original function.

Leave a Reply

Your email address will not be published. Required fields are marked *

Comment moderation is enabled. Your comment may take some time to appear.

This site uses Akismet to reduce spam. Learn how your comment data is processed.