Search code examples
apache-flexbuttoniconsflash-builderskin

Creating Flex button skin with BitmapImage icons


I have been following a good tutorial about creating a Button skin that allows you to add different images:

http://brianackermann.wordpress.com/2010/05/06/flex-4-reusable-icon-button-skins/#expandSource

After a couple of minor changes it worked well, but when I use the same class, skin & images in another project the images always look blended or transparent. I have tried adjusting image blendmode settings and alpha in the skin, app and stylesheet.

The 2 green images should match, as should the white ones. The buttons are the blue squares:

https://i.sstatic.net/V8YZs.jpg

The background XX's are to show where the images should be opaque

(Edit, separating this part from post to avoid confusion after it was solved in comments): There was an error because the Label in my skin did not have an id=“LabelDisplay”. The button in the downloaded tutorial project did not need this. Once I added the id=“LabelDisplay” this part was solved.


Solution

  • In the IconButton skin was an array constant exclusions. Simply adding the id of the BitmapImage to this array caused the BitmapImage to be excluded from colorization by SparkSkin class:

    static private const exclusions:Array = ["labelDisplay","icon"];
    

    It displays correctly now.