Flex エフェクトのほとんどは、トゥイーンメカニズムを使用して実装されます。このメカニズムでは、トゥイーンが一定時間にターゲットオブジェクト上で実行されるトランジションを定義します。トランジションは、Zoom や Resize エフェクトによって実行されるサイズの変更、または Fade や Dissolve エフェクトによって実行される可視性の変更の場合もあれば、その他のトランジションタイプの場合もあります。

次のクラスを使用して、トゥイーンエフェクトを実装できます。

• mx.effects.Tween トゥイーンエフェクトを実装するために使用されるクラスです。Tween オブジェクトでは、開始値、終了値、およびオプションのイージング関数を使用できます。トゥイーンエフェクトクラスを定義する場合は、Effect.play() メソッドのオーバーライドで Tween クラスのインスタンスを作成します。

  Tween オブジェクトは、一定の時間間隔で mx.effects.TweenEffect.onTweenUpdate() コールバックメソッドを呼び出し、開始値と終了値の間の補間値をそのコールバックメソッドに渡します。通常、コールバックメソッドは対象のコンポーネントのプロパティをいくつか更新することで、そのコンポーネントのプロパティを長時間アニメーション化します。例えば、Move エフェクトはエフェクトの持続時間の間、対象のコンポーネントの x および y プロパティを変更し、アニメーション化された動きを表示します。

  エフェクトの再生が終了すると、Tween オブジェクトは mx.effects.TweenEffect.onTweenEnd() コールバックメソッドを呼び出します。このメソッドは、エフェクトを終了する前に最終処理を実行します。オーバーライド内から super.onTweenEnd() を呼び出す必要があります。

• mx.effects.TweenEffect すべてのトゥイーンエフェクトの基本ファクトリクラスです。このクラスでは、Tween ベースのエフェクトすべてに共通のメソッドとプロパティをカプセル化します。
• mx.effects.effectClasses.TweenEffectInstance すべてのトゥイーンエフェクトのインスタンスクラスです。

  TweenEffect クラスに基づくエフェクトを定義する場合は、TweenEffectInstance.onTweenUpdate() メソッドをオーバーライドする必要があります。また、オプションで TweenEffectInstance.onTweenEnd() メソッドをオーバーライドします。

次の例はトゥイーンエフェクトを作成します。なお、Flex には、対象のコンポーネントの単一のプロパティに対応したトゥイーンエフェクトの作成に使用できる AnimateProperty クラスがあります。詳しくは、ビヘイビアの使用を参照してください。

例：トゥイーンエフェクトの作成

この例では、円の中でコンポーネントを回転させるトゥイーンエフェクトを作成します。ここでは、Rotate エフェクトの簡易版を実装します。回転は、エフェクトに渡される 2 つのパラメータ、angleFrom および angleTo によって制御されます。

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

   public class Rotation extends TweenEffect
   {
       // Define parameters for the effect.
       public var angleFrom:Number = 0;
       public var angleTo:Number = 360;
  
       // Define constructor with optional argument.
       public function Rotation(targetObj:* = null) {
           super(targetObj);
           instanceClass= RotationInstance;            
       }

       // 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);
           RotationInstance(inst).angleFrom = angleFrom;
           RotationInstance(inst).angleTo = angleTo;
       } 
   }
}

この例では、エフェクトは、対象のコンポーネントの rotation プロパティを変更することで動作します。そのため、getAffectedProperties() メソッドのオーバーライドは、単一のエレメントを含む配列を返します。

次の例に示すように、TweenEffectInstance クラスからインスタンスクラスを派生し、play()、onTweenUpdate()、および onTweenEnd() メソッドをオーバーライドします。

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

    public class RotationInstance extends TweenEffectInstance
    {
        // Define parameters for the effect.
        public var angleFrom:Number;
        public var angleTo:Number;
  
        public function RotationInstance(targetObj:*) {
            super(targetObj);
        }
  
        // Override play() method class.
        override public function play():void {
            // All classes must call super.play().
            super.play();
            // 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);
        }
    }
}

この例では、Tween オブジェクトが一定の時間間隔で onTweenUpdate() コールバックメソッドを呼び出し、angleFrom と angleTo の間の値をそのコールバックメソッドに渡します。エフェクトの終了時に、Tween オブジェクトは angleTo の値を使って onTweenUpdate() コールバックメソッドを呼び出します。エフェクトの持続時間の間、一定の時間間隔で onTweenUpdate() コールバックメソッドを呼び出すことで、対象のコンポーネントは、回転に伴い滑らかなアニメーションを表示します。

次の例に示すように、MXML アプリケーションで新しいエフェクトを使用します。

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

    <MyComp:Rotation id="Rotate90" 
        angleFrom="0" angleTo="360" 
        duration="1000"/>
 
    <mx:Image source="@Embed(source='../assets/myRotationImage.jpg')" 
        mouseDownEffect="{Rotate90}"/>
 
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、エフェクトによって、ユーザーがイメージをクリックするとイメージが回転します。