yoshiweb.NET-blog



HOME > blog > mx.transitions.Tweenクラス を拡張
« カスタムポリシーファイル crossdomain.xml について | 体験版期限切れ »

mx.transitions.Tweenクラス を拡張

スクリプトでトゥイーンさせるのに便利な mx.transitions.Tweenクラス。
デフォルトのものだと一定の強さでしか動作してくれないのでイージング加減を調節できるようなものを作ってみました。



CustomTween.as
/**
* mx.transitions.Tweenクラスを拡張
*/
class CustomTween extends mx.transitions.Tween {
    // 変化の度合いを制限する数値
    var MAX_EASING:Number = 10;
    // strength イージングの強さ
    var _s:Number = 0;
    /**
    *  CustomTween(obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean, strength:Number);
    *  @param obj Tween インスタンスのターゲットになるムービークリップオブジェクトです。
    *  @param prop 値がトゥイーンされる obj のプロパティのストリング名です。
    *  @param func トゥイーンされるオブジェクトのプロパティ値のイージング効果を計算するイージングメソッドです。 詳細については、イージングクラスとメソッドについてを参照してください。
    *  @param begin prop (トゥイーンされるターゲットオブジェクトのプロパティ) の開始値を示す数値です。
    *  @param finish prop (トゥイーンされるターゲットオブジェクトのプロパティ) の終了値を示す数値です。
    *  @param duration トゥイーンモーションの継続時間を示す数値です。 省略した場合、デフォルトで継続時間が無限に設定されます。
    *  @param useSeconds duration パラメータで指定した値の単位に関して、秒 (true の場合) またはフレーム (false の場合) のどちらを使用するかを示すブール値です。
    *  @param strength イージングの強さ。0-100で設定。0だと等速。
    */
    function CustomTween(obj, prop, func, begin, finish, duration, useSeconds, strength) {
        super(obj, prop, func, begin, finish, duration, useSeconds);
        if (strength != undefined) {
            // イージングの度合い(1~MAX_EASING+1の範囲へ変換)
            _s = Math.max(Math.min(strength/100*MAX_EASING, MAX_EASING), 0)+1;
        }
    }
    // イージングメソッドに引数を渡すように変更
    function getPosition(t:Number):Number {
        if (t == undefined) {
            t = this._time;
        }
        return this.func(t, this.begin, this.change, this._duration, this._s);
    }
}


Custom.as
class Custom {
    // 等速
    public static function easeNone(t:Number, b:Number, c:Number, d:Number):Number {
        return b+c*t/d;
    }
    // 加速
    public static function easeIn(t:Number, b:Number, c:Number, d:Number, s:Number):Number {
        return b+c*Math.pow(t/d, s);
    }
    // 減速
    public static function easeOut(t:Number, b:Number, c:Number, d:Number, s:Number):Number {
        return b+c*(1-Math.pow(1-t/d, s));
    }
    // 加速-減速
    public static function easeInOut(t:Number, b:Number, c:Number, d:Number, s:Number) {
        return (t<=(d /= 2)) ? b+c/2*Math.pow(t/d, s) : b+c-c/2*Math.pow(2-t/d, s);
    }
    // 減速-加速
    public static function easeOutIn(t:Number, b:Number, c:Number, d:Number, s:Number) {
        return (t<=(d /= 2)) ? b+c/2*(1-Math.pow(1-t/d, s)) : b+c/2*(1+Math.pow(t/d-1, s));
    }
}


フレーム1
// // 例: test_mc の x 座標を 30フレームで 50 から 350 に移動する。最後の引数がイージング加減。
new CustomTween(test_mc, "_x", Custom.easeOut, 50, 350, 30, false, 80);


Customクラスの計算式は Tatsuo Katoさんの dynTweenMX の function をクラス化したものです。
ちなみに easingクラス は標準で Back、Bounce、Elastic、Regular、Strong、None の6種類しかありませんが。
http://www.robertpenner.com/easing/ こちらからもう少し多くのクラスを入手できます。


Flashのヘルプ - Tween クラス
Team Macromedia : Tatsuo Kato
Macromedia - Using the Tween and Transition Classes in Flash MX 2004*
Fumiononaka.com - TransitionManager と Tweenクラス
Fumiononaka.com - Tweenクラス
投稿者 yoshiweb - ActionScript - 2005/10/14 - 04:17:27 - Permalink
このエントリーをはてなブックマークに追加

Comments

CustomTweenクラスを少し拡張してアクション終了後コールバック関数を呼び出せるようにしました。

/**
* mx.transitions.Tweenクラスを拡張
*/
class CustomTween extends mx.transitions.Tween {
// 変化の度合いを制限する数値
var MAX_EASING:Number = 10;
// strength イージングの強さ
var _s:Number = 0;
// setIntervalのID
var intervalID : Number;
// ターゲットのオブジェクト
var ref : Object;
// 呼び出す関数名
var method : String;
// 関数の引数
var args : Array;

/**
* CustomTween(obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean, strength:Number, callBack : Object);
* @param obj Tween インスタンスのターゲットになるムービークリップオブジェクトです。
* @param prop 値がトゥイーンされる obj のプロパティのストリング名です。
* @param func トゥイーンされるオブジェクトのプロパティ値のイージング効果を計算するイージングメソッドです。 詳細については、イージングクラスとメソッドについてを参照してください。
* @param begin prop (トゥイーンされるターゲットオブジェクトのプロパティ) の開始値を示す数値です。
* @param finish prop (トゥイーンされるターゲットオブジェクトのプロパティ) の終了値を示す数値です。
* @param duration トゥイーンモーションの継続時間を示す数値です。 省略した場合、デフォルトで継続時間が無限に設定されます。
* @param useSeconds duration パラメータで指定した値の単位に関して、秒 (true の場合) またはフレーム (false の場合) のどちらを使用するかを示すブール値です。
* @param strength イージングの強さ。0-100で設定。0だと等速。
*/
function CustomTween(obj, prop, func, begin, finish, duration, useSeconds, strength) {
super(obj, prop, func, begin, finish, duration, useSeconds);
if (strength != undefined) {
// イージングの度合い(1~MAX_EASING+1の範囲へ変換)
_s = Math.max(Math.min(strength/100*MAX_EASING, MAX_EASING), 0)+1;
}
if(callBack != undefined){
ref = callBack.ref;
method = callBack.method;
args = callBack.args;
if(useSeconds){
intervalID = setInterval(this, "callBack", duration * 1000);
}
}
}
// イージングメソッドに引数を渡すように変更
function getPosition(t:Number):Number {
if (t == undefined) {
t = this._time;
}
return this.func(t, this.begin, this.change, this._duration, this._s);
}

// コールバック関数
function callBack(){
clearInterval(intervalID);
ref[method].apply(ref,args);
}
}

こんな感じで使います
new CustomTween(test_mc, "_alpha", jp.ojos.easing.Circ.easeOut, 0, 100, 5, true, 30, {ref : this.test_mc, method : "testMethod", args : ["a" , 100]});

test_mc.testMethod = function(aaa:String,bbb:Number) : Void{
trace("aaa : " + aaa);
trace("bbb : " + bbb);
}

今使っているのと若干コードが違いますがたぶんいけるはずです
投稿者 ojos - 2005/10/24 - 22:15:26
はじめまして ojosさん。一応、Tweenクラスでもアクション終了時にonMotionFinishedメソッドが呼ばれているようですが、機会があったら使ってみようと思います。どうもありがとうございます。(^-^)
こんな風にカスタマイズしたクラスや自作した便利なクラスをいろんな人同士で共有しあえるといいですね。
投稿者 yoshiweb - 2005/10/25 - 02:18:25

コメントを書く

※ スパム対策のためコメント内の URL は全角で書いてください。あとで半角に変換します。