Filters and Gradient colors not getting applied simultaneously for button skin

Question

I have created a sample desktop app using Flex 4 in flash builder 4 wherein I am using a button inside BorderContainer. I have applied skin to button which includes Dropdownshadow,glow filter,bevel-filter and gradient colors.

But I am facing a problem with use of filters and gradient fill simultaneously. When using filters gradient fill doesnt show up and vice-versa. Please let me know where I am making mistake.

This is the main.mxml code:

<s:BorderContainer backgroundColor="#003C7B" verticalCenter="0" horizontalCenter="0" height="350" width="450">
    <s:Button id="btn" label="Select" color="white" verticalCenter="0"  skinClass="BlueButtonSkin" horizontalCenter="0"/>
</s:BorderContainer>

The skin class code for filters and gradient fill is as follows:

<s:Rect id="backgroundAndShadow" left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5"
        topLeftRadiusX="5" topLeftRadiusY="5" topRightRadiusX="5" topRightRadiusY="5"
        bottomLeftRadiusX="5" bottomLeftRadiusY="5" bottomRightRadiusX="5" bottomRightRadiusY="5">
    <s:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry  color="#00366E"/>
            <s:GradientEntry color="#013A8B" />
        </s:LinearGradient>
    </s:fill>
    <s:filters>
        <s:GlowFilter alpha="0.9"  color="#ffffff" inner="false"  knockout="true"  blurX="8" blurY="8" />
        <s:BevelFilter angle="270" distance="5" />
    </s:filters>
</s:Rect>

<s:RectangularDropShadow id="dropShadow" blurX="8" blurY="8" alpha="0.5" distance="5" tlRadius="5" trRadius="5" blRadius="5" brRadius="5"
                         angle="45" color="#000000" left="2" top="0" right="0" bottom="0"/>
<s:Rect id="border" left="0" right="0" top="0" bottom="0" width="75" height="15" 
        topLeftRadiusX="5" topLeftRadiusY="5" topRightRadiusX="5" topRightRadiusY="5"
        bottomLeftRadiusX="5" bottomLeftRadiusY="5" bottomRightRadiusX="5" bottomRightRadiusY="5">
    <s:stroke>
        <s:SolidColorStroke joints="bevel" caps="round" color="#84C2F2" weight="0.3" alpha="0.3"/>
    </s:stroke>
</s:Rect>


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

Any suggestions on this?

I am attaching the required look for button for reference:

Answer 1

Well,finally I have done it...

Played with the code and found this code works fine with what is required:

<s:Rect id="backgroundAndShadow2" left="0" right="0" top="0" bottom="0" 
        topLeftRadiusX="5" topLeftRadiusY="5" topRightRadiusX="5" topRightRadiusY="5"
        bottomLeftRadiusX="5" bottomLeftRadiusY="5" bottomRightRadiusX="5" bottomRightRadiusY="5">
    <s:fill>
        <s:SolidColor color="#4B7CB6" alpha="0.5"/>
    </s:fill>
    <s:filters>
        <s:DropShadowFilter blurX="5" blurY="5" quality="3" strength="0.65" distance="4" />
        <s:GlowFilter blurX="7" blurY="7" quality="3" color="#004DAF"/>
        <s:BevelFilter blurX="1" blurY="1" quality="3" strength="2" highlightColor="#9FC7F5" angle="60" distance="1"/>
        <s:BlurFilter blurX="1.5" blurY="1.5"/>
    </s:filters>
</s:Rect>

<s:Rect id="backgroundAndShadow" left="1.5" right="1.5" top="1.5" bottom="1.5" 
        topLeftRadiusX="5" topLeftRadiusY="5" topRightRadiusX="5" topRightRadiusY="5"
        bottomLeftRadiusX="5" bottomLeftRadiusY="5" bottomRightRadiusX="5" bottomRightRadiusY="5">
    <s:fill>
        <s:LinearGradient scaleX="51" rotation="90">
            <s:GradientEntry ratio="0" color="#013465"/>
            <s:GradientEntry ratio="0.32156863" color="#013A7F"/>
            <s:GradientEntry ratio="1" color="#003990"/>
        </s:LinearGradient>
    </s:fill>
    <s:filters>
        <s:DropShadowFilter inner="true" angle="-130" blurX="2" blurY="0.8" strength="0.5" color="#00275C" alpha="0.8"/>
    </s:filters>
</s:Rect>

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

Modified the skinclass and got the results!

Answer 2

In your <s:GlowFilter /> you have set the knockout property to true. So when applying that filter, it literally knocks out the contents of the item that the filter is applied to. Remove that property altogether or you can set it to false, which is the default.

Here's what the GlowFilter documentation says for the knockout property:

Specifies whether the object has a knockout effect. A knockout effect makes the object's fill transparent and reveals the background color of the document. The value true specifies a knockout effect; the default value is false (no knockout effect).