oogattaの勉強日記

Fuse Kit で出来ること

Flash | 01:05

Flash のトゥイーン弄りライブラリで今最もアツイものの一つは、やはり Fuse Kit でありましょう。しかし残念ながらオフィシャルには、まともなドキュメントが、

• くそ簡単なチュートリアル(PDF)
• いきなりライブラリリファレンス

しかない、と、思う。これじゃあちょっと何が出来るか全然わからないのですが、エクステンションのパッケージを落としてくるとそこにサンプルが入っていて、そのアクションパネルに書いてあることが一番詳しくて、良くまとまっているのです。

しかし、そんなもの一々開いたり閉じたりして相手のミスを待っていたらライバルはラルプデュエズの彼方なので（シャカリキ！）、サンプルの fla に書いてあった自分的視点からの「Fuse Kit で出来ること」を羅列します。

はじめに

公式にもでかでかと書いてある（けど分かりにくい）ように、Fuse Kit の根本はとにかくこの三つのクラス！

ZigoEngine

とにかく中心となるクラス。「Fuse Kit を使う」とは「ZigozEngine クラスを使う」って感じ。

Fuse

一つ一つの実行を待つなどして、順々にトゥイーンを実行していけるシーケンス（シナリオ）機能を提供してくれるクラス。便利

FuseFMP

ビットマップフィルタを簡単に使わせてくれるクラス。便利。

設定、使用開始まで

MovieClipのスーパークラス（プロトタイプ）を弄って使う

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

this.box1_mc._brightOffset = 100; // Shortcuts クラスによって擬似プロパティが追加される
this.box1_mc._scale = 200;
this.box1_mc.brightOffsetTo(0,3);
this.box1_mc.scaleTo(100, 2, mx.transitions.easing.Elastic.easeOut, .5);

(サンプル 1 setup - simple/1a engine and shortcuts.fla より)

ZigoEngine.simpleSetup(Shortcuts)すれば、MovieClip インスタンスのメソッドとプロパティがどばっと増えるので単にそれを使う。一番楽。MCTween を使っていた人はこれでほぼそのままです。

パッケージには一緒に Robert Penner 氏のイージング関数クラスも入っているので、それを簡単に使いたいときは、

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

this.box1_mc.scaleTo(100, 2, 'easeOutElastic', .5);

(サンプル 1 setup - simple/1b normal simpleSetup.fla より)

PennnerEasing クラスも渡せば、イージング関数の参照を受け取るところで、文字列を使って簡単に指定できる。

ZegoEngine クラスのスタティックメソッドを使う

import com.mosesSupposes.fuse.*;
ZigoEngine.register(Shortcut,PennerEasing);

FuseFMP.writeFilter(this.box1_mc, 'Blur', {blurX:50, blurY:0});
ZigoEngine.doTween(this.box1_mc, 'Blur_blurX', 0, 1, 'easeInOutExpo', .5);

(サンプル 2 setup - developer/2a engine options.fla より)

2行目が、simpleSetup ではなくて register となる。実際のアニメーションは、doTween メソッドで行う。ビットマップフィルタを設定する FuseFMP も同じようにしてスタティックなクラスとして使える。

Shortcut クラスを登録しておいたので、新たに設定すれば MovieClip に simpleSetup の時のようなショートカットを追加できる。（追記：Shortcut クラスを register することで、疑似プロパティ・メソッドを利用する準備ができる。そして対象の MovieClip インスタンスを initialize すると、実際にそうした擬似プロパティが設定されて、操作できるようになる。ZigoEngine.doTween メソッドでも、実は内部的に initialize して最後に deinitialize するのと同様のことをしている様子）

ZigoEngine.initialize(this.box1_mc);
box1_mc.alphaTo(50,2,'easeInQuint',0);

後から deinitialize で解除できる。

ZigoEngine.deinitialize(this.box1_mc);

（補足）FuseFMP だけでも使える

上の例のように、アニメーションさせないのであれば（一瞬で効果を付けていいのであれば）FuseFMP は単体で問題なく使える。これにも、simpleSetup があるので、登録すれば、フィルタにまつわる疑似プロパティが MovieClip のプロトタイプにわっさと追加される。

com.mosesSupposes.fuse.FuseFMP.simpleSetup();

this.box1_mc.writeFilter('Blur'); // デフォルトの設定で Blur フィルタをかける（追加する）
this.box1_mc.DropShadow_distance = 20; // 擬似プロパティでドロップシャドウをつける
this.box1_mc.DropShadow_alpha = .5;

(サンプル 1 setup - simple/1d FuseFMP only.fla より)

既に出た例のように FuseFMP のスタティックメソッドで何とかすることもできる。

シーケンス（シナリオ）コントロールクラス Fuse

Fuse クラスを simpleSetup するか、register すれば、鬼便利なシーケンスが使えるようになる。

simpleSetup 版

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

Fuse.openGroup();
this.box1_mc.Blur_blur = 0;
this.box1_mc.Blur_blurXTo('100', .25, 'easeOutSine',.75, {cycles:2});
this.box1_mc.slideTo('300', '0', 1, 'easeInOutQuint', .5);
Fuse.closeGroup();
this.box1_mc.scaleTo(0, .5, 'easeInBack');
Fuse.closeAndStart();

(サンプル 1 setup - simple/1c other combos.fla より)

openGroup から closeGroup までは一度に実行され、グループ内の全てが終了したら次の scoleTo が実行される。slideTo がやっているようにグループ内でさらにディレイを付けることができる。

register版

import com.mosesSupposes.fuse.*;
import mx.transitions.easing.*;
ZigoEngine.register(Fuse, FuseFMP);

var f:Fuse = new Fuse();
f.target = box1_mc;
f.push({Blur_blur:0, seconds:0}); // set up a blur filter
f.push({scale:205, 
		Blur_blur:50,
		x:'200',
		rotation:'180',  
		ease:Strong.easeIn,
		seconds:1,
		delay:.5 });
f.push({Blur_blur:0,
	   	x:'200',
		rotation:'180',
		scale:100,
		ease:Strong.easeOut,
		seconds:1 });
f.push({scale:0,
	    ease:Back.easeIn,
		seconds:1 });
f.start();

(サンプル 2 setup - developer/2b fuse setup.fla より)

Fuse クラスのインスタンスにどんどん push していく。この push している中身（引数）こそが、Fuse Object Syntax というで、シーケンス機能を提供してくれる Fuse クラスを使う上でキモになる部分。これが型が決まって無くて自由度があまりに高いので、OOPの人には心がざわざわするかも。

細かい設定

onEnterFrame用のムービークリップの深度設定

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

例によって一つ _root に空 MovieClip を作る。ほっとくと 6789 番なんかに作ってるようだけど、嫌ならその深度を設定できる。

もちろん時間ベースも

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

実は Fuse Kit って内部的には onEnterFrame で時間を刻んでいるようなのですが、当然時間ベースも行ける。何ミリ秒ごとに回すか決められる。null を渡すとフレームベースに戻る。

skip_level

ZigoEngine がやってくれるトゥイーンアニメーションはデフォルトでは真丁寧。つまり、ある MovieClip をフェードアウトさせるとして、アニメーションを始める前に既にその MovieClip のアルファが 0 だったら？。skip_level で、そうした場合の動作を指定できる。

下の例は、既にアルファが 0 の box1_mc を 3 秒間かけてフェードアウトさせようとする（無意味な）設定。実行開始までのウェイトは 0。コールバックにトレースを文字列として渡す。

ZigoEngine.SKIP_LEVEL = 0;
this.box1_mc._alpha = 0;
this.box1_mc.alphaTo(0,3,'linear',0, "trace('alphaTo finished.');");

(以上3つはサンプル 2 setup - developer/2d general.fla より)

• (0) ちゃんと3秒間待った後にトレースが出る。当然見た目は全く変化しない。
• (1) 3秒間の実行時間をキャンセルして、即コールバックが実行される。
• (2) 実行時間もキャンセルされるし、コールバックも実行されない。

を選べる。試してなかったのでここ、かなり大嘘書いてました。

眠たくなったので羅列して後は後日

実際の使い方は明日以降にまたピックアップするとして、サンプル見ていて気になった箇所を箇条書き。

• 実行中のトゥイーンの削除・停止・再開が、「全てのZigoEngine管理トゥイーン」「あるMovieClipの全てのトゥイーン」「あるMovieClipのあるプロパティに対するトゥイーン」など選べる。また弄りたい MovieClip やプロパティはそれぞれ同時に複数指定できる。

• 実行中のトゥイーンに対し、「最初からもう一回再生（ZigoEngine.rewTween）」や「以後をスキップして最後へ飛ばす（ZigoEngine.ffTween）」ができる。

• トゥイーンが出すイベントのコールバックには、色々な形のものを渡せる。関数参照、文字列、オブジェクト（独特の形）。

• トゥイーン呼び出し時にコールバックを与えるのではなく、doTween のターゲットとなる MovieClipに addListener でリスナーを登録できる。メソッドは、

onTweenStart
onTweenUpdate
onTweenEnd
onTweenInterrupt

onTweenInterruput はいつ出るのかまだ確かめてない。

• doTween などで弄るプロパティ、通常 _x なんかを与えるところに、_frame とすると、なんとムービークリップのフレームをトゥイーンできる。

ZigoEngine.doTween(this, '_frame', 40, 2, Bounce.easeOut);

こホントかよ？！と思ってサンプル実行したら、これで本当に40フレームまで行って、バインバインと戻ったり進んだりして止まった。すごい

とりあえず驚いたのはこんなところだった。さあ、明日から（仕事で）使います。いやだなあ。XBOXやってたいなあ。