Flex は 1 つのアーキテクチャを使用してエフェクトを実装します。このアーキテクチャでは、各エフェクトは、ファクトリクラスとインスタンスクラスの 2 つのクラスによって表現されます。したがって、カスタムエフェクトを実装するには、ファクトリクラスとインスタンスクラスの 2 つのクラスを作成します。

ファクトリクラスを作成するには、mx.effects.Effect クラスのサブクラスを作成するか、mx.effects.Effect クラスのいずれかのサブクラスのサブクラスを作成します。インスタンスクラスを作成するには、mx.effects.EffectInstance クラスのサブクラスを作成するか、mx.effects.EffectInstance クラスのいずれかのサブクラスのサブクラスを作成します。

次のイメージは、エフェクトのクラス階層を示しています。

ファクトリクラスとインスタンスクラスの定義

カスタムエフェクトを定義するには、ファクトリクラスとインスタンスクラスの 2 つのクラスを作成します。

ファクトリクラス 

ファクトリクラスは、インスタンスクラスのオブジェクトを作成し、そのターゲット上でエフェクトを実行します。アプリケーション内でファクトリクラスインスタンスを作成し、ズームサイズやエフェクトの持続時間など、エフェクトを制御するために必要なプロパティをそのインスタンスに設定します。その後、次の例に示すように、ファクトリクラスインスタンスを、対象のコンポーネントのエフェクトトリガに割り当てます。

<!-- Define factory class. -->
<mx:WipeDown id="myWD" duration="1000"/>
<!-- Assign factory class to effect targets. -->
<mx:Button id="myButton" mouseDownEffect="{myWD}"/>
<mx:Button id="myOtherButton" mouseDownEffect="{myWD}"/>

慣例では、ファクトリクラスの名前は Zoom または Fade などのエフェクトの名前になります。

インスタンスクラス 

インスタンスクラスは、エフェクトロジックを実装します。エフェクトトリガが実行されるか、ユーザーが play() メソッドを呼び出してエフェクトを起動すると、ファクトリクラスによりインスタンスクラスのオブジェクトが作成され、そのターゲット上でエフェクトが実行されます。エフェクトの再生が終了すると、Flex によりインスタンスオブジェクトが破棄されます。エフェクトの対象となるコンポーネントが複数ある場合には、ファクトリクラスは対象ごとに 1 つずつ複数のインスタンスオブジェクトを作成します。

慣例として、インスタンスクラスの名前は、ZoomInstance や FadeInstance のように、エフェクト名に接尾辞 Instance を付加した名前になります。

エフェクト基本クラスについて

エフェクトクラス階層からサブクラスを作成して、エフェクトを定義します。通常、次のいずれかのクラスからサブクラスを作成します。

• mx.effects.Effect 一定時間エフェクトを再生する必要がない単純なエフェクトの場合は、このクラスからサブクラスを作成します。例えば、Pause エフェクトは 2 つの連続するエフェクトの間に遅延時間を挿入します。また、MP3 ファイルを再生する単純なサウンドエフェクトを定義することもできます。
• mx.effects.TweenEffect アニメーションなどの一定時間再生するエフェクトを定義するには、このクラスからサブクラスを作成します。例えば、Resize エフェクトは TweenEffect クラスのサブクラスであり、指定された持続時間の間ターゲットのサイズを変更します。

エフェクトクラスの実装について

カスタムエフェクトクラスの一部のメソッドとプロパティをオーバーライドし、エフェクトを実装するのに必要な新しいプロパティとメソッドを定義する必要があります。また、作成するエフェクトのタイプに応じて、追加のプロパティとメソッドをオーバーライドすることもできます。

次の表に、ファクトリクラスで定義するメソッドとプロパティを示します。

次の表に、インスタンスクラスで定義するメソッドとプロパティを示します。

例：単純なエフェクトの定義

単純なカスタムエフェクトを定義するには、mx.effects.Effect 基本クラスからファクトリクラスを作成し、さらに mx.effects.EffectInstance クラスからインスタンスクラスを作成します。次のコードは、Sound オブジェクトを使用して、ユーザーの操作に対する応答として埋め込み MP3 ファイルを再生するエフェクトクラスの例です。この例は、Flex で提供されている SoundEffect クラスの簡易版です。

package myEffects
{
   // myEffects/MySound.as
   import mx.effects.Effect;
   import mx.effects.EffectInstance;
   import mx.effects.IEffectInstance;

   public class MySound extends Effect
   {
       // Define constructor with optional argument.
       public function MySound(targetObj:Object = null) {
           // Call base class constructor.
           super(targetObj);
           
           // Set instanceClass to the name of the effect instance class.
           instanceClass= MySoundInstance;         
       }
      
       // This effect modifies no properties, so your 
       // override of getAffectedProperties() method 
       // returns an empty array.
       override public function getAffectedProperties():Array {
           return [];
       }
        
       // Override initInstance() method.
       override protected function initInstance(inst:IEffectInstance):void {
           super.initInstance(inst);
       }   
   }
}

クラス内の package ステートメントは、myEffects ディレクトリ内にクラスを展開する必要があることを示します。この例では、Flex アプリケーションを含むディレクトリのサブディレクトリに配置されます。そのため、Flex アプリケーションの名前空間定義は xmlns:MyComp="myEffects.*" になります。展開について詳しくは、コンポーネントのコンパイルを参照してください。

インスタンスクラスを定義するには、mx.effects.EffectInstance クラスからサブクラスを作成します。クラス定義内で、コンストラクタと play() メソッドを定義する必要があります。オプションでエフェクトを停止する end() メソッドを定義することもできます。

package myEffects
{
    // myEffects/MySoundInstance.as
    import mx.effects.EffectInstance;
    import flash.media.SoundChannel;
    import flash.media.Sound;

    public class MySoundInstance extends EffectInstance
    {

        // Embed the MP3 file.
        [Embed(source="sample.mp3")]
        [Bindable]
        private var sndCls:Class;
            
        // Define local variables. 
        private var snd:Sound = new sndCls() as Sound; 
        private var sndChannel:SoundChannel;
            
        // Define constructor.
        public function MySoundInstance(targetObj:Object) {
            super(targetObj);
        }

        // Override play() method.
        // Notice that the MP3 file is embedded in the class.
        override public function play():void {
            super.play();
            sndChannel=snd.play();
        }
    
        // Override end() method class to stop the MP3.
        override public function end():void {
            sndChannel.stop();
            super.end();
        }
    }
}

MXML ファイルでカスタムエフェクトクラスを使用するには、ファクトリクラスと同じ名前を持つタグを MXML ファイルに挿入します。カスタムエフェクトは、標準のエフェクトと同じ方法で参照できます。

次のコードは、MySound エフェクトを使用するアプリケーションの例です。

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

    <MyComp:MySound id="mySoundEffect" />

    <!-- Use the SoundEffect effect with a mouseOver trigger. -->
    <mx:Label text="play MP3" rollOverEffect="{mySoundEffect}" />
    
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

例：パラメータのエフェクトへの受け渡し

エフェクトをより堅牢にするために、通常は、ユーザーがパラメータをエフェクトに渡すように設計します。このセクションの例では、前セクションのサウンドエフェクトを、再生する MP3 ファイルを指定するパラメータを取るように変更します。

package myEffects
{
    // MySoundParam.as
    import mx.effects.Effect;
    import mx.effects.EffectInstance;
    import mx.effects.IEffectInstance;

    public class MySoundParam extends Effect
    {
    
       // Define a variable for the MP3 URL
       // and give it a default value.
       public var soundMP3:String=
           "http://localhost:8100/flex/assets/default.mp3";
    
       // Define constructor with optional argument.
       public function MySoundParam(targetObj:Object = null) {
           // Call base class constructor.
           super(targetObj);

           // Set instanceClass to the name of the effect instance class.
          instanceClass= MySoundParamInstance;            
       }

       // Override getAffectedProperties() method to return an empty array.
       override public function getAffectedProperties():Array {
           return [];
       }
    
       // Override initInstance() method.
       override protected function initInstance(inst:IEffectInstance):void {
           super.initInstance(inst);
           // initialize the corresponding parameter in the instance class.
           MySoundParamInstance(inst).soundMP3 = soundMP3;     
       } 
   }
}

MySoundParam クラスで、エフェクトのユーザーが、再生する MP3 ファイルの URL を指定できるように、変数 soundMP3 を定義します。また、soundMP3 変数の値をインスタンスクラスに渡すように、initInstance() メソッドのオーバーライドを変更します。

これまで同様、getAffectedProperties() メソッドは空の配列を返します。これは、getAffectedProperties() が、エフェクト自身のプロパティを返すのではなく、エフェクトによって変更されるエフェクトターゲットのプロパティリストを返すからです。

インスタンスクラスで、ファクトリクラスの同じ名前のプロパティに対応する soundMP3 プロパティを定義します。その後、次の例に示すように、soundMP3 プロパティを使用してサウンドを再生する URLRequest オブジェクトを作成します。

package myEffects
{
    // MySoundParamInstance.as
    import mx.effects.EffectInstance;
    import flash.media.Sound;
    import flash.media.SoundChannel;
    import flash.net.URLRequest;

    public class MySoundParamInstance extends EffectInstance
    {

        // Define local variables. 
        private var s:Sound;
        private var sndChannel:SoundChannel;
        private var u:URLRequest;

        // Define a variable for the MP3 URL.
        public var soundMP3:String;

        // Define constructor.
        public function MySoundParamInstance(targetObj:Object) {
            super(targetObj);
        }

        // Override play() method.
        override public function play():void     {
            // You must call super.play() from within your override.
            super.play();
            s = new Sound();
            // Use the new parameter to specify the URL.
            u = new URLRequest(soundMP3);
            s.load(u);
            sndChannel=s.play();
        }
    
        // Override end() method to stop the MP3.
        override public function end():void  {
            sndChannel.stop();
            super.end();
        }
    }
}

これで、次の例に示すように、MP3 の URL をエフェクトに渡すことができます。

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

    <MyComps:MySoundParam id="mySoundEffect" 
        soundMP3="http://localhost:8100/flex/assets/sample.mp3"/>

    <!-- Use the SoundEffect effect with a mouseOver trigger. -->
    <mx:Label text="play MP3" rollOverEffect="mySoundEffect"/>
    
</mx:Application>