キテレツ荘 » tweenerあれこれ

アニメーションのためのスクリプトは、スキル向上のためにもなるべく自分で書くという考えもあるけれど、そうは言っても実際の製作となれば、時間と労力を削減してくれるtweener。シンプルにTweener.addTween()メソッドだけ知っていれば十分かと思っていたけれど、あらためてドキュメントを見たらいろいろ便利な機能があるようなので、あたりまえに知られていることかもしれないけれど、個人的に利用価値が高そうと思ったものをMEMO。

isTweening()
tweenerのtweenが継続しているあいだ、ボタン操作などを無効にしたいということがたまにあり、一つの方法として、Tweener.isTweening()メソッドが使えそう。

Tweener.isTweening(target:Object):Boolean;

そのタイミングで、引数に入れたオブジェクトがtweenerによってアニメーションされているかどうかを、trueかfalseで調べることができるので、チェックボックスを有効にしていると、モーション中は操作をブロックするようにしてみた（この作例では意味ないけど）。

tweenOn = Tweener.isTweening(earth.container) || Tweener.isTweening(earth.camera);
// モーション中かどうか

if(tweenOn) {
if(btCheckBox.currentLabel == “checkOff”) {
// チェックボックスの状態を判定
uiEnable = true;
// ボタン操作の有効・無効を指示する変数
} else {
uiEnable = false;
}
} else {
uiEnable = true;
}

onStartとonCompleteのパラメータで、開始と終わりにイベントリスナーを入り切りする関数を実行させる方法もありそうだけれど、複数のtweenが重なるとややこしいことになりそうだと思った。

Special Properties – ColorShortcuts

こんな便利なものがあったとは。作例のボタンのように、なめらかに状態が変化するボタンはよく使うけれど、スクリプトでやろうとするとmyMC.transform.colorTransformプロパティをColorクラスとかでごにょごにょしたりして結構大変だけれど、Special PropertiesのColorShortcutsを使うと一発だ。

import caurina.transitions.Tweener;
import caurina.transitions.properties.ColorShortcuts;
ColorShortcuts.init();
//クラスをインポートして初期化

hoge.addEventListener(MouseEvent.ROLL_OVER, buttonOverHandler);
hoge.addEventListener(MouseEvent.ROLL_OUT, buttonOutHandler);

function buttonOverHandler(event:MouseEvent):void
{
Tweener.addTween(hoge.bg, {_brightness:0.4, time:0.5, transition:”easeOutSine”});
}

function buttonOutHandler(event:MouseEvent):void
{
Tweener.addTween(hoge.bg, {_brightness:0, time:0.5, transition:”easeOutSine”});
}

作例では明度を４０％上げているけど、rgbaやコントラスト、彩度など色々なパラメータを変化させられる。タイムラインのモーショントゥイーンでつくると、あとで変更したくなったとき大変だけど、スクリプトでつくれば柔軟性が高い。

Special Propertiesには、他にもフィルターやサウンドを変化させるものなど色々あるので活用してみたい。詳細はここ。

tweener(Google code)
JHT’s Planetary Pixel Emporium　（作例の地球と月のテクスチャ）