Flex: Modify an embedded icon and use it in a button?

Question

Just that, if you embed an icon:

[Embed(source='icons/checkmark.png')]
private static var CheckMark:Class;

You end up with a dynamic class. You can pretty easily assign the icon to a button at runtime by calling the setStyle method:

var btn:Button = new Button();
btn.setStyle("icon", CheckMark);

But what if you wanted to alter the icon at runtime, like changing it's alpha value or even redrawing pixels, before assigning it to the button?

So far I can't find a satisfactory answer...

Answer 1

This is the only answer I could find that seemed close: Dynamic Icons (example with View Source)

His solution involves a custom "DynamicIcon" class which is used in the button's icon setting, and a custom Button class which adds one method to the Button class to draw dynamic icons.

The end result is that you are able to send BitmapData to the DynamicIcon class, which will show up in the button. So, embed your image, instantiate your asset class, get the bitmapasset and modify it however you need to and send the bitmapData to the icon.

It's an interesting problem and it seems like there should be an easier solution, but this works without a lot of hassle.

Answer 2

The way I'd solve this is to implement a programmatic skin class that draws the icon itself manually. There's probably more work you'll have to do to ensure the button calculates the correct size as if it has an icon even though it doesn't. You may have to poke through the Button source code to look at how the reference to the icon is stored.

I love just creating programmatic skins that do exactly what I want and then using interesting CSS declarations to modify states - for instance:

button.setStyle("customIconAlpha", .4);

and then of course the skin or the custom button class would have:

var alpha:Number = getStyle("customIconAlpha") as Number;

(not sure if you have to typecast that one)

Answer 3

The big problem I found with programmatic skins is that the button refuses to measure the width/height. I easily got around this by overriding the get methods for each:

override public function get width():Number { return WIDTH; } override public function get height():Number { return HEIGHT; }

In my case I needed to modify buttons in a TabNavigator, hence no easy way to subclass the button. Thankfully, the parent of each skin is the button, so using static methods within your skin, you can identify the instance of the Button to which the icon skins belong.

If you're using the cover-all "icon" style, a new skin object will be created for each state. So you'll need to keep this in mind when changing the state of the icons.