トランジションは、ビューステートの変化を画面上に表示する方法を定義します。トランジションを定義するには、Flex エフェクトクラスの組み合わせを使用します。トランジションについて詳しくは、トランジションの使用を参照してください。

トランジションで使用する専用のカスタムエフェクトを定義できます。カスタムエフェクトを定義するには、EffectInstance.play() メソッドのオーバーライド時にトランジションで使用されるエフェクトを考慮する必要があります。EffectInstance.play() メソッドは、エフェクトがトランジション内で使用されたときに、エフェクトプロパティのデフォルト値を判別できなければなりません。

トランジションエフェクトのデフォルト値の定義

他のエフェクトと同様、トランジション内のエフェクトにも、設定するために使用するプロパティがあります。例えば、ほとんどのエフェクトには、Move エフェクトの xFrom、yFrom、xTo、yTo プロパティなど、対象のコンポーネントの開始および終了情報を定義するプロパティがあります。

トランジション内でエフェクトを使用すると、Flex では、次のルールに従ってエフェクトプロパティの開始値と終了値が判別されます。

1. エフェクトでプロパティの値が定義されている場合は、次の例に示すように、トランジション内でそれらの値が使用されます。

   <mx:Transition fromState="*" toState="*">
       <mx:Sequence id="t1" targets="{[p1,p2,p3]}">            
           <mx:Blur 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 duration="100" 
               blurXFrom="10.0" blurXTo="0.0" blurYFrom="10.0" blurYTo="0.0"/>            
       </mx:Sequence>
   </mx:Transition>
   
   

   この例では、2 つの Blur フィルタがエフェクトのプロパティを定義します。

2. エフェクトで開始値が定義されていない場合、エフェクトは、エフェクトインスタンスに渡された EffectInstance.propertyChanges プロパティから開始値を判別できます。Flex は、現在のビューステートによって定義された現在の設定値の情報を使用して propertyChanges プロパティを設定します。propertyChanges プロパティについて詳しくは、Flex の propertyChanges プロパティの初期化方法を参照してください。

   手順 1 の例では、Move および Resize エフェクトは開始値を定義していません。したがって、Flex は現在のビューステートにおけるエフェクトターゲットの現在のサイズと位置から開始値を決定し、propertyChanges プロパティを使用して各エフェクトインスタンスにその情報を渡します。

3. エフェクトで終了値が定義されていない場合、エフェクトは、エフェクトインスタンスに渡された Effectinstance.propertyChanges プロパティから終了値を判別できます。Flex は、目的とするビューステートによって定義されたコンポーネントに関する情報を使用して propertyChanges プロパティを設定します。propertyChanges プロパティについて詳しくは、Flex の propertyChanges プロパティの初期化方法を参照してください。

   手順 1 の例では、Flex は Move および Resize エフェクトの終了値を、目的とするビューステートにおけるエフェクトターゲットのサイズと位置から判別しています。場合によっては、目的とするビューステートによって終了値が定義されます。目的とするビューステートによって終了値が定義されていない場合、Flex は、基本ビューステートの設定値から終了値を判別し、propertyChanges プロパティを使用して各エフェクトインスタンスにその情報を渡します。

4. 明示的な値がなく、Flex が現在または目的とするビューステートから値を判別できない場合、エフェクトはデフォルトのプロパティ値を使用します。

propertyChanges プロパティの使用

EffectInstance.propertyChanges プロパティには、PropertyChanges オブジェクトが含まれます。PropertyChanges オブジェクトには、次の表に示すプロパティがあります。

Effectinstance.play() メソッドの本体で、エフェクトを構成するための propertyChanges プロパティの情報を調べることができます。

Flex の propertyChanges プロパティの初期化方法

エフェクトインスタンス内の EffectInstance.propertyChanges プロパティは、使用する前に適切に初期化する必要があります。ビューステートを変更すると、Flex は propertyChanges.start と propertyChanges.end を個別に初期化します。

次の手順は、ビューステートを変更したときに実行されるアクションを示しています。Flex は手順 4 で propertyChanges.start を初期化し、手順 7 で propertyChanges.end を初期化します。

1. currentState プロパティは、目的とするビューステートに設定します。
2. Flex は、currentStateChanging イベントを送出します。
3. Flex は、トランジションのリストを調べ、ビューステートの変化に合致するトランジションを判別します。
4. Flex は、Effect.captureStartValues() メソッドを呼び出し、すべてのエフェクトインスタンスの propertyChanges.start を初期化します。

   また、Effect.captureStartValues() を呼び出して、トランジションの外部で使用されるエフェクトインスタンスを初期化することもできます。

5. Flex は、目的とするビューステートをアプリケーションに適用します。
6. Flex は、currentStateChange イベントを送出します。
7. Flex はトランジション内に定義されたエフェクトを再生します。

   エフェクトの再生の一部として、Flex は、ファクトリクラスの play() メソッドと Effect.play() メソッドを呼び出し、エフェクトインスタンスの propertyChanges.end を初期化します。

例：トランジションエフェクトの作成

次の例は、例：トゥイーンエフェクトの作成で作成した Rotation エフェクトを、トランジション内で使用できるように変更します。

この例は、エフェクトのファクトリクラスを定義する RotationTrans.as クラスを示しています。RotationTrans.as を作成するために Rotation.as に加える変更は、angleFrom および angleTo プロパティのデフォルト値の定義を削除することだけです。RotationTransInstance.play() メソッドによってデフォルト値が定義されるようにします。

package myEffects
{
   // myEffects/RotationTrans.as
   import mx.effects.TweenEffect;
   import mx.effects.EffectInstance;
   import mx.effects.IEffectInstance;

   public class RotationTrans extends TweenEffect
   {
       // Define parameters for the effect.
       // Do not specify any default values. 
       // The default value of these properties is NaN.
       public var angleFrom:Number;
       public var angleTo:Number;
 
       // Define constructor with optional argument.
       public function RotationTrans(targetObj:Object = null) {
           super(targetObj);
           instanceClass= RotationTransInstance;           
       }

       // Override getAffectedProperties() method to return "rotation".
       override public function getAffectedProperties():Array {
           return ["rotation"];
       }
    
       // Override initInstance() method.
       override protected function initInstance(inst:IEffectInstance):void {
           super.initInstance(inst);
           RotationTransInstance(inst).angleFrom = angleFrom;
           RotationTransInstance(inst).angleTo = angleTo;
       } 
   }
}

RotationTransInstance.as クラスで、play() メソッドを変更し、angleFrom および angleTo プロパティのデフォルト値を計算します。このメソッドは、次のアクションを実行します。

1. ユーザーが angleFrom および angleTo プロパティの値を設定するかどうかを決定します。
2. 設定しない場合は、Effectinstance.propertyChanges プロパティを開始値と終了値で初期化するかどうかを決定します。初期化する場合は、メソッドによってそれらの値を使用してエフェクトを構成します。
3. 初期化しない場合は、angleFrom および angleTo プロパティをデフォルト値に設定します。デフォルト値は、angleFrom プロパティが 0、angleTo プロパティが 360 です。

次の例は、RotationTransInstance.as クラスを示します。

package myEffects
{
    // myEffects/RotationTransInstance.as
    import mx.effects.effectClasses.TweenEffectInstance;
    import mx.effects.Tween;

    public class RotationTransInstance extends TweenEffectInstance
    {
        // Define parameters for the effect.
        public var angleFrom:Number;
        public var angleTo:Number;
  
        public function RotationTransInstance(targetObj:Object) {
            super(targetObj);
        }
  
        // Override play() method class.
        override public function play():void {
            // All classes must call super.play().
            super.play();
            
            // Check whether angleFrom is set.
            if (isNaN(angleFrom)) 
            {
              // If not, look in propertyChanges.start for a value. 
              // Otherwise, set it to 0.
              angleFrom = (propertyChanges.start["rotation"] != undefined) ? 
                    propertyChanges.start["rotation"] : 0;

            }
                    
            // Check whether angleTo is set.
            if (isNaN(angleTo)) 
            {
                // If not, look in propertyChanges.end for a value. 
                // Otherwise, set it to 360.
                angleTo = (propertyChanges.end["rotation"] != undefined) ? 
                    propertyChanges.end["rotation"] : 360;
            }
            
            // Create a Tween object. The tween begins playing immediately.
            var tween:Tween = 
                createTween(this, angleFrom, angleTo, duration);  
        }

        // Override onTweenUpdate() method.
        override public function onTweenUpdate(val:Object):void {
            target.rotation = val;
        }
  
        // Override onTweenEnd() method.
        override public function onTweenEnd(val:Object):void {
            // All classes that implement onTweenEnd() 
            // must call super.onTweenEnd().
            super.onTweenEnd(val);
        }
    }
}

次のアプリケーションでは、RotationTrans エフェクトを使用しています。

<?xml version="1.0" encoding="UTF-8"?>
<!-- effects/MainRotationTrans.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myEffects.*"> 

    <!-- Define the two view states, in addition to the base state.-->
    <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="200"/>
            <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="200"/>
            <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>
    
    <!-- Define the single transition for all view state changes.-->
    <mx:transitions>
        <mx:Transition fromState="*" toState="*">
            <mx:Sequence id="t1" targets="{[p1,p2,p3]}">            
                <mx:Parallel>
                    <mx:Move  duration="400"/>
                    <mx:Resize duration="400"/>
                </mx:Parallel>  
                <MyComp:RotationTrans filter="move"/>
            </mx:Sequence>
        </mx:Transition>
    </mx:transitions>
    
    <!-- Define the Canvas container holdig the three Panel containers.-->
    <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="200" height="210" 
                click="currentState=''" >
            <mx:Label fontSize="24" text="Three"/>
        </mx:Panel>
    </mx:Canvas>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。