Tweenerでアニメーションを作成
FLASHでアニメーションを作成するには、フレームパネル上でキーフレームを配置して作成する方法と、Action Scriptで動的に作成する方法があります。フレームパネルではトゥイーンを使って簡単にスムーズなアニメーションを作成できますが、Action Scriptで同じ事を実現しようとすると、どうしても複雑なコードになりがちです。
そんな時に複雑なアニメーション処理を担ってくれるライブラリ、Tweenerが便利です。
次のサンプルはとてもシンプルな例です。
ターゲットの円をクリックすると、ステージの右側へ徐々にスピードダウンしながら移動します。
import caurina.transitions.Tweener;
//ターゲットをクリックでトゥイーンを開始
target_mc.addEventListener(MouseEvent.CLICK, startTween)
function startTween(event:MouseEvent):void {
Tweener.addTween(event.target, {
time: 2, //アニメーション時間を2秒に設定
x: 300 //x座標を300まで移動
});
}
アニメーション時間に2秒、X座標に300のパラメータを指定しているだけのシンプルなコードです。
アニメーションの動きはデフォルトだと徐々にスピードダウンしていくイーズアウトのような動きですが、パラメータを与えることによってイーズインやスプリングのような動きも可能です。
次のサンプルは、もう少しパラメータを増やした例です。また標準のクラスの他に、「DisplayShortcuts」と「ColorShortcuts」も利用しています。
アニメーションの動きは「transration」パラメータに「easeOutElastic」というスプリングのような動きを使っています。
アニメーションの動きはデフォルトだと徐々にスピードダウンしていくイーズアウトのような動きですが、パラメータを与えることによってイーズインやスプリングのような動きも可能です。
次のサンプルは、もう少しパラメータを増やした例です。また標準のクラスの他に、「DisplayShortcuts」と「ColorShortcuts」も利用しています。
アニメーションの動きは「transration」パラメータに「easeOutElastic」というスプリングのような動きを使っています。
import caurina.transitions.Tweener;
import caurina.transitions.properties.DisplayShortcuts;
import caurina.transitions.properties.ColorShortcuts;
//クラスのイニシャライズ
DisplayShortcuts.init();
ColorShortcuts.init();
target_mc.addEventListener(MouseEvent.CLICK, startTween)
function startTween(event:MouseEvent):void {
Tweener.addTween(event.target, {
time: 2,
delay: 1, //アニメーション開始までの静止時間に1秒を設定
x: 300,
_scale: 2, //スケールを2倍に拡大(DisplayShortcuts)
_color: 0x817d00, //カラーを黄緑に変更(ColorShortcuts)
transition: "easeOutElastic"
});
}
最後にぼかし効果を行うためのクラス「FilterShortcuts」と、アニメーション完了時に関数を呼び出すパラメータ「onComplete」を追加します。
また「onCompleteParams」パラペータを使うと、関数を実行する際に引数を渡すことができます。
また「onCompleteParams」パラペータを使うと、関数を実行する際に引数を渡すことができます。
import caurina.transitions.Tweener;
import caurina.transitions.properties.DisplayShortcuts;
import caurina.transitions.properties.FilterShortcuts;
import caurina.transitions.properties.ColorShortcuts;
DisplayShortcuts.init();
FilterShortcuts.init();
ColorShortcuts.init();
target_mc.addEventListener(MouseEvent.CLICK, startTween)
function startTween(event:MouseEvent):void {
Tweener.addTween(event.target, {
time: 2,
delay: 1,
x: 300,
_scale: 2,
_color: 0x817d00,
_Blur_blurX: 25, //ぼかしをX、Yともに25ピクセルに設定
_Blur_blurY: 25,
_Blur_quality: 2, //ぼかしのクォリティを2に設定(デフォルトは1(MEDIUM))
transition: "easeOutElastic",
onComplete: completeHandler, //アニメーション終了時に関数を実行
onCompleteParams: [100, 100] //関数に引数を配列で渡します
});
}
function completeHandler(posX:int, posY:int):void {
target_mc.x = posX;
target_mc.y = posY;
}
こんな感じで、Tweenerを使ってアニメーションを作成すると、とても簡単に思えます。
サンプルのようなシンプルなアニメーションでも、もしTweenerを使わずに作成しようとするなら、けっこうな作業になりそうです。
Tweenerの詳しいマニュアルは、英語版ですがWEBで公開されています。
Tweener Documentation and Language Reference
パラメータをオブジェクトで渡す方法や、その他のメソッドを応用することで、さらに複雑な処理ができそうです。
サンプルのようなシンプルなアニメーションでも、もしTweenerを使わずに作成しようとするなら、けっこうな作業になりそうです。
Tweenerの詳しいマニュアルは、英語版ですがWEBで公開されています。
Tweener Documentation and Language Reference
パラメータをオブジェクトで渡す方法や、その他のメソッドを応用することで、さらに複雑な処理ができそうです。
※サンプルデータのご利用は自己責任でお願いいたします。