Creating a fading bitmap fill background on a Spark Panel container in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/13/creating-a-fading-bitmap-fill-background-on-a-spark-panel-container-in-flex-4/ -->
<s:Application name="Spark_Panel_fill_BitmapFill_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="rotation:">
                <s:HSlider id="rotationSlider"
                        minimum="-360"
                        maximum="360"
                        value="90"
                        liveDragging="true"
                        width="{pnl.width}" />
            </mx:FormItem>
            <mx:FormItem label="ratio:">
                <s:HSlider id="ratioSlider"
                        minimum="0.0"
                        maximum="1.0"
                        value="0.2"
                        valueInterval="0.05"
                        liveDragging="true"
                        width="{pnl.width}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <s:Panel id="pnl"
            title="Spark Panel title"
            width="320" height="240"
            horizontalCenter="0" verticalCenter="0">
        <s:Rect width="100%" height="100%">
            <s:fill>
                <s:BitmapFill source="@Embed('assets/pattern_140.gif')" />
            </s:fill>
        </s:Rect>
        <s:Rect width="100%" height="100%">
            <s:fill>
                <s:LinearGradient rotation="{rotationSlider.value}">
                    <s:GradientEntry color="white"
                            alpha="0.0"
                            ratio="0.0" />
                    <s:GradientEntry color="#F0EBD2"
                            alpha="1.0"
                            ratio="{ratioSlider.value}" />
                </s:LinearGradient>
            </s:fill>
        </s:Rect>
        <s:TextArea id="textArea"
                verticalScrollPolicy="on"
                left="20" right="20"
                top="20" bottom="20">
            <s:text>The quick brown fox jumps over the lazy dog.</s:text>
        </s:TextArea>
    </s:Panel>
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/13/creating-a-fading-bitmap-fill-background-on-a-spark-panel-container-in-flex-4/ -->
<s:Application name="Spark_Panel_fill_BitmapFill_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <s:Panel id="pnl"
            title="Spark Panel title"
            skinClass="skins.CustomPanelSkin"
            contentBackgroundColor="#F0EBD2"
            width="320" height="240"
            horizontalCenter="0" verticalCenter="0">
        <s:TextArea id="textArea"
                contentBackgroundColor="white"
                verticalScrollPolicy="on"
                left="20" right="20"
                top="20" bottom="20">
            <s:text>The quick brown fox jumps over the lazy dog.</s:text>
        </s:TextArea>
    </s:Panel>
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/13/creating-a-fading-bitmap-fill-background-on-a-spark-panel-container-in-flex-4/ -->
<s:SparkSkin name="CustomPanelSkin"
             xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             alpha.disabled="0.5">
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Metadata>
        <![CDATA[
             [HostComponent("spark.components.Panel")]
        ]]>
    </fx:Metadata>
 
    <fx:Script>
        /* Define the skin elements that should not be colorized.
        For panel, border and title backround are skinned, but the content area and title text are not. */
        static private const exclusions:Array = ["background", "titleField", "contentGroup"];
 
        override public function get colorizeExclusions():Array {return exclusions;}
 
        /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
        static private const contentFill:Array = ["bgFill"];
 
        override public function get contentItems():Array {return contentFill};
    </fx:Script>
 
    <!-- drop shadow -->
    <s:RectangularDropShadow id="shadow"
                             blurX="20" blurY="20"
                             alpha="0.32" distance="11"
                             angle="90" color="#000000"
                             left="0" top="0" right="0" bottom="0"/>
 
    <!-- layer 1: border -->
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
        </s:stroke>
    </s:Rect>
 
    <!-- layer 2: background fill -->
    <s:Rect left="1" top="1" right="1" bottom="1">
        <s:fill>
            <s:BitmapFill source="@Embed('assets/pattern_140.gif')" />
        </s:fill>
    </s:Rect>
 
    <!--- Defines the appearance of the PanelSkin class's background. -->
    <s:Rect id="background" left="1" top="1" right="1" bottom="1">
        <s:fill>
            <!--- Defines the  PanelSkin class's background fill. The default color is 0xFFFFFF. -->
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="white"
                                 alpha="0.0"
                                 ratio="0.0" />
                <s:GradientEntry id="bgFill"
                                 color="0xFF0000"
                                 alpha="1.0"
                                 ratio="0.3" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 3: title bar fill -->
    <s:Rect left="1" right="1" top="1" height="30">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xE2E2E2" />
                <s:GradientEntry color="0xD9D9D9" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 4: title bar highlight -->
    <s:Rect left="1" right="1" top="1" height="30">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xEAEAEA" />
                <s:GradientEntry color="0xD9D9D9" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    <s:Rect left="1" right="1" top="31" height="1">
        <s:fill>
            <s:SolidColor color="0xC0C0C0" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 5: text -->
    <!--- Defines the appearance of the PanelSkin class's title bar. -->
    <s:SimpleText id="titleField" lineBreak="toFit"
                  left="10" right="4" top="2" height="30"
                  verticalAlign="middle" fontWeight="bold"
                  truncation="1" />
 
    <s:Scroller left="1" right="1" top="32" bottom="1">
        <!--
        Note: setting the minimum size to 0 here so that changes to the host component's
        size will not be thwarted by this skin part's minimum size.   This is a compromise,
        more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
        -->
        <s:Group id="contentGroup"
                 width="100%" height="100%"
                 minWidth="0" minHeight="0">
            <!--
            <s:layout>
                <s:VerticalLayout paddingLeft="20" paddingRight="20"
                        paddingTop="20" paddingBottom="20" />
            </s:layout>
            -->
        </s:Group>
    </s:Scroller>
 
</s:SparkSkin>