flex 4 Filters

  <s:RectangularDropShadow id="dropShadow" blurX="10" blurY="10" alpha="0.5"
                             distance="4" angle="90" color="0x000000"
                             left="1" top="1" right="1" bottom="1">

    </s:RectangularDropShadow>

angle的角度，当它为0时，是水平向右的，当它为90度时，是竖直向下的。

下面是四种filter的例子，

        <s:GlowFilter id="glow" blurX="12" blurY="12" color="#88AEF7" quality="2" strength="1"/>
        <s:BlurFilter id="blur" blurX="4" blurY="4" quality="2" />
        <s:DropShadowFilter id="dropShadow" alpha="0.35" blurX="6" blurY="6" distance="6" color="#000000" angle="90" />
        <s:BevelFilter id="bevel" angle="45" blurX="0.5" blurY="0.5" distance="4" strength="0.7" highlightAlpha="0.7" shadowAlpha="0.7"  />
    

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               skinClass="TDFGradientBackgroundSkin"
               viewSourceURL="srcview/index.html"
               creationComplete="init()">

    <fx:Script>
        <![CDATA[

            private var time:Timer;
            private var count:int = 0;

            private function init():void{
                time = new Timer(1000,0);
                time.addEventListener(TimerEvent.TIMER,timeHandler);
                time.start();

            }

            private function timeHandler(ev:TimerEvent):void{
                count ++;
                dynamicText.text = String(count);
            }

            private function filterHandler(ev:MouseEvent):void{
                var filterArr:Array = [];

                blurBox.selected ? filterArr.push(blur): null;
                glowBox.selected ? filterArr.push(glow): null;
                shadowBox.selected? filterArr.push(dropShadow): null;
                bevelBox.selected ? filterArr.push(bevel): null;

                textSample.filters = filterArr;
                dynamicText.filters = filterArr;
            }
        ]]>
    </fx:Script>

    <s:layout>
        <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
    </s:layout>

    <fx:Declarations>
        <!--filters-->
        <s:GlowFilter id="glow" blurX="12" blurY="12" color="#88AEF7" quality="2" strength="1"/>
        <s:BlurFilter id="blur" blurX="4" blurY="4" quality="2" />
        <s:DropShadowFilter id="dropShadow" alpha="0.35" blurX="6" blurY="6" distance="6" color="#000000" angle="90" />
        <s:BevelFilter id="bevel" angle="45" blurX="0.5" blurY="0.5" distance="4" strength="0.7" highlightAlpha="0.7" shadowAlpha="0.7"  />
    </fx:Declarations>

    <s:Panel title="Filters Samples"
             width="600" height="100%"
             color="0x000000"
             borderAlpha="0.15">

        <s:layout>
            <s:VerticalLayout horizontalAlign="center"
                              paddingLeft="10" paddingRight="10"
                              paddingTop="10" paddingBottom="10"/>
        </s:layout>

        <s:Label id="textSample" text="SAMPLE TEXT" color="0x000000"
                 fontWeight="bold" fontSize="40" filters="{[bevel]}" />

        <s:HGroup width="100%" color="#323232" horizontalAlign="center">
            <s:CheckBox id="blurBox" label="Blur" click="filterHandler(event)" />
            <s:CheckBox id="glowBox" label="Glow" click="filterHandler(event)" />
            <s:CheckBox id="shadowBox" label="Drop Shadow" click="filterHandler(event)" />
            <s:CheckBox id="bevelBox" label="Bevel" selected="true" click="filterHandler(event)" />
        </s:HGroup>

        <s:Label id="dynamicText" text="0" color="#323232" fontSize="18" filters="{[bevel]}" />

    </s:Panel>

</s:Application>