tande lab.

[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片側または両側で動きを減速するアニメーション。
StrongRegularクラスとほぼ同じで、より大きい効果のアニメーション。
None最初から最後まで等速のアニメーション。
メソッド
easeInトランジションの最初にイージング効果を発生。
easeOutトランジションの最後にイージング効果を発生。
easeInOutトランジションの最初と最後にイージング効果を発生。
easeNoneイージング効果を使用しない。
Noneイージングクラスでのみ利用可能。

この辺が参考になります。
fl.transitions.easing パッケージ – ActionScript 3.0 コンポーネントリファレンスガイド

もっと柔軟なトゥイーン制御ができるTweenerというライブラリもあるようなので、今度そちらにも挑戦してみたいです。以下のURLが参考になります。
ActionScriptのトゥイーン制御ライブラリTweenerの使い方 | creator note
超訳:Tweenerドキュメント&言語リファレンス
AS3 で Tweener を使うFlash / ActionScript|プログラムメモ




0 comments
Submit comment