BetweenAS3を使ってカスタムイージングの始まりと終わりに別のイージング関数を指定する方法

BetweenAS3

ActionScriptでトゥイーンを作ろうとしたとき、始まりと終わりで別々のカスタムイージングを指定したいと思うことが多々あります。例えば、始まりはSineぐらいの緩やかなスタートにして、終わりはExpoぐらいの急なストップを指定したいという場合です。

Flash Professinalでは8以降のバージョンでタイムラインアニメーションであればカスタムイージングを作ることができますが、スクリプトでは始まりと終わりが別々のカスタムイージングは簡単に実現できません。そこで、そんなトゥイーンを簡単に作れるように、スクリプトジェネレーターを作ってみました。

使い方

  • 上記のライブラリ&サンプルからソースファイルをダウンロードします。jpフォルダにライブラリが入っていますので、ライブラリパスの通っているところにファイルを配置します。
  • 動作にはBetweenAS3が必要となるので、これもSpark Projectからダウンロードのうえ、同様に配置します。
  • スクリプトジェネレーターを調整し、希望のイージングができたところで、右側の[Copy Script]ボタンをクリックします。するとクリップボードにスクリプトがコピーされます。

適当にいい感じのトゥイーンを指定
※イージング関数の切り替わり点(青い線)がガクンとなってしまうので、コツとして中心点(Middile Percent)を試行錯誤してガクンとならない値を探します。

  • フレームアクションやクラスファイル等に、スクリプトをペーストします。
import jp.clockmaker.utils.*;
import org.libspark.betweenas3.easing.*;
BetweenUtil.customEase(obj, {x:300}, {x:0}, 5, Sine.easeIn, Expo.easeOut, 0.8).play();
  • 必要に応じてターゲットや開始値/終了値、時間を変更します。
import jp.clockmaker.utils.*;
import org.libspark.betweenas3.easing.*;
BetweenUtil.customEase(my_mc, {scaleX:300}, {scaleX:0}, 2, Sine.easeIn, Expo.easeOut, 0.8).play();

私の場合はPapervision3Dでデモを作るときに別々の制御を行いたいことが多かったため、今後も重宝して使っていくつもりです。もし同じようなことを考えている方がいらっしゃいましたらご自由にお使い下さい。(ソースコードはMITライセンスとします。)

関連記事

この記事は「[BetweenAS3] カスタムイージング」へ続きます。

投稿者 : 池田 泰延

BookMark

いかがでしたでしょうか、ブックマークはこちらからどうぞ。

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

Comment/Trackback 4件