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

フィルタは flash.filters.* パッケージに収められており、DropShadowFilter、GlowFilter、BlurFilter などのクラスがあります。MXML でフィルタをコンポーネントに適用するには、フィルタクラスをコンポーネントの filters 配列に追加します。filters 配列は、DisplayObject クラスから継承されるプロパティです。この配列には、コンポーネントに適用する任意の数のフィルタが含まれます。

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

<?xml version="1.0"?>
<!-- styles/ApplyFilterInline.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <!-- Apply filter using MXML syntax to set properties. -->
    <mx:Label text="DropShadowFilter" fontSize="20">
        <mx:filters>
            <mx: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>
前の例で実行する SWF ファイルは以下のとおりです。

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

<?xml version="1.0"?>
<!-- styles/ApplyFilterAS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script><![CDATA[
        import flash.filters.*;

        public function addFilter():void {
            // The first four properties of the DropShadowFilter constructor 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>
前の例で実行する SWF ファイルは以下のとおりです。

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

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

<?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>
前の例で実行する SWF ファイルは以下のとおりです。

dropShadowEnabled プロパティを持つ Flex コンテナとコントロールもあります。このプロパティを true に設定すると、ドロップシャドウフィルタをそのコンポーネントに追加できます。ただし、このプロパティを使用する場合、Flex コンポーネントはパフォーマンス上の理由で独自のドロップシャドウを描画します。Flex コンポーネントはターゲットのエッジをコピーした後、ビットマップの上にシャドウを描画し、そのビットマップにターゲットを割り当てます。ターゲットコンポーネントを回転すると、回転されたベクトルのレンダリング方法が原因で、ドロップシャドウがぎざぎざに表示されることがあります。

この状態を回避し、回転されたコンポーネント上に滑らかなドロップシャドウフィルタを表示するには、このセクションの例で説明したように、DropShadowFilter クラスを使用します。

次の例は、dropShadowEnabled プロパティを使用してフィルタを描画する場合と DropShadowFilter クラスを使用する場合の違いを示しています。

<?xml version="1.0" encoding="utf-8"?>
<!-- styles/SmoothFilter.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    backgroundColor="0xFFFFFF" 
    layout="absolute"
>
    <mx:Style>
        Canvas {
            borderStyle:solid;
            cornerRadius:10;
            borderColor:#000000;
            backgroundColor:#FFFFFF;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private function getBitmapFilter():DropShadowFilter {
                var distance:Number = 3;
                var angle:Number = 90;
                var color:Number = 0x000000;
                var alpha:Number = 1;
                var blurX:Number = 8;
                var blurY:Number = 8;
                var strength:Number = 0.65;
                var quality:Number = BitmapFilterQuality.LOW;
                var inner:Boolean = false;
                var knockout:Boolean = false;

                return new DropShadowFilter(distance, angle, color, alpha, 
                    blurX, blurY, strength, quality, inner, knockout);
            }
        ]]>
    </mx:Script>

    <!-- This rotated canvas applies a filter using the dropShadowEnabled 
        property. As a result, the edges are slightly jagged. -->
    <mx:Canvas id="canvas1" 
        dropShadowEnabled="true" 
        creationComplete="canvas1.rotation=-10" 
        x="50" y="80" 
        width="400" 
        height="300" 
    />

    <!-- This rotated canvas applies a bitmap filter. As a result, 
        the edges are smoother. -->
    <mx:Canvas id="canvas2" 
        filters="{[getBitmapFilter()]}" 
        creationComplete="canvas2.rotation=-10" 
        x="50" y="420" 
        width="400" 
        height="300" 
    />
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

チャートコントロールでのフィルタの使用の詳細については、チャートコントロールでのフィルタの使用を参照してください。