scaling text in label of LabelButton

[ryryguy]

(This question is a little hard to explain, bear with me...)

Another question about the text element in a component. This time, the label of a LabelButton component.

So, when you set an image to be used as a skin style (like "upSkin") on a Button, the skin will be scaled to match the size of the Button. For example, say the skin image, as a symbol in the library, has a size of 50x50. If you use it as a skin on a 100x100 button, it gets blown up to 100x100.

You can embed a piece of text in that skin, and it too will scale to fit the Button component size.

On the other hand, if you use the built-in "label" property of a LabelButton, the text created by it does not scale to the component. If you set the textFormat to 11 point text, the 11 point text is what you'll see, no matter what size Button you put it on - 50x50, 200x200, whatever.

This actually makes some sense - you're specifying a specific font size, so why should it scale? But what I want is to achieve the effect you get by embedding text in the skin, so the text scales with the skin, but I also want dynamic control over the text, like you get with the label property. How can this be achieved?

That's basically the question... but I'll give more details about why I want this effect. My artist is using the same general shape of button, with the same font and other text properties, for a variety of different button instances. He has been making these as a single symbol per button with the text embedded in the button, and I'm using them as skins. For example, we have "OKButton_upSkin", "CancelButton_upSkin", "SaveButton_upSkin", etc, in a shared library.

This works great for reusing those buttons in different dialogs, where one might have a 100x20 "OK" button and another an 80x15 "OK" button. Everything scales fine from that single symbol.

However, we are starting to add other states to the buttons. So now we are faced with the prospect of "OKButton_overSkin", "CancelButton_overSkin", etc. As the number of buttons and styles increases it seems like it will quickly get out of hand.

So, I'd like to be able to make a single "GenericButton_upSkin", "GenericButton_overSkin", etc. and just set "OK", "Cancel" on some dynamic text in the button, without losing the nice scalability provided by the skins with the baked-in text. Any solution or different approach would be greatly appreciated!

[ryryguy]

Well, I made a custom component that looks inside the skin for a dynamic text element named "label", and sets that. So basically it's my original skin-with-an-embedded-static-text, but changed to dynamic text and with code to set its value.

This is not a really elegant solution since you have to set up a special skin for it to work. But it does get the job done.

I did play with trying to override the scale of the LabelButton's existing label property, and got this to work to some extent. However, that thing's textField seems resistant to embedding fonts and adding drop shadow filters which are also required for my purposes. There's something weird about it or maybe someplace it gets its formats reset that I couldn't find.


package
{
import fl.controls.Button;

public class ScalingLabelButton extends Button
{
private var _scalingLabel:String;

[Inspectable(defaultValue="Label")]
public function get scalingLabel():String {
return _scalingLabel;
}

public function set scalingLabel(value:String):void {
_scalingLabel = value;
if (background)
{
var mySkin:* = background;
if( "label" in mySkin && mySkin.label.text != _scalingLabel )
{
mySkin.label.text = _scalingLabel;
//dispatchEvent(new ComponentEvent(ComponentEvent.LABEL_CHANGE));
}
}

//invalidate(InvalidationType.SIZE);
//invalidate(InvalidationType.STYLES);
}
override protected function drawBackground():void {
super.drawBackground();

var mySkin:* = background;
if( "label" in mySkin )
{
mySkin.label.text = _scalingLabel;
}
}

}
}