[AS3] Tweenクラスを利用する
モーショントゥイーンはスクリプトで書いた方が楽なのかも。
秒数またはフレーム数でアニメーション時間を指定できるし。
私がよく使うTweenクラスのテンプレです。
// パッケージのインポート import fl.transitions.Tween; import fl.transitions.easing.*; import fl.transitions.TweenEvent; // 設定用の変数を準備 var twMc:MovieClip; //トゥイーン対象のムービークリップ var twValue:String; //トゥイーン対象の値(ex. X座標をトゥイーンさせたい場合は"x"を指定) var twType; //イージング種類(ex. Bounce.easeOut) var twStart:Number; //Tweenの開始値 var twEnd:Number; //Tweenの終了値 var twSec:int; //トゥイーン動作秒・フレーム数 var twTimeType:Boolean; //トゥイーンする時間単位(true:秒、false:フレーム) function tweenFunc(){ // トゥイーンの値を設定 twMc = test_mc; twValue = "alpha"; twType = None.easeIn; twStart = 1; twEnd = 0; twSec = 10; twTimeType = false; // トゥイーン実行 var tw:Tween = new Tween(twMc, twValue, twType, twStart, twEnd, twSec, twTimeType); // トゥイーン終了を検知してから別のことを実行させたい場合は下記を記述 tw.addEventListener(TweenEvent.MOTION_FINISH, twFinish); function twFinish(e:TweenEvent):void{ // トゥイーン終了後に実行したいことを記述 tw.yoyo(); } } // トゥイーンを実行 tweenFunc();
上のサンプルコードだと、test_mcというムービークリップのalpha値をトゥイーンしています。ふわっと消えるアニメーションになります。
yoyo(); はTweenクラスに用意されているメソッドのひとつで、トゥイーンを逆再生します。用意されているメソッドやaddEventListenerで利用できるイベントについては以下が参考になります。
Tween – ActionScript 3.0 コンポーネントリファレンスガイド
また、トゥイーンに指定できるイージング(アニメーション)種類は以下のクラスとメソッドを組み合わせて利用します。
トゥイーンに指定できるイージング種類
名称 | 説明 |
---|---|
イージングクラス | |
Back | トランジション範囲の片側または両側を一度超えてアニメーションを拡大し、範囲の外側から引き戻すようなアニメーション。 |
Bounce | 落下したボールがフロアでバウンドし、バウンドの量が減っていくようなアニメーション。 継続時間が長くなると、バウンド回数が増える。 |
Elastic | トランジション範囲の片側または両側で範囲を超えた伸縮アニメーション。 |
Regular | 片側または両側で動きを減速するアニメーション。 |
Strong | Regularクラスとほぼ同じで、より大きい効果のアニメーション。 |
None | 最初から最後まで等速のアニメーション。 |
メソッド | |
easeIn | トランジションの最初にイージング効果を発生。 |
easeOut | トランジションの最後にイージング効果を発生。 |
easeInOut | トランジションの最初と最後にイージング効果を発生。 |
easeNone | イージング効果を使用しない。 Noneイージングクラスでのみ利用可能。 |
この辺が参考になります。
fl.transitions.easing パッケージ – ActionScript 3.0 コンポーネントリファレンスガイド
もっと柔軟なトゥイーン制御ができるTweenerというライブラリもあるようなので、今度そちらにも挑戦してみたいです。以下のURLが参考になります。
ActionScriptのトゥイーン制御ライブラリTweenerの使い方 | creator note
超訳:Tweenerドキュメント&言語リファレンス
AS3 で Tweener を使うFlash / ActionScript|プログラムメモ