(cache) Webデザインとグラフィックの総合情報サイト - MdN Interactive - 第2回　ショートカットメソッドとPennerイージング

2009/7/27 MON 00:00

Lesson5　Fuse Kitを活用しよう！

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

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

（解説：茅原伸幸）

第2回　ショートカットメソッドとPennerイージング

今回はFuse Kitの簡単ショートカットメソッドを実際にいろいろ試してみたい。早速だが、前回のサンプルからみていこう【サンプル1】。

【サンプル1】ボールにロールオーバーするとバネのような動きで拡大する

【サンプル1】は次のActionScriptで動いている。

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

ball.onRollOver = function() {
this.scaleTo(200, 1, 'easeOutElastic');
};
ball.onRollOut = function() {
this.scaleTo(100, 1, 'easeOutElastic');
};

最初の1行目は前回設定したクラスパッケージにアクセスするためのimport文だ。

そして、2行目で今回利用する「Shortcutsクラス」と「PennerEasingクラス」をsimpleSetupでセットアップしている。この記述により、ムービークリップなどに新たなプロパティやメソッドが拡張される。

例えば、新しく追加された「_scale」プロパティは従来の「_xscale」と「_yscale」を合わせたようなもので、縦横同比率でムービークリップを拡大縮小することができる（例：「mc._scale=120」という記述でムービークリップ（mc）が120%に拡大される）。

また、同じく追加されたプロパティ「_brightness」は明度を設定することができ、「_contrast」プロパティではコントラストを設定することができる。

これらの追加プロパティは従来のプロパティ「_x」、「_y」、「_alpha」、「_rotation」などと、同様の使い方で利用することができるため、迷うことなく使うことができるだろう。そのほかの追加プロパティはtrick7.comのtera氏によるFuse Kit v2.0.5 Documentation 日本語訳のShortcutsクラス、ショートカットプロパティの項目を参考にするとよいだろう。

■Point　Fuse Kitショートカットメソッド

ショートカットプロパティだけでもお得なFuse Kitだが、さらに使い勝手のよいものがショートカットメソッドだ。上記サンプルで記述している。

this.scaleTo(200, 1, 'easeOutElastic');

この部分を見ていただきたい。たったこの1行で自分「this」を「200%」まで、「1秒」で、「バネのような動きの減速運動」で「scaleTo：拡大（縮小）」することができる。さらに、パラメータを追加することで「遅延（何秒後にスタート）」や「コールバック」を設定することもできる。

この「scaleTo」がショートカットメソッドだ。ほかにも、「alphaTo」は透明度を指定値へ、「rotateTo」は指定の角度へ、「slideTo」は指定の座標へなど、それぞれ値、時間、イージング、遅延、コールバックを設定してトゥイーンさせることができる。

例えば、「1秒後に2秒でx座標380、y座標90の位置にバウンドするような動きで移動し、移動し終わったら、アルファを3秒で0にする」といった場合は、次のようになる【サンプル2】。

【サンプル2】ボールが移動してから消えるアクション

各パラメータの記述の順序は、

mc.slideTo(x座標,y座標,時間（秒）,イージング,遅延（秒）,コールバック)

といったものだ。わざわざすべてのパラメータを指定しなくてもデフォルト値で動いてくれるのはうれしい設計だ。

例えば【サンプル2】で「mc.slideTo(380)」と指定すると、ボールは真横に380の位置までスライドして止まる。これだけでも十分使える移動処理だが、さらに賢いことにx座標、y座標のパラメータをダブルクォーテーション（"）で囲んで指定した場合、相対位置への移動が可能になる。つまり、「ball.slideTo("100","50")」と指定すると、ボールが今いる位置から右へ100px、下へ50px移動するというわけだ【図1】。

【図1】青い矢印が相対指定だ。

また、各ショートカットメソッドを同時に実行するには、次のように複数行に渡って記述するだけでいい。

ball.slideTo(200,50,2)
ball.rotateTo("120",2)
ball.alphaTo(0,2)

この場合は、ballは2秒間でx座標200、y座標50の位置に、現在の角度から120度の角度まで回りながら（ダブルクォーテーションで囲っているため、現在の角度からの相対角度になることに注意）、消えていく（アルファが0に）ことになる。

そのほかにも非常に便利なショートカットメソッドが多数用意されている。Fuse Kit v2.0.5 Documentation 日本語訳で親切にも訳してくださっているので、Shortcutsクラスのページを確認してみてほしい。これは使える！いうものがきっと見つかるはずだ。

PennerEasingクラス

【サンプル1】でのバネのような動きや【サンプル2】のバウンドする動きなどは、Robert Penner氏の作成したトゥイーン方式を利用している。Fuse KitではPennerEasingクラスをセットアップすることで、すぐに利用することができる。このPennerEasingクラスは、加速、減速、バネのような動き、バック、バウンドなど高度なイージング群が用意されている。

"linear",
"easeInQuad","easeOutQuad","easeInOutQuad","easeOutInQuad"
"easeInCubic","easeOutCubic","easeInOutCubic","easeOutInCubic"
"easeInQuart","easeOutQuart","easeInOutQuart","easeOutInQuart"
"easeInQuint","easeOutQuint","easeInOutQuint","easeOutInQuint"
"easeInSine","easeOutSine","easeInOutSine","easeOutInSine"
"easeInExpo","easeOutExpo","easeInOutExpo","easeOutInExpo"
"easeInCirc","easeOutCirc","easeInOutCirc","easeOutInCirc"
"easeInElastic","easeOutElastic","easeInOutElastic","easeOutInElastic"
"easeInBack","easeOutBack","easeInOutBack","easeOutInBack"
"easeInBounce","easeOutBounce","easeInOutBounce""easeOutInBounce"

ざっと以上のような種類がある。【サンプル1】や【サンプル2】の'ease～'の部分を上記から選んで書き替えて自分で試してもいいし、動作のサンプルは

にゃあプロジェクトウェブログ「FuseKitのイージング」

を見れば、かわいいカエルくんで動作を確認することができる。

通常の減速移動などの処理はFuse Kitを使わなくても、自分なりのActionScriptパターンをすでに持っている人も多いだろう。だが、上記のようなpennerイージングを自分でActionScriptを使って実装しようとするとかなりの数学的知識が必要で、非常に困難だ。それだけ高度なイージングを簡単に利用できるのもFuse Kitの利点のひとつ。いつもと違うイージング動作で、表現の幅が広がることは間違いないだろう。

次回へつづく