まずはTweenerのレポジトリからcaurina以下のディレクトリを同じ構成でローカルにダウンロード。Flashの環境設定のActionScript3.0設定からローカルに構成したディレクトリにクラスパスを設定したら完了。安定バージョンの1.26.62はこちらからダウンロードできます。

というわけでまずは基本。ステージ上のmcの位置を(20, 20)から(400, 300)へトゥイーンします。

import caurina.transitions.Tweener;
mc.x = mc.y = 20;
Tweener.addTween(mc, {x:400, y:300, transition:"liner", time:2});

まずTweenerをインポート。mcの初期値を設定。Tweener.addTween(ターゲット, {色々})でTween。time:2は2秒かけて動く、っていうこと。この時、イージングの値を設定するtransition:"liner"を、"easeOutStrong"や、"easeInOutExpo"などにすると、ちょっと気持ちがいいモーションになったりします。イージングの値はこのページで確認できます。

ほかにもalphaやscaleX、scaleYが変化するモーションなども簡単に作れます。

import caurina.transitions.Tweener;
mc.scaleX = mc.scaleY = 4;
mc.alpha = 0;
Tweener.addTween(mc, {alpha:1, scaleX:1, scaleY:1, transition:"easeOutElastic", time:2});

要は、その第一引数のmc=MovieClipが持っている数値系のプロパティだったらなんだって変化させることが可能なわけです。

話は変わって、ベジエ曲線軌道でトゥイーンする方法はこちら。

import caurina.transitions.Tweener;
import caurina.transitions.properties.CurveModifiers;
CurveModifiers.init();
mc.x = 40;
mc.y = 100;
Tweener.addTween(mc, {x:460, y:100, _bezier:[{x:266, y:212}, {x:134, y:57}, {x:81, y:206}], time:3, transition:"linear"});

_bezier配列に座標を設定してやると、その点を「ベジエ曲線軌道のコントロールポイント」とした、トゥイーンが行なわれます。自然界的で有機的なモーションを作りたいときに重宝すると思われます。propertiesパッケージのCurveModifiersパッケージもインポートしておく必要があり、かつ、CurveModifiers.init();という一行も加える必要がありますので注意。

他にも色を変化させたり、ブラーやドロップシャドウなどのフィルターの掛かり具合を変化させたり、テキストフィールドの内容を変化させたり、サウンドのボリュームを変化させることもできたりするのでダウンロードしたpropertiesパッケージ以下のクラスファイルを直接眺めてみたりしてください。

さて、トゥイーンが終わったら関数を呼び出す方法はこちら。

import caurina.transitions.Tweener;
mc.x = 40;
mc.y = 100;
Tweener.addTween(mc, {x:460, y:100, onComplete:setBtn, onCompleteParams:[mc], time:3, transition:"linear"});

onComplete ... トゥイーンが終わったら指定の関数を呼び出す
onCompleteParams ... onCompleteハンドラに対して渡す引数のリスト。引数が一つだけでも[]でくくって配列化。

これによって、インタラクティブなモーションをスクリプトでガンガン組むことができますね。トゥイーンが終わったらaddEventListener(MouseEvent.MOUSE_DOWN, onMouseDownHandler)みたいな。

ちなみに他にも"onStart"など、様々なイベントハンドラ用プロパティが用意されていますのでAPIリファレンスのページをご覧ください。

とりあえずこれだけ知れば、Tweenerで簡単にインタラクティブなモーションを組むことができます。

素敵すぎます、Tweener。