FuseKitで一括トゥイーンとか特定プロパティの一時停止をする方法

小出しになりますが、FuseKitの基本的な使い方を、簡単なサンプルとソースを見ていただきながらご紹介させていただきます。

お知らせ：FuseKitが大好きなので、過去の関連記事を、独自カテゴリ「fuse kit」として分類しました。よろしくです。

ステージ上の左から順に、ムービークリップ「mc1」「mc2」「mc3」です。

ソースは以下のようになっています。

import com.mosesSupposes.fuse.*;
ZigoEngine.simpleSetup(Shortcuts, PennerEasing);

//トゥイーンさせたいムービークリップを配列に格納しておけます
var arr1:Array = [mc1, mc2, mc3];
ZigoEngine.doTween(arr1,  '_y,_rotation,_brightOffset', ['100', 80, '100'], 1,  "easeInOutQuint",  .5,  {cycles:0} );

//ボタン関連の設定
var pause:Boolean = false;
redBtn.onRelease = function() {
	if (!pause) {
		ZigoEngine.pauseTween(mc2, '_y');
	} else {
		ZigoEngine.unpauseTween(mc2, '_y');
	}
	pause = !pause;
};

では1行目から見ていきます。

import com.mosesSupposes.fuse.*;
ZigoEngine.simpleSetup(Shortcuts, PennerEasing);

今回は、ZIgoEngineに注目です。最初にsimpleSetupでShortcutsを登録する事で、MovieClip (Button & TextField)にいくつかの便利な追加プロバティを持つようにprototypeを拡張できます。以下が、追加されるプロパティのリストです。_xや_alphaと同じ感覚で使えるのでとても便利です。

• _brightness (-100 から 100, 0の時がノーマルです)
• _brightOffset (-100 から 100, 0の時がノーマルです)
• _contrast (0 から 200+, 100の時がノーマルです)
• _tint (0xFF33FF, "0xFF33FF", "#FF33FF", "FF33FF"のようなhex値をとります。)
• _tintPercent (0-100 0の時がノーマルです 100でフル着色です。)
• _colorReset (Flashのプロパティパネル→カラー：「高度な設定」で設定できるパーセンテージの部分です。ノーマル値が100で、-100までの値を設定できます。)
• _invertColor (写真のネガのような効果です。0-100の値をとり、0がノーマルです)
• _size (_width と _height を同じ値に設定します。)
• _scale (_xscale と _yscale を同じ値に設定します。)
• _frame (MovieClipだけに有効 - 現在のフレームを返します。設定したタイミングでgotoAndStopが実行されます。)

で、次

var arr1:Array = [mc1, mc2, mc3];
ZigoEngine.doTween(
				   arr1,  //第1引数
				   '_y,_rotation,_brightOffset',   //第2引数
				   ['100', 80, '100'],  //第3引数 
				   1,  //第4引数 
				   "easeInOutQuint",  //第5引数
				   .5,  //第6引数
				   {cycles:0}  //第7引数
				   );

まず便利なことに、ステージ上の3つのムービークリップを一気に動かせます。上記のように、事前に配列に格納しておいて、doTweenの第1引数（target）で指定できます。もちろん第1引数内で直接指定してもOKです。
そして第2引数で、どのプロパティをアニメーションさせるかを複数指定できます。
第3引数の配列で、変化の目的値を指定します。第2引数と対応しているので、要素数を合わせないとエラーが出力されます。数値を（' '）で囲んでやると、相対値で変化します。囲まないと絶対値で変化します。この2通りの指定ができるのがFuseKitの大変使えるポイントだと思います。今回のサンプルでは_rotationの80度回転が、絶対値指定なので、スタート時点の各ムービークリップの回転状態に関わらず、ムービークリップの置かれた階層における80度の地点にそろいます。
第4引数で、何秒でトゥイーンするかを指定、第5引数でトゥイーン方法、第6引数でトゥイーン開始までの待機時間を指定します。
最後のコールバック「{cycles:0}」が見慣れないかと思いますが、トゥイーンを繰り返す回数を指定できます。片道で1、往復で2、3, 4, 5・・・と、指定した回数を往復したら、止まります。サンプルのように0を指定すると、永遠に往復します。

そして単純な切替式ボタンの中に書かれた、以下の命令

ZigoEngine.pauseTween(mc2, '_y');

で、特定のターゲットの、特定の変化だけを一時停止できるのです。再開させる時は、

ZigoEngine.unpauseTween(mc2, '_y');

と、止めているターゲット＆プロパティの再開を個別に指定したり、

ZigoEngine.unpauseTween('ALL');

とすることで、一時停止しているトゥイーン全てを再開させることもできます。（次期Fuse2.1ではresumeTweenを推奨）

サンプルの一時停止を再開してみて、「おい、タイミングずれてまったよ！」と思う方もおられると思いますが、そんなときのために、全てのトゥイーンを、スタート時の状態に戻す「rewTween」や、逆にゴールにスキップさせる「ffTween」など、いろんなテクニックが用意されています。

今日、仕事でFuseKitを使ってみました。サンプルでご紹介した、複数ターゲット指定や、相対＆絶対値による移動指定と、コールバック関数のおかげで、従来では複雑になりがちな部分もすっきり簡単。コードがすごく短く・見やすくなり、制作効率アップな感じです。いつもより余計にTweenしてしまうので、そこは気をつけないといけませんね。