[Flex]カスタムエフェクトの作成 #2

Tweet

以下のAdobeのサンプルを参考にしながら自分でも作成してみた。

トゥイーンエフェクトについて

ファクトリクラス

TestEffect.as

package
{
    import mx.effects.IEffectInstance;
    import mx.effects.TweenEffect;

    public class TestEffect extends TweenEffect
    {
        public function TestEffect(target:Object=null)
        {
            super(target);
            instanceClass= TestEffectInstance;
        }

        override public function getAffectedProperties():Array{
            return ["rotation"];
        }

        override protected function initInstance(inst:IEffectInstance):void{
            super.initInstance(inst);
            TestEffectInstance(inst).angleFrom = 0;
            TestEffectInstance(inst).angleTo = 360;
        }
    }
}

ファクトリクラスを作成するときに最低限必要な4つのルール

1. コンストラクタの実装

   コンストラクタ内では必ずsuper()メソッドを実行すること。 引数に受け取ったターゲットオブジェクトも渡す。

2. instanceClassの設定

   通常はコンストラクタ内で実行する。インスタンスクラスとしてどのクラスを使うかの指定。 Classタイプのオブジェクトを指定するとのこと。（例のようにクラス名をそのまま代入するイメージ）

3. initInstanceメソッドのオーバーライド

   必ず最初にsuper.initInstance()メソッドを実行する。 引数として受け取ったインスタンスクラスをそのまま渡す。

   また、その他、事前に準備したい自分のエフェクト固有の値などはここでセットする。 例ではインスタンスクラスに回転の開始角度と終了角度を代入している。

4. getAffectedPropertiesメソッドのオーバーライド

   エフェクトのターゲットとなるオブジェクトに対して、どのパラメータを変更するかを指定する。 しかし、実際にはこのメソッドはなくても動いた。 どういうときに使われるかは不明だが、念のため指定しておいたほうがいいのだろう。 （何かの拍子にエラーが発生したりするのかもしれないため。） 今回はrotationプロパティを変更するため"rotation"という文字列を配列形式で返している。

インスタンスクラス

TestEffectInstance.as

package
{
    import mx.effects.Tween;
    import mx.effects.effectClasses.TweenEffectInstance;

    public class TestEffectInstance extends TweenEffectInstance
    {
        public var angleFrom:Number;
        public var angleTo:Number;

        public function TestEffectInstance(target:Object)
        {
            super(target);
        }

        override public function play():void {
            super.play();
            createTween(this, angleFrom, angleTo, duration);
        }

        override public function onTweenUpdate(val:Object):void {
            target.rotation = val;
        }

        override public function onTweenEnd(val:Object):void {
            super.onTweenEnd(val);
        }
    }
}

ファクトリクラスを作成するときに最低限必要な2+1つのルール

1. コンストラクタの実装

   受け取ったターゲットオブジェクトを引数にsuper()メソッドを実行するだけでいいみたい。

2. playメソッドのオーバーライド

   エフェクト開始時に呼び出されるメソッド。今回はTweenEffectInstanceを継承しているため、createTweenメソッドを実行する必要がある。createTweenメソッドの引数は通常以下のようになる。

   createTween(this, 開始値, 終了値 [, アニメーションの継続時間(ミリ秒), アニメーション実行の最小回数(/秒) ] )
   

   慣れないうちは createTween(this, 開始値, 終了値) でいいと思う。

3. TweenEffectInstance.onTweenUpdateメソッドのオーバーライド

   こちらはTweenEffectを継承したエフェクトを作成しているときのみの制約。 アニメーション更新のタイミングごとに呼び出されるので、ターゲットオブジェクトのプロパティを更新する。 今回の例ではrotationを更新すればよい。 これで回転処理のアニメーションが実行される。

また、TweenEffectInstanceにはonTweenEnd()メソッドのようにアニメーション終了後に呼び出されるメソッドもあり、後処理などが必要な場合は適時オーバーライドすればよい。

ここまでできれば後は以下のようにMXMLファイル内で上記で作ったTestEffectを指定してやればよい。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="400">
    <mx:Button x="150" y="150" label="回転します" width="100" height="100" mouseDownEffect="{TestEffect}"/>
</mx:Application>

できた。 思ってたよりも簡単だ。