Sunday, October 26, 2008

Flash NumericStepper : Setting the Background Color

Have you ever wanted to customize the appearance of the NumericStepper component in Flash (it's pretty easy in Flex). Specifically I wanted to change the color of the text input area. Looking at the NumericStepper class there is some mention of the upSkin and I tried setting this the way I would normally set a button upSkin but with no effect. So I started looking into how the component is constructed. It shouldn't surprise you to find out that the text in the NumericStepper uses the TextInput component. You can get a reference to this object by using the NumericStepper textField property. The next problem is that the TextInput component offers no direct way to change it's background. It turns out that TextInput uses a TextField to display it's text. You can get a reference to this object using the TextInputs textField property. Consequently to change the background color of a NumericStepper's text you need to access it's textFields textField. It looks like this:

myStepper.textField.textField.background = true;
myStepper.textField.textField.backgroundColor = 0x0F1A2F;

What makes this confusing for me is that the first textField returns a reference to a TextInput and then the second textField returns a reference to a TextField. There may be an easier way to do this and I hope to hear what it is. Perhaps I'm missing something regarding upSkin?

1 comment:

Jase said...

Excellent mate!

was tearing my hair out trying to disable the silly caret obscuring the text with .selectable,& textField.textField works a treat,thx heaps....