Question

I attempted to build a Flex 4 skin for a Spark button, typical practice. I adjusted the colors and other styles to my liking, including using dot selectors to specify alternate colors and such during different states. However, these are all ignored when the button is disabled. Regardless of what I do, in the disabled state, my button always has the wrong color and is alpha’d to 0.5 (even if I specifically state that alpha.disabled=”1″). All the other skin states work as expected. What is going on here?

This is my custom skin. If it were working correctly, it would appear to have no shadow or highlight, and would be a gradient grey color. Instead, it appears as a 50% alpha version of the up state (shiny green).

<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minWidth="21" minHeight="21" alpha.disabled="1">

    <fx:Metadata>
        <![CDATA[ 
            [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="backgroundAndShadow" left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5">
        <s:filters>
            <s:DropShadowFilter blurX="5" blurY="5" blurX.down="3" blurY.down="3" alpha="0.5" distance="1" distance.down="0" angle="90" excludeFrom="disabled" />
        </s:filters>
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color.up="#00AD00" color="#007A00" color.disabled="#cccccc" />
                <s:GradientEntry color.up="#29FF29" color="#00F500" color.disabled="#bbbbbb" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <s:Rect id="highlight" left="1" right="1" top="1" height="50%" topLeftRadiusX="4" topLeftRadiusY="4" topRightRadiusX="4" topRightRadiusY="4" excludeFrom="disabled">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="#ffffff" alpha="0.8" />
                <s:GradientEntry color="#ffffff" alpha="0.3" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <s:Label id="labelDisplay"
             textAlign="center"
             horizontalCenter="0" verticalCenter="1" verticalAlign="middle"
             color="#ffffff" color.disabled="#555555"
             fontWeight="bold"
             left="2" right="2" top="2" bottom="2">

        <s:filters>
            <s:DropShadowFilter blurX="3" blurY="3" alpha="0.5" distance="1" distance.down="0" angle="90" excludeFrom="disabled" />
        </s:filters>
    </s:Label>

</s:SparkButtonSkin>

I also did this with an automatically generated skin for the Button using Flash Builder’s skin creation wizard/dialog. Even then, specifically setting the alpha to 1 in disabled mode had no effect.

Edit
This is the code used to create and then disable the button:

_action1Button = new Action1Button();
view.actionGroup.addElement(_action1Button);
_action1Button.enabled = false;

The error was that _action1Button is not the actual button, rather, it’s the container of the button. Doh! Switching it to _action1Button.actionButton.enabled = false; fixed the issue.

Answer 1

Your skin works fine for me. I get a green button in the enabled state then a grey gradient without drop shadow when enabled is false. I tested it like this (where TestSkin is your skin posted above):

<s:Button skinClass="TestSkin" enabled="false" />

I assume the problem has to do with how you are using the skin. Can you post the code where the button itself is defined?