Making a flex button appear flat or transparent does not require any skinning – there are plenty of style options, and all we need to do is find the right setting.
This may sound trivial, since we can make any display object clickable – but since I find myself spending way too much time on this, its time to put this issue to rest.
The Flex framework button class (mx.Button) has a default skin – the halo button skin. I needed a button with no background or highlight – basically a clickable text. Simply setting the background alpha to zero seem to have no effect.
So since the halo skin is being shown anyway, lets try to remove it from the button tag in mxml:
<mx:Button skin='null' />This will result in a build error:
-
Initializer for ‘skin’: cannot parse value of type Class from text ‘null’.
To fix it, put the null inside curly brackets:
<mx:Button skin='{null}' />Alternatively, we can turn to CSS and define a style for the button:
.myButtonStyle { skin: ClassReference(null); }
Now just use the the style in the button:
<mx:Button id="myButton" styleName='myButtonStyle' />The same can be achieved in actionscript code with this line, placed in the script tag:
myButton.setStyle('skin', null);
Download the full source code here.
UPDATE:
For Flex 4, the Spark model requires skin so this approach will not work. Simply create a new spark skin for button and remove all drawing except for the label. Name the skin ‘TransparentButtonSkin’ and in your button set the skinClass the TransparentButtonSkin you just created.
Nice!
This saved me a lot of time figuring out how the button works.
The code does indeed make the button transparent, but it is no longer click-able.
The button is very much clickable, although the background isn’t.
This is meant as a quick way to create a text only button – if you need anything more, you’ll need to implement your own custom skin (much easier with the spark button in Flex 4).
You can still make the background clickable with the spark property of mouseEnabledWhereTransparent=”true”.
However, I have sometimes had problems getting that to work propertly. So I create a rect in the button skin, give it a fill color and then set the alpha to 0.01 so you cannot see it, but it does pick up the mouse click.