デフォルトでは、トランジションで定義されているすべてのエフェクトが、そのトランジションのすべてのターゲットコンポーネントに適用されます。したがって、次の例では、Move および Resize エフェクトが 3 つのターゲットすべてに適用されます。

<mx:Transition fromState="*" toState="*">
    <!-- Define a Parallel effect as the top most effect.-->
    <mx:Parallel id="t1" targets="{[p1,p2,p3]}">
        <!-- Define a Move and Resize effect.-->
        <mx:Move duration="400"/>
        <mx:Resize duration="400"/>
    </mx:Parallel>
</mx:Transition>

あるエフェクトを、すべてのターゲットコンポーネントではなく、コンポーネントの特定のサブセットに適用する必要がある場合があります。例えば、3 つのビューステートを持つアプリケーションを、次の図のように定義します。

ビューステートを変更するたびに、最上部のパネルが削除され、最下部のパネルが最上部に移動し、画面最下部に次のパネルが追加されます。この例では、3 番目のパネルは基本ビューステートでは非表示です。

この例では、最上部のパネルが削除されるときに WipeUp エフェクトを適用します。さらに、最下部のパネルが最上部に移動するときに Move エフェクトを適用し、最下部に追加されるパネルに別の WipeUp エフェクトを適用します。これらのエフェクトを 1 つのトランジションで定義した例を次に示します。

<mx:transitions>
    <mx:Transition fromState="*" toState="*">
        <mx:Sequence targets="{[p1,p2,p3]}">
            <mx:Sequence id="sequence1" filter="hide">
                <mx:WipeUp/>
                <mx:SetPropertyAction name="visible" value="false"/>
            </mx:Sequence>
            <mx:Move filter="move"/>
            <mx:Sequence id="sequence2" filter="show">
                <mx:SetPropertyAction name="visible" value="true"/>
                <mx:WipeUp/>
            </mx:Sequence>
        </mx:Sequence>
    </mx:Transition>
</mx:transitions>

sequence1 Sequence エフェクトでは、filter プロパティを使用して、エフェクトを再生するための前提となるコンポーネントの変更を指定しています。この例では、sequence1 エフェクトの filter プロパティに "hide" という値が指定されています。したがって、WipeUp および SetPropertyAction エフェクトは、visible プロパティが false に設定されて非表示になったコンポーネントに対してのみ、再生されます。

sequence2 Sequence エフェクトでは、filter プロパティを show に設定します。したがって、WipeUp および SetPropertyAction エフェクトは、visible プロパティが true に設定されて表示可能になったコンポーネントに対してのみ、再生されます。

Move エフェクトでも、filter プロパティに move という値を指定しています。したがってこのエフェクトは、位置が変更されるすべてのターゲットコンポーネントに適用されます。

次の表に、filter プロパティで使用できる値を示します。

例：フィルタの使用

次の例では、エフェクトへのフィルタ適用の例のすべてのコードを示します。

<?xml version="1.0" ?>
<!-- transitions\FilterShowHide.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  width="700" >

    <!-- Define two view state, in addition to the base state.-->
    <mx:states>
        <mx:State name="Two">
            <mx:SetProperty target="{p1}" name="visible" value="false"/>
            <mx:SetProperty target="{p2}" name="visible" value="true"/>
            <mx:SetProperty target="{p3}" name="visible" value="true"/>
            <mx:SetProperty target="{p2}" name="x" value="0"/>
            <mx:SetProperty target="{p2}" name="y" value="0"/>
            <mx:SetProperty target="{p3}" name="x" value="0"/>
            <mx:SetProperty target="{p3}" name="y" value="110"/>
        </mx:State>
        <mx:State name="Three">
            <mx:SetProperty target="{p1}" name="visible" value="true"/>
            <mx:SetProperty target="{p2}" name="visible" value="false"/>
            <mx:SetProperty target="{p3}" name="visible" value="true"/>
            <mx:SetProperty target="{p1}" name="x" value="0"/>
            <mx:SetProperty target="{p1}" name="y" value="110"/>
            <mx:SetProperty target="{p3}" name="x" value="0"/>
            <mx:SetProperty target="{p3}" name="y" value="0"/>
        </mx:State>
    </mx:states>

    <!-- Define a single transition for all state changes.-->
    <mx:transitions>
        <mx:Transition fromState="*" toState="*">
            <mx:Sequence targets="{[p1,p2,p3]}">
                <mx:Sequence id="sequence1" filter="hide" >
                    <mx:WipeUp/>
                    <mx:SetPropertyAction name="visible" value="false"/>
                </mx:Sequence>
                <mx:Move filter="move"/>
                <mx:Sequence id="sequence2" filter="show" >
                    <mx:SetPropertyAction name="visible" value="true"/>
                    <mx:WipeUp/>
                </mx:Sequence>
            </mx:Sequence>
        </mx:Transition>
    </mx:transitions>

    <mx:Canvas id="pm" width="100%" height="100%">
        <mx:Panel id="p1" title="One" 
                x="0" y="0" width="100" height="100"
                click="currentState=''" >
            <mx:Label fontSize="24" text="One"/>
        </mx:Panel>
        
        <mx:Panel id="p2" title="Two" 
                x="0" y="110" width="100" height="100"
                click="currentState='Two'" >
            <mx:Label fontSize="24" text="Two"/>
        </mx:Panel>
        
        <mx:Panel id="p3" title="Three" 
                visible="false" 
                width="100" height="100" 
                click="currentState='Three'" >
            <mx:Label fontSize="24" text="Three"/>
        </mx:Panel>
    </mx:Canvas>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

カスタムフィルタの定義

Flex では、EffectTargetFilter クラスを使用して、各トランジションエフェクトがそれぞれのターゲットに実行するカスタムフィルタを定義できます。カスタムフィルタを定義することで、トランジションを制御するための独自のロジックを指定できます。次の表は、EffectTargetFilter クラスのプロパティの一覧です。

filterFunction プロパティで指定されるコールバック関数のシグネチャを次に示します。

filterFunc(propChanges:Array, instanceTarget:Object):Boolean {
    // Return true to play the effect on instanceTarget, 
    // or false to not play the effect.
}

この関数は、次のパラメータを受け取ります。

propChanges PropertyChanges オブジェクトの配列で、エフェクトのターゲットコンポーネントごとに 1 つのオブジェクトを持ちます。ターゲットのプロパティがトランジションによって変更されない場合、このプロパティはこの配列に含まれません。

instanceTarget フィルタ処理を実行するエフェクト特有のターゲットコンポーネント。

カスタムフィルタ関数を使用する例については、例：カスタムエフェクトフィルタの使用を参照してください。

次の例では、カスタムフィルタを定義し、そのカスタムフィルタで、ビューステートの変更の一部として x プロパティまたは width プロパティが変更されるターゲットコンポーネントに対してのみエフェクトを再生するよう指定しています。

<?xml version="1.0" ?>
<!-- transitions\EffectFilterExampleMXML.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="700">

    <mx:states>
        <mx:State name="One">
            <mx:SetProperty target="{p1}" name="x" value="110"/>
            <mx:SetProperty target="{p1}" name="y" value="0"/>
            <mx:SetProperty target="{p1}" name="width" value="500"/>
            <mx:SetProperty target="{p1}" name="height" value="210"/>
            <mx:SetProperty target="{p2}" name="x" value="0"/>
            <mx:SetProperty target="{p2}" name="y" value="0"/>
            <mx:SetProperty target="{p2}" name="width" value="100"/>
            <mx:SetProperty target="{p2}" name="height" value="100"/>
            <mx:SetProperty target="{p3}" name="x" value="0"/>
            <mx:SetProperty target="{p3}" name="y" value="110"/>
            <mx:SetProperty target="{p3}" name="width" value="100"/>
            <mx:SetProperty target="{p3}" name="height" value="100"/>
        </mx:State>
        <mx:State name="Two">
            <mx:SetProperty target="{p2}" name="x" value="110"/>
            <mx:SetProperty target="{p2}" name="y" value="0"/>
            <mx:SetProperty target="{p2}" name="width" value="500"/>
            <mx:SetProperty target="{p2}" name="height" value="210"/>
            <mx:SetProperty target="{p3}" name="x" value="0"/>
            <mx:SetProperty target="{p3}" name="y" value="110"/>
            <mx:SetProperty target="{p3}" name="width" value="100"/>
            <mx:SetProperty target="{p3}" name="height" value="100"/>
        </mx:State>
    </mx:states>

    <mx:transitions>
        <mx:Transition fromState="*" toState="*">
            <mx:Sequence id="t1" targets="{[p1,p2,p3]}">
                <mx:Blur id="myBlur" duration="100" blurXFrom="0.0"
                    blurXTo="10.0" blurYFrom="0.0" blurYTo="10.0">
                    <!-- Define the custom filter. -->
                    <mx:customFilter>
                        <mx:EffectTargetFilter 
                            filterProperties="['width','x']"/>
                    </mx:customFilter>
                </mx:Blur>
                <mx:Parallel>
                    <mx:Move  duration="400"/>
                    <mx:Resize duration="400"/>
                </mx:Parallel>
                <mx:Blur id="myUnBlur" duration="100" blurXFrom="10.0"
                    blurXTo="0.0" blurYFrom="10.0" blurYTo="0.0">
                    <!-- Define the custom filter. -->
                    <mx:customFilter>
                        <mx:EffectTargetFilter 
                            filterProperties="['width','x']"/>
                    </mx:customFilter>
                </mx:Blur>                
            </mx:Sequence>
        </mx:Transition>
    </mx:transitions>

    <mx:Canvas id="pm" width="100%" height="100%">
        <mx:Panel id="p1" title="One" 
                x="0" y="0" width="100" height="100" 
                click="currentState='One'" >
            <mx:Label fontSize="24" text="One"/>
        </mx:Panel>
        
        <mx:Panel id="p2" title="Two" 
                x="0" y="110" width="100" height="100" 
                click="currentState='Two'" >
            <mx:Label fontSize="24" text="Two"/>
        </mx:Panel>
        
        <mx:Panel id="p3" title="Three" 
                x="110" y="0" width="500" height="210" 
                click="currentState=''" >
            <mx:Label fontSize="24" text="Three"/>
        </mx:Panel>
    </mx:Canvas>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ActionScript でカスタムフィルタを追加することもできます。フィルタを作成するには、EffectTargetFilter オブジェクトを定義してから、このオブジェクトをエフェクトの Effect.customFilter プロパティの値として指定します。次の例を参照してください。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initFilter(event);" width="700">

    <mx:Script>
        <![CDATA[

            import mx.effects.EffectTargetFilter;        
                
            // Define the EffectTargetFilter object.
            private var myBlurFilter:EffectTargetFilter;

            // Initialize the EffectTargetFilter object, and set the 
            // customFilter property for two Blur effects.
            private function initFilter(event:Event):void {
                myBlurFilter = new EffectTargetFilter();
                
                // Play the effect on any target that modifies the 
                // value of the x or width property.
                myBlurFilter.filterProperties=['x', 'width'];
                
                myBlur.customFilter=myBlurFilter;
                myUnBlur.customFilter=myBlurFilter;
            }                
        ]]>
    </mx:Script>

    <mx:transitions>
        <mx:Transition fromState="*" toState="*">
            <mx:Sequence id="t1" targets="{[p1,p2,p3]}">            
                <mx:Blur id="myBlur"/>
                    <mx:Parallel>
                        <mx:Moveduration="400"/>
                        <mx:Resize duration="400"/>
                    </mx:Parallel>    
                <mx:Blur id="myUnBlur"/>            
            </mx:Sequence>
        </mx:Transition>
    </mx:transitions>
    ...    
</mx:Application>

フィルタ関数の記述

フィルタ関数を作成するには、EffectTargetFilter オブジェクトを定義してから、このオブジェクトをエフェクトの Effect.customFilter プロパティの値として指定します。次の例では、アプリケーションの creationComplete イベントを使用して EffectTargetFilter オブジェクトを初期化してから、このオブジェクトを 2 つある Blur エフェクトの customFilter プロパティの値として指定します。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initFilter(event);" width="700">

    <mx:Script>
        <![CDATA[

            import mx.effects.EffectTargetFilter;        
            import flash.events.Event;    
    
            // This function returns true for the Panel moving to x=110.
            public function filterFunc(propChanges:Array,                instanceTarget:Object):Boolean
            {
                ...
            }
            
            // Define the EffectTargetFilter object.
            private var myBlurFilter:EffectTargetFilter;

            // Initialize the EffectTargetFilter object, and set the 
            // customFilter property for two Blur effects.
            private function initFilter(event:Event):void {
                myBlurFilter = new EffectTargetFilter();
            
                myBlurFilter.filterFunction=filterFunc;
                
                myBlur.customFilter=myBlurFilter;
                myUnBlur.customFilter=myBlurFilter;
            }    
                
        ]]>
    </mx:Script>

    <mx:transitions>
        <mx:Transition fromState="*" toState="*">
            <mx:Sequence id="t1" targets="{[p1,p2,p3]}">            
                <mx:Blur id="myBlur"/>
                    <mx:Parallel>
                        <mx:Moveduration="400"/>
                        <mx:Resize duration="400"/>
                    </mx:Parallel>    
                <mx:Blur id="myUnBlur"/>            
            </mx:Sequence>
        </mx:Transition>
    </mx:transitions>

    ...    
    
</mx:Application>

フィルタ関数に渡される propChanges パラメータには、PropertyChanges オブジェクトの配列が含まれます。この配列には、エフェクトのターゲットコンポーネントにつき 1 つのオブジェクトが含まれます。次の表は、PropertyChanges クラスのプロパティの一覧です。

カスタムフィルタ関数内では、instanceTarget 引数と propChanges.target プロパティを比較して、propChanges 配列で instanceTarget 引数と一致する PropertyChanges オブジェクトを最初に検索します。

次のフィルタ関数では、instanceTarget に対してエフェクトを再生するかどうかを判別するため、propChanges 配列を調べます。この例では、x プロパティが 110 の位置に移動するコンポーネントについてのみ、フィルタ関数が true を返します。次の例を参照してください。

// This function returns true for a target moving to x=110.
public function filterFunc(propChanges:Array, instanceTarget:Object):Boolean         {

    // Determine the length of the propChanges Array.
    for (var i:uint=0; i < propChanges.length; i++)
    {
        // Determine the Array element that matches the effect target.
        if (propChanges[i].target == instanceTarget)
        {
            // Check to see if the end Object contains a value for x.
            if (propChanges[i].end["x"] != undefined)
            {
                // Return true of the end value for x is 110.
                return (propChanges[i].end.x == 110);
            }
        }
    }
    // Otherwise, return false.
    return false;
}

例：カスタムエフェクトフィルタの使用

次の例では、カスタムフィルタ関数を使用して、トランジションの 3 つのターゲットの 1 つに Blur エフェクトを適用します。他の 2 つのターゲットは Blur エフェクトによって変更されません。

Blur エフェクトのターゲットを判別するため、カスタムフィルタ関数によって各ターゲットの x プロパティが調べられます。Blur エフェクトは、x=110 に移動するコンポーネントに対してのみ再生されます。次を参照してください。

<?xml version="1.0" ?>
<!-- transitions\EffectFilterExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    creationComplete="initFilter(event);" 
    width="700">

    <mx:Script>
        <![CDATA[

            import mx.effects.EffectTargetFilter;
            import flash.events.Event;

            // This function returns true for the Panel moving to x=110.
            public function filterFunc(propChanges:Array, 
                    instanceTarget:Object):Boolean {
                // Determine the length of the propChanges Array.
                for (var i:uint=0; i < propChanges.length; i++)
                {
                    // Determine the Array element 
                    // that matches the effect target.
                    if (propChanges[i].target == instanceTarget)
                    {
                        // Check whether the end Object contains 
                        // a value for x.
                        if (propChanges[i].end["x"] != undefined)
                        {
                            // Return true of the end value for x is 110.
                            return (propChanges[i].end.x == 110);
                        }
                    }
                }

                return false;
            }

            // Define the EffectTargetFilter object.
            private var myBlurFilter:EffectTargetFilter;

            // Initialize the EffectTargetFilter object, and set the
            // customFilter property for two Blur effects.
            private function initFilter(event:Event):void {
                myBlurFilter = new EffectTargetFilter();

                myBlurFilter.filterFunction=filterFunc;

                myBlur.customFilter=myBlurFilter;
                myUnBlur.customFilter=myBlurFilter;
            }
          ]]>
    </mx:Script>

    <mx:states>
        <mx:State name="One">
            <mx:SetProperty target="{p1}" name="x" value="110"/>
            <mx:SetProperty target="{p1}" name="y" value="0"/>
            <mx:SetProperty target="{p1}" name="width" value="500"/>
            <mx:SetProperty target="{p1}" name="height" value="210"/>
            <mx:SetProperty target="{p2}" name="x" value="0"/>
            <mx:SetProperty target="{p2}" name="y" value="0"/>
            <mx:SetProperty target="{p2}" name="width" value="100"/>
            <mx:SetProperty target="{p2}" name="height" value="100"/>
            <mx:SetProperty target="{p3}" name="x" value="0"/>
            <mx:SetProperty target="{p3}" name="y" value="110"/>
            <mx:SetProperty target="{p3}" name="width" value="100"/>
            <mx:SetProperty target="{p3}" name="height" value="100"/>
        </mx:State>
        <mx:State name="Two">
            <mx:SetProperty target="{p2}" name="x" value="110"/>
            <mx:SetProperty target="{p2}" name="y" value="0"/>
            <mx:SetProperty target="{p2}" name="width" value="500"/>
            <mx:SetProperty target="{p2}" name="height" value="210"/>
            <mx:SetProperty target="{p3}" name="x" value="0"/>
            <mx:SetProperty target="{p3}" name="y" value="110"/>
            <mx:SetProperty target="{p3}" name="width" value="100"/>
            <mx:SetProperty target="{p3}" name="height" value="100"/>
        </mx:State>
    </mx:states>

    <mx:transitions>
        <mx:Transition fromState="*" toState="*">
            <mx:Sequence id="t1" targets="{[p1,p2,p3]}">
                <mx:Blur id="myBlur" duration="100" blurXFrom="0.0"
                blurXTo="10.0" blurYFrom="0.0" blurYTo="10.0"/>
                <mx:Parallel>
                    <mx:Move  duration="400"/>
                    <mx:Resize duration="400"/>
                </mx:Parallel>
                <mx:Blur id="myUnBlur" duration="100" blurXFrom="10.0"
                blurXTo="0.0" blurYFrom="10.0" blurYTo="0.0"/>
            </mx:Sequence>
        </mx:Transition>
    </mx:transitions>

    <mx:Canvas id="pm" width="100%" height="100%">
        <mx:Panel id="p1" title="One" 
                x="0" y="0" width="100" height="100" 
                click="currentState='One'" >
            <mx:Label fontSize="24" text="One"/>
        </mx:Panel>
        
        <mx:Panel id="p2" title="Two" 
                x="0" y="110" width="100" height="100" 
                click="currentState='Two'" >
            <mx:Label fontSize="24" text="Two"/>
        </mx:Panel>
        
        <mx:Panel id="p3" title="Three" 
                x="110" y="0" width="500" height="210" 
                click="currentState=''" >
            <mx:Label fontSize="24" text="Three"/>
        </mx:Panel>
    </mx:Canvas>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

requiredSemantics プロパティの使用

データエフェクトを操作する場合、EffectTargetFiler.requiredSemantics プロパティを使用してエフェクトにフィルタを適用できます。例えば、エフェクトによって追加されなかった（つまり、削除、置換、移動などの方法で変更された）、List コントロールのすべてのターゲットに対してデータエフェクトを再生する場合は、次のようにエフェクト定義を記述します。

<mx:Blur>
    <mx:customFilter>
        <mx:EffectTargetFilter requiredSemantics="{{'added':false}}"/>
    </mx:customFilter>
</mx:Blur>

エフェクトにより追加または削除されないすべてのターゲットに対してデータエフェクトを再生するには、次のようにエフェクト定義を記述します。

<mx:Blur>
    <mx:customFilter>
        <mx:EffectTargetFilter requiredSemantics="{{'added':false}, {'removed':false}}"/>
    </mx:customFilter>
</mx:Blur>

指定できるプロパティのリストには、added、removed、replaced および replacement が含まれます。これらのプロパティに対し使用できる値は true と false です。

データエフェクトの詳細については、データエフェクトの使用を参照してください。