[BetweenAS3] カスタムイージング

Flashではスクリプトでトゥイーンを作るとインタラクションに関わるいろいろ制御が楽だったりするのですが、トゥイーンライブラリにビルドインされているイージングの種類も限られているので、求めている動きに近づけるときに限界を感じることがたまにあります。

ということで、BetweenAS3のイージング関数の引数に、Flash Professionalのようなカスタムイージングを適用するデモを作ってみました。ベジェでイージングの曲線をカスタマイズすると、わりと求めている動きに近づけられるかもしれません。


Flash Professional カスタムイーズイン、イーズアウト

メモ1.

BetweenAS3にカスタムイージングを適用する方法は、Custom.func()を使って次のようなスクリプトを記述します。

var ease:IEasing = Custom.func(
    /**
    * @param t 時間
    * @param b 開始値 (0.0が代入される)
    * @param c 増加の傾き (1.0が代入される)
    * @param d デュレーション
    *
    * @return 0.0〜1.0周辺の結果を返せばOK
    */
    function(t:Number, b:Number, c:Number, d:Number):Number {
        return c * (t/d) + b; // ここをカスタマイズ
    }
});

BetweenAS3.to(target_mc, {x:100}, 10, ease).play();

メモ2.

出力機能とか付けていないので見るだけのデモですが、いつか時間ができたらAIRアプリとかにしてコピペできるようにしてみたいところです。別の方法になりますが、始まりと終わりに別々のイージング関数を指定する方法も以前ブログに記事を投稿しました。

メモ3.

Progression4にはTweenListというリストコマンドが搭載されています。トゥイーンだけでなく、関数をイージング付けて実行したいときなどにはTweenListは重宝します。どういう使い方ができるかというと、次のデモがわかりやすいかと思います。

メモ4.

ベジェ曲線はこちらの記事が参考になりました。Flash Professional同梱のBezierSegmentクラスにはgetYforX()という便利なメソッドが用意されていて、それを使うとカスタムイージングが作りやすいです。

この記事は「カスタムイージングを作成できるAIRアプリEasing Generator」へ続きます。

投稿者 : 池田 泰延

BookMark

ブックマークはこちらからどうぞ。

このエントリーをはてなブックマークに追加