第3回　FuseFMPクラスでビットマップ処理を簡単に

テクノロジー

2007.1.23 TUE

Lesson5　Fuse Kitを活用しよう！

Lesson5では話題の「Fuse Kit」（フューズキット）を取り上げてみたい。Fuse KitはActionScript2.0ベースで利用できるクラスパッケージで、簡単なActionScriptの記述でさまざまなアニメーションを実現できる驚くほど便利なものだ。

実は、私もFuse Kitの機能や活用法を熟知しているわけではなく、これから体験するユーザーの一人である。そこで今回は、初心者でも気軽に利用するには？というスタンスでよりよい方法を探りながら、私自身もいっしょに勉強しながら進めていきたいと思う。

（解説：茅原伸幸）

第2回ではFuse Kitの基本のショートカットプロパティやメソッドを試した。さらに、「FuseFMPクラス」を追加でセットアップすると、ビットマップフィルターまでが簡単にショートカットで利用できるようになる。今回はFuseFMPクラスを試していく。

ビットマップフィルターはFlash8からの機能だが、「ぼかし」や「ドロップシャドウ」など、さまざまな効果をFlashで利用できる反面、ActionScriptで制御するのはやや面倒だと感じる人もいるのではないだろうか。もっと手軽にビットマップフィルターを使いたいという人にも、Fuse Kitはおおいに威力を発揮するだろう。では、試しに「ぼかし」のサンプルからみていこう【サンプル1】。

【サンプル1】中央のぼやけたところにロールオーバーしてみよう！また、「BlurFilter」の文字のところはテキスト入力できる（半角英数字）

【サンプル1】の画面構成は、次の【図1】のようになっている。

【図1】ステージにムービークリップ（インスタンス名：ball）とテキスト入力のテキストフィールド（インスタンス名：my_txt）があるだけだ

そして、_rootのフレーム1には次のActionScriptを記述している。

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

ball.Blur_quality = 2;
ball.Blur_blur = 64;

ball.onRollOver = function() {
this.Blur_blurTo(0);
my_txt.Blur_blurXTo(32, 2, "easeOutElastic");
};
ball.onRollOut = function() {
this.Blur_blurTo(64);
my_txt.Blur_blurXTo(0);
};

■Point　FuseFMPクラスを使ったぼかし処理

このActionScriptを見ても、第2回の【サンプル1】のActionScriptと同様に非常にシンプルだ。ビットマップフィルターを使っているにもかかわらず、ビットマップフィルターのimport文や、フィルターの配列などを記述していないことにも驚くだろう。

2行目の「ZigoEngine.simpleSetup」でパラメータに「FuseFMPクラス」を追加し、プロトタイプ拡張セットアップすることで、ビットマップフィルターまでも「_x」、「_y」、「_alpha」のようなプロパティ感覚で利用できるようになる。

FuseFMPでのプロパティ名の規則は

フィルタ名+"_"+フィルタプロパティ名

となっている。たとえば、ブラーフィルターでは、次の4つのプロパティが拡張されている。

Blur_quality、Blur_blurX、Blur_blurY、Blur_blur

「Blur_quality」は、ぼかしの実行回数となる品質で、低品質（デフォルト）：1、標準：2、高品質：3となっている。つまり、Flash8標準のBlurFilter クラスのBlurFilter.quality プロパティと同じものだ。その名前から容易に想像できるだろう。

Blur_blurは前回の「_scale」と同じように、blurX と blurY を同時に設定できるプロパティだ。たったそれだけのことだが、いざ使ってみると非常に使い勝手がいい。「_scale」、「_blur」など、Flashに標準搭載されていればいいのに……いや、「Fuse Kit」ごと標準搭載されてもいいのでは、とさえ思ってしまうほど。

ball.Blur_quality = 2;
ball.Blur_blur = 64;

上の2行のScriptでぼかしの品質を標準、水平、垂直のぼかし量を64に設定していることがわかるだろう。

次に、ロールオーバー時、ロールアウト時の処理だが、上記プロパティ名に「To」を付け加えることで、ショートカットメソッドとして利用できる。第1パラメータにはそのプロパティの変化後の値、第2パラメータには秒数、第3パラメータにはイージング……、というように、第2回で紹介したショートカットメソッドの使い方と同じように指定できる。

this.Blur_blurTo(0);
my_txt.Blur_blurXTo(32, 2, "easeOutElastic");

このロールオーバー時の2行の処理は、this（ムービークリップ：ball）のぼかし量（水平、垂直）を0に、my_txt（テキストフィールド）は、水平のぼかし量を32に、2秒間でバネのような動きのpennerイージングで……と指定していることがわかっていただけるであろう。ロールアウト時は逆の値を指定して元に戻るようにしている。

それぞれ、たった1行のScriptでビットマップフィルターのアニメーション処理ができるとは、驚きだ。これ以上、手軽なものはないのではないだろうか。

ちなみに、次はドロップシャドウを利用したサンプルだ【サンプル2】。

【サンプル2】マウスの位置に対応して影が動く

【サンプル2】に記述しているActionScriptはこちらだ【図2】。

【図2】もっと簡単な処理もあるだろうが、参考までに……

【サンプル2】ではドロップシャドウフィルターを使ってみた。処理的にはもっと効率のよい方法があるかもしれないが、ショートカットプロパティを使うことで、とても直感的に記述することができる。また、黄色の部分のように、複数の対象に複数のプロパティを、1行で設定することも可能だ。詳細はFuse Kit v2.0.5 Documentation 日本語訳の、FuseFMPの項目を参照してほしい。

FuseFMPを使うことで、今回のブラーフィルター、ドロップシャドウフィルター以外にもベベルフィルター、グローフィルターなどが、いずれも簡単に利用できるようになる。それぞれのプロパティ名については、次の3行を実行するとフィルタプロパティ名のリストが出力されるので、一覧表にして印刷でもしておくとよいだろう。