Fuseアニメーションの実行順序

Fuseアニメーションの実行順を簡単にまとめておきます。
大事なのは「FuseはArray（配列）である」ということです。基本、Arrayの要素順に実行されます。あとは別途用意されたテクニックをおぼえていけばよいかと思います。

今回は「Fuse Kit」サイト中段の「PDF: “Using Fuse” 」に掲載されているコードを元に、アニメーションの発動順を色分け表示しておきます。
（青→赤→緑→黄色の順に発動します。RSSリーダーの方は色分けとサンプルswfが見えないかもしれませんのでご注意下さい。）

尚、サンプルのコードのコピペのみでは実際には動きません。ステージ上にbox_mc、場合によってはbox1_mc, box2_mcを配置し、以下のコードをフレームスクリプトの先頭に記述、続けて、各サンプルのコードを挿入してください。

import com.mosesSupposes.fuse.*;
ZigoEngine.simpleSetup(Shortcuts, PennerEasing, FuseItem, FuseFMP);
//simpleSetupでは、必要なクラスだけを選択すれば、ファイルサイズの軽量化ができます。

---

var f:Fuse = new Fuse({_x:'100', controlY:'-50'},
{_y:'100', controlX:'50'},
{_x:'-100', controlY:'50'},
{_y:'-100', controlX:'-50'});
f.target = box_mc;
f.start();

前述の通り、FuseはArrayを拡張したものです。上の例では、先頭の要素のアニメーションの終了後、次の要素に記述されたアニメーションが開始されます。参考までに、上記コードではトゥイーン方法と時間が未設定なので、デフォルト値の’easeOutQuint’を１秒で実行されます。

---

var f = Fuse.open();
box1_mc.tween("_y", "10", .5);
Fuse.openGroup();
box1_mc.tween("_x", "40", .5, "easeInOutBack");
box2_mc.tween("_x", "50", .5, "easeInOutBack", .1);
Fuse.closeGroup();
box2_mc.tween("_y", "20", .5);
Fuse.closeAndStart();

クラスメソッドFuse.open()を使っています。openとcloseで囲まれた命令が、リファレンスとして一旦保存されます。ここではcloseAndStartを使って、閉じると同時にスタートしています。発動順序は、上段のアニメーション完了後、次の行のアニメーションが発動します。さらにこのサンプルではopenGroupメソッドを使用しています。openGroupとcloseGroupで囲まれた命令はグループ化され、同時に発動します。グループ内のアニメーション全てが完了後（ここではbox2_mcが0.1秒待機した分、後に完了する）、次の命令（緑）が発動します。よって上のサンプルでは全てのアニメーションが終了するまでに1.6秒(0.5+Math.max(0.5,0.6)+0.5)かかります。

---

var f = new Fuse();
f.push({target:box_mc, start_scale:0, delay:.5});//このアニメーション終了後、
f.push({target:box2_mc, brightOffset:100});//このアニメーションがスタートします。
f.start();

これも1つ目のサンプルと同じ考え方です。startされる時点での、配列の順番が重要なのです。
もう一つ注意点があります。
1つ目のアイテム中”start_scale”とありますが、”start_+（プロパティ名）”で、初期状態のプロパティ値を設定できます。そして、このサンプルではscaleトゥイーンの目的値（例えば”scale:300″）が設定されていません。そのような場合、scaleのデフォルト値：100が自動的に設定され、トゥイーンアニメーションします。このように、start_値を設定し、目的の値を設定しない場合、x,y座標は相対位置(0,0)に、alphaやscaleは100に向かってトゥイーンします。

---

var f = new Fuse();
f.label = "examplefuse";
f.autoClear = true;
f.scope = this;
f.target = box_mc;

f.push({delay:2, func:"trace", args:"First item done."});//2秒後、トレースを実行
f.push({start_scale:0, delay:.5});//0.5秒後、scaleを0から100までトゥイーン
f.push({brightOffset:100});//明度を100に

f.addEventListener("onComplete", myListenerObject);
f.traceItems();
f.start(true);

Fuse配列の2つ目の要素に注目です。1つ目の要素の命令後、scale0になるのではなく、start時点で既にscaleは0になった状態で始まります。前述のように、目的値が未設定なので、scaleは100に向かってトゥイーンします。

---

var f:Fuse = new Fuse(
[//ブラケットを使って3つのアクションをグループ化します
	{start_x:"-100", seconds:1, delay:.25, ease:"easeOutQuint"},
{scope:FuseFMP, func:"writeFilter", args:[box_mc, "Blur", {blur:0}]},
{Blur_blurX:20, seconds:.5, ease:"easeInQuad", trigger:true}
],//グループを閉じる
//次のアクションは、前のグループのトリガーが設定されたアクションの完了後に実行されます
{Blur_blurX:0, seconds:.3, ease:"easeOutQuad"}
);
f.target = box_mc;
f.start();

openGroup, closeGroupを使わなくても、Fuse配列を使う場合は、上記のようにブラケット”[ ]“で囲えば、その中のアイテムはグループ化され、同時にスタートします。この時、通常はグループ内で一番時間のかかるアクション（ここでは_xのアニメーション）の後、次のアイテム（0.3秒でブラーを0に戻す）に移行するのですが、triggerを使えば、そのアイテムのアニメーションが完了したら、次のアイテムを開始するように設定できます。

---

本家ドキュメントを翻訳したものは、FuseKitの次のバージョンアップ後の予定ですが、自分の備忘録も兼ねて、気づいた点をメモしてみました。一応サンプル動作を確認して記事を書いていますが、おかしな点などありましたらコメントいただけると助かります。

追記：数週間以内にFuseKit2.1にバージョンアップする予定だそうです。大幅な仕様変更はないと思うのですが（mxpとコンポーネントが用意されるぐらい？）、ご注意下さい。