Flash：ActionScript3.0　Tweenのサンプルと使い方

2016-02-05 16:56:09

先日の記事でFlashのActionScriptでのアニメーションは「Tweener」が簡単でいいよ、という内容の記事を書きましたが、よくよく調べてみると、どうも昔の話みたい。
Tweener開発者の方も、ActionScript3.0の「Tween」には満足だから、もう「Tweener」の新型は作らないよ、といっているらしい。

今回Tweenを使う練習と、自分様にTweenアニメーションの種類別のサンプルを作成してみました。

AS3：Tweenアニメーションのサンプル

Tweenオブジェクトを作成するときに使う、easingの種類（イージング関数）別サンプルを作成してみました。

※ サンプルのflaファイルをダウンロード

AS3：Tweenアニメーションの使い方

使い方はリファレンスのとおりで、いたって簡単。

Tween(obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean = false)
Tween クラスのインスタンスを作成します。コンストラクター関数を new 演算子と共に使用します。
例：var myTween:Tween = new Tween()

パラメーター

obj:Object — Tween のターゲットになるオブジェクト。

prop:String — 影響を受ける（obj パラメーター値）のプロパティの名前です。

func:Function — 使用するイージング関数の名前です。

begin:Number — prop パラメーター（トゥイーンされるターゲットオブジェクトのプロパティ）の開始値を示す数値です。

finish:Number — prop パラメーター（トゥイーンされるターゲットオブジェクトのプロパティ）の終了値を示す数値です。

duration:Number — モーションの継続時間です。負の数、または省略されている場合、infinity に設定されます。

useSeconds:Boolean (default = false) — フレーム数ではなく、秒を使用するかどうかを指定するフラグです。true の場合、関数は秒を使用します。または、duration パラメーターで指定した値に基づき、false の場合は、フレーム数を使用します。

補足するとすれば、
第２引数の『prop』は「x」「y」「width」「height」「scale」などになります。

『useSeconds』をtrueにした場合、『duration』に指定した数値は「アニメーション終了までにかかる秒数」とされます。

Tweenerを使う時と大きく異なると感じたのは、プロパティ（prop）は「x」「y」「width」「height」「scale」など、１種類ずつそれぞれ指定してやらなければうまくいかない、といった点でしょうか。

例えば、
1. 「mc」という名前のインスタンスを
2. 横+300px・縦-200pxの位置（ななめ右上）に
3. バウンドするアニメーションで
4.5 ５秒かけて動かしたいと思ったら、


import fl.transitions.*;
import fl.transitions.easing.*;

var myTweenX:Tween = new Tween(mc, "x", Bounce.easeOut, mc.x, mc.x + 300, 5, true);
var myTweenY:Tween = new Tween(mc, "y", Bounce.easeOut, mc.x, mc.x - 200, 5, true);

//Tween(obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean = false)

というコードを記述して動かします。
Tweenオブジェクトが生成されると、アニメーションが自動的にスタートします。

上の例では「myTweenX」と「myTweenY」の２つのオブジェクトを作成して動かしています。

ひとつのオブジェクトで何とかならないものか色々考えましたが、自分としてはプロパティ毎に複数のオブジェクトを作成した方がわかりやすかったです。
（それが正しいのかどうか、現段階ではイマイチわかっていません）

AS3：Tweenのイージング関数

イージング関数は、アニメーションの動きの種類を選んで指定します。
実際の動作は、先に紹介したFlashのサンプルを動かしてみてください。

クラス.メソッド	備考
Back クラスは ActionScript アニメーションでモーションを実装する 3 つのイージング関数を定義します。
Back.easeIn	easeIn() メソッドは、後方にモーションを開始した後、その方向を反転することによりターゲットに近づきます。
Back.easeInOut	easeInOut() メソッドは、easeIn() メソッドと easeOut() メソッドのモーションを組み合わせたもので、後方にモーションを開始した後、方向を反転してターゲットに近づき、ターゲットをわずかにオーバーシュートした後で再び方向を反転してターゲットに後方から近づきます。
Back.easeOut	easeOut() メソッドは、ターゲットに向けて前方にモーションを開始した後、わずかにオーバーシュートし、その方向を反転することにより後方からターゲットに近づきます。
Bounce クラスは ActionScript アニメーションでバウンスモーションを実装する 3 つのイージング関数を定義します。床を減衰しながらバウンドするボールの動作に似たモーションです。
Bounce.easeIn	easeIn() メソッドはバウンスモーションをゆっくり開始し、実行するにつれてモーションを加速させます。
Bounce.easeInOut	easeInOut() メソッドは、easeIn() メソッドと easeOut() メソッドのモーションを組み合わせたもので、バウンスモーションを低速で開始して加速させた後、減速させます。
Bounce.easeOut	easeOut() メソッドはバウンスモーションを高速で開始し、実行するにつれてモーションを減速させます。
Elastic クラスは、モーションが指数関数的に減衰する正弦波により定義される ActionScript アニメーションでモーションを実装する 3 つのイージング関数を定義します。
Elastic.easeIn	easeIn() メソッドはモーションをゆっくり開始し、実行するにつれてモーションを加速させます。
Elastic.easeInOut	easeInOut() メソッドは、easeIn() メソッドと easeOut() メソッドのモーションを組み合わせたもので、モーションを低速で開始して加速させた後、減速させます。
Elastic.easeOut	easeOut() メソッドはモーションを高速で開始し、実行するにつれてモーションを減速させます。
None クラスは、ActionScript アニメーションで加速しないモーションを実装するイージング関数を定義します。このクラスのメソッドはすべて継続的なモーションを生成します。easeIn や easeOut などの名前を様々な形で利用できます。None クラスの機能は fl.motion.easing.Linear クラスと同じです。
None.easeIn	easeIn() メソッドは、加速しない一定速のモーションを定義します。
None.easeInOut	easeInOut() メソッドは、加速しない一定速のモーションを定義します。
None.easeNone	easeNone() メソッドは、加速しない一定速のモーションを定義します。
None.easeOut	easeOut() メソッドは、加速しない一定速のモーションを定義します。
Regular クラスでは、ActionScript アニメーションでモーションを実装する 3 種類のイージング関数を定義します。Regular イージング式のモーションの加速は、100% イージングのタイムラインのトゥイーンと同じですが、Strong イージング式のモーションの加速より小さくなります。Regular クラスの機能は fl.motion.easing.Quadratic クラスと同じです。
Regular.easeIn	easeIn() メソッドはモーションを速度 0 から開始し、実行するにつれてモーションを加速させます。
Regular.easeInOut	easeInOut() メソッドは、easeIn() メソッドと easeOut() メソッドのモーションを組み合わせたもので、モーションを速度 0 から開始して加速させた後、速度 0 まで減速させます。
Regular.easeOut	easeOut() メソッドはモーションを高速で開始し、実行するにつれてモーションを速度 0 まで減速させます。
Strong クラスでは、ActionScript アニメーションでモーションを実装する 3 種類のイージング関数を定義します。Strong イージング式のモーションの加速は、Regular イージング式のモーションの加速よりも大きくなります。Strong クラスの機能は fl.motion.easing.Quintic クラスと同じです。
Strong.easeIn	easeIn() メソッドはモーションを速度 0 から開始し、実行するにつれてモーションを加速させます。
Strong.easeInOut	easeInOut() メソッドは、easeIn() メソッドと easeOut() メソッドのモーションを組み合わせたもので、モーションを速度 0 から開始して加速させた後、速度 0 まで減速させます。
Strong.easeOut	easeOut() メソッドはモーションを高速で開始し、実行するにつれてモーションを速度 0 まで減速させます。

イージング関数は、それぞれ引数をつけて詳細に設定できるみたいです。
詳しくはリファレンスを参考にしてください。
http://help.adobe.com/ja_JP/FlashPlatform/reference/actionscript/3/fl/transitions/easing/package-detail.html

AS3：Tweenアニメーションの制御メソッド

Tweenアニメーションを制御するのに、よく使う関数を紹介します。

メソッド	説明
fforward()	トゥイーンアニメーションをトゥイーンアニメーションの最後の値まで直接早送りします。
resume()	停止されたトゥイーンアニメーションの再生を再開します。
rewind(t:Number = 0)	トゥイーンアニメーションの再生を開始値まで戻します。
start()	トゥイーンアニメーションの再生を開始位置から開始します。
stop():	トゥイーンアニメーションの再生を現在の値で停止します。

例えば、先に紹介したFlashのサンプルでは、ストップボタンで「myTweenX.stop()」、スタートボタンで「myTweenY.start()」が実行させるよう、EventListenerに仕掛けてあります。

Tweenのメソッドは他にもあります。
詳しくはリファレンスを参照してください。

AS3：Tweenイベントの設定

Tweenerで、onComplete等でアニメーション終了後にFunctionを仕掛けたりしましたが、TweenではTweenEventを使ってEventListenerに登録します。

import fl.transitions.TweenEvent;

myTweenX.stop();

// Tweenアニメーション開始時にしかける場合
myTweenX.addEventListener(TweenEvent.MOTION_START, function (e) {
	trace("myTweenX start");
});

// Tweenアニメーション終了時にしかける場合
myTweenX.addEventListener(TweenEvent.MOTION_FINISH, function (e) {
	trace("myTweenX finish");
});

myTweenX.start();

stop()してからMOTION_STARTのイベントリスナーを設定しているのは、Tweenオブジェクトが生成された時点で既にアニメーションがスタートしてしまうので、スタートしてからイベントリスナーを仕掛けていては、ひっかかってくれませんでした。

一度stop()で止めて、イベントリスナーを設定して、改めてstart()とする事でイベントにひっかける事ができました。
（これも、やっぱり現時点ではこれで正しいのかどうかわかっていません。）

TweenEventのタイプはほかにもありますので、詳しくはリファレンスを参照してください。

TweenEventについてのリファレンスはこちら
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/fl/transitions/TweenEvent.html#constantSummary

サンプルのFlashのコード

import fl.transitions.*;
import fl.transitions.easing.*;
import flash.events.*;
import fl.events.ComponentEvent;
import flash.text.TextField;


//アニメーション一覧
var func_list: Object = {};
func_list["None.easeIn"] = None.easeIn;
func_list["None.easeInOut"] = None.easeInOut;
func_list["None.easeNone"] = None.easeNone;
func_list["None.easeOut"] = None.easeOut;

func_list["Regular.easeIn"] = Regular.easeIn;
func_list["Regular.easeInOut"] = Regular.easeInOut;
func_list["Regular.easeOut"] = Regular.easeOut;

func_list["Strong.easeIn"] = Strong.easeIn;
func_list["Strong.easeInOut"] = Strong.easeInOut;
func_list["Strong.easeOut"] = Strong.easeOut;

func_list["Back.easeIn"] = Back.easeIn;
func_list["Back.easeInOut"] = Back.easeInOut;
func_list["Back.easeOut"] = Back.easeOut;

func_list["Bounce.easeIn"] = Bounce.easeIn;
func_list["Bounce.easeInOut"] = Bounce.easeInOut;
func_list["Bounce.easeOut"] = Bounce.easeOut;

func_list["Elastic.easeIn"] = Elastic.easeIn;
func_list["Elastic.easeInOut"] = Elastic.easeInOut;
func_list["Elastic.easeOut"] = Elastic.easeOut;


//アニメーション名ソート
var k: String;
var arr: Array = new Array();
for (k in func_list) {
	arr.push(k);
}
arr.sort();

//コンボボックス レコード追加
for each(k in arr) {
	listmenu.addItem({
		label: k
	});
}

//Tween設定
var myTweenX: Tween;
//var myTweenY: Tween;
var startValue: Number = 100;
var finishValue: Number = 450;
var duration = 3;
tweenTest("Back.easeIn");
myTweenX.stop();
//myTweenY.stop();


//ストップボタン
stopBtn.addEventListener(ComponentEvent.BUTTON_DOWN, function (e) {
	myTweenX.stop();
	//	myTweenY.stop();
});

//スタートボタン
startBtn.addEventListener(ComponentEvent.BUTTON_DOWN, function (e) {
	myTweenX.start();
	//	myTweenY.start();
});


//コンボボックス アクション設定
listmenu.addEventListener(Event.CHANGE, function (e) {
	tweenTest(listmenu.value);
});
function tweenTest(func_name: String): void {
	easingname.text = func_name;
	myTweenX = new Tween(mc, "x", func_list[func_name], startValue, finishValue, duration, true);
	//myTweenY = new Tween(mc, "y", func_list[func_name], stage.stageHeight / 2, (stage.stageHeight / 2) - 100, duration, true);

	
	myTweenX.stop();
	//myTweenY.stop();
	myTweenX.addEventListener(TweenEvent.MOTION_START, function (e) {
		trace("start");
	});
	myTweenX.addEventListener(TweenEvent.MOTION_FINISH, function (e) {
		trace("stop");
	});
	myTweenX.start();
	//myTweenY.start();
}

共有: