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>