How to make transparent background of a Flex button

actionscript-3apache-flexflex4transparent

I want to make a Flex button that has it's background transparent in order to apply css to the page and affecting the flash.

I tried, but with no luck:

<mx:Button skin="{null}" x="0" y="0" label="Submit"/>

Best Answer

When using a Spark Button, you can apply a custom skin that leaves out all the chrome.
You can apply a custom skin like this:

<s:Button label="Submit" skinClass="TransparentButtonSkin"/>

@Panciz' solution will probably work, but the skin can be made much more lightweight by simply leaving out all the components that you don't need.

<!--TransparentButtonSkin.mxml-->
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   alpha.disabled="0.5">

    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>

    <s:states>
        <s:State name="up"/>
        <s:State name="over"/>
        <s:State name="down"/>
        <s:State name="disabled"/>
    </s:states>

    <s:Rect id="hitZone" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:SolidColor alpha="0"/>
        </s:fill>
    </s:Rect>

    <s:Label id="labelDisplay" left="0" right="0" top="0" bottom="0"
             horizontalCenter="0" verticalCenter="0"
             textAlign="center" maxDisplayedLines="1" verticalAlign="middle"/>

</s:SparkButtonSkin>

Notice the hitzone transparent graphic: that is necessary because otherwise you would click through the transparent section of the Button.

Related Topic