Flex でのフィルタの使用 -- Flex 2.01

Adobe Flash フィルタを使用すると、Label や Text などの Flex コンポーネントにスタイルに似た効果を適用できます。UIComponent から派生した可視 Flex コンポーネントであれば、フィルタの適用が可能です。スタイルシートや setStyle() メソッドではフィルタを適用できないので、フィルタはスタイルではありません。しかし、フィルタを適用して得られた結果はスタイルの一種であると見なすことが普通です。

フィルタは flash.filters.* パッケージに収められ、DropShadowFilter、GlowFilter、BlurFilter などのクラスがあります。MXML でフィルタをコンポーネントに適用するには、flash.filters パッケージをローカル名前空間に追加します。次に、Flex コンポーネントの filters プロパティの値をフィルタクラスに設定します。filters プロパティは、DisplayObject クラスから継承されるプロパティです。

次の例では、拡張 MXML シンタックスとインラインシンタックスを使用して、Label コントロールにドロップシャドウを適用します。

<?xml version="1.0"?>
<!-- styles/ApplyFilterInline.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:flash="flash.filters.*">
  <!-- Apply filter using MXML syntax to set properties. -->
  <mx:Label text="DropShadowFilter" fontSize="20">
    <mx:filters>
     <flash:DropShadowFilter distance="10" angle="45"/>
    </mx:filters>
  </mx:Label>

  <!-- Apply filter and set properties inline. -->
  <mx:Label text="DropShadowFilter (inline)" fontSize="20" 
     filters="{[new DropShadowFilter(10, 45)]}"/>
</mx:Application>

ActionScript でフィルタを適用できます。そのためには、flash.filters.* パッケージをインポートし、新しいフィルタを Flex コントロールのフィルタ配列に追加します次の例では、ユーザーがボタンをクリックしたときに Label コントロールにホワイトシャドウを適用します。

<?xml version="1.0"?>
<!-- styles/ApplyFilterAS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
     import flash.filters.*;
  
     public function addFilter():void {
        // First four properties are distance, angle, color, and alpha.
        var f:DropShadowFilter = new DropShadowFilter(5,30,0xFFFFFF,.8);
        var myFilters:Array = new Array();
        myFilters.push(f);
        label1.filters = myFilters;
     }
  </mx:Script>
  <mx:Label id="label1" text="ActionScript-applied filter"/>
  <mx:Button id="b1" label="Add Filter" click="addFilter()"/>
</mx:Application>

フィルタプロパティを他の値にバインドすることはできません。

フィルタを変更した場合は、その効果が反映されるように、コンポーネントにフィルタを割り当て直す必要があります。次の例では、ボタンをクリックしたときにフィルタのカラーが変化します。

<?xml version="1.0"?>
<!-- styles/FilterChange.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="createFilters()">
  <mx:Script><![CDATA[ 
     import flash.filters.*;
  
     private var myBlurFilter:BlurFilter;
     private var myGlowFilter:GlowFilter;
     private var myBevelFilter:BevelFilter;
     private var myDropShadowFilter:DropShadowFilter;
  
     private var color:Number = 0xFF33FF;
  
     public function createFilters():void {
        
        myBlurFilter = new BlurFilter(4, 4, 1);

        myGlowFilter = new GlowFilter(color, .8, 6, 6, 2, 1, 
            false, false);

        myDropShadowFilter = new DropShadowFilter(15, 45, 
            color, 0.8, 8, 8, 0.65, 1, false, false);

        myBevelFilter = new BevelFilter(5, 45, color, 0.8, 
            0x333333, 0.8, 5, 5, 1, BitmapFilterQuality.HIGH, 
            BitmapFilterType.INNER, false);
  
        applyFilters();
     }
  
     public function applyFilters():void {
        rte1.filters = [myGlowFilter];
        b1.filters = [myDropShadowFilter];
        dc1.filters = [myBevelFilter];
        hs1.filters = [myBlurFilter];
     }

     public function changeFilters():void {
        color = 0x336633;
        createFilters();
     }
  ]]></mx:Script>

  <mx:RichTextEditor id="rte1"/>

  <mx:DateChooser id="dc1"/>

  <mx:HSlider id="hs1"/>

  <mx:Button id="b1" label="Click me" click="changeFilters()"/>


</mx:Application>