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>