第1回 Fuse Kitの導入 | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて

Flashスキルアップ講座タイトル画像

Lesson5 Fuse Kitを活用しよう!


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

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

(解説:茅原伸幸)


第1回 Fuse Kitの導入


まずは、開発元のサイトからクラスパッケージをダウンロードしよう【図1の赤枠のリンク】。現時点では、fuse2.0.5プレリリース版が最新のため、本講座ではこのバージョンのクラスパッケージを利用していこうと思う。

FusuKit開発元サイトのキャプチャ
【図1】青枠のリンクはバージョン2.0だが、バージョン2.0.5には同梱されていないサンプルflaファイルなどが入っている。ダウンロードして確認してみるとよいだろう

サンプルfla内の解説をtrick7.comのtera氏が日本語訳してくださっているので、こちらも有効に活用させていただこう!

ダウンロードしたzipを解凍すると、サンプルflaとともに「com」フォルダを確認できる。この「com」フォルダ内にFuse Kitのクラスがつまっている。
簡単に利用するにはクラスパッケージの「com」フォルダごと、Fuse Kitを利用したいflaファイルと同じ階層にコピーすればよい。この方法はflaファイルを違うフォルダに作成する度にコピーすることになり、煩雑になる反面、flaファイルの編集を違うPCで行う場合など、利用しているクラスパッケージごと簡単に環境を移せる利点もある。

■Point クラスパスの設定


Fuse Kitなど、あらゆるフラッシュ制作時に頻繁に利用するクラス群は、自分のわかりやすい固定のフォルダなど(例「C:\my_classes」)を作成し、その中に「com」フォルダごとコピーしておき、まとめてグローバルクラスパスを通しておくとよいだろう【図2】。


【図2】操作手順を番号で示した。C:\my_classes\comではなく、C:\my_classesを指定するように注意しよう

以上の手順をしておくことで、今後、どのflaファイルからでも簡単にクラスを利用出来るようになる。また、Fuse Kit以外でも使いやすいクラスは「C:\my_classes」(上記例)にまとめておくとよい。

クラスパスの詳細については、

  • fumiononaka.com FN0311006 - クラスパスの考え方 - Flash : テクニカルノート
    http://www.fumiononaka.com/TechNotes/Flash/FN0311006.html

  • を参考にしながら自分の環境に合ったクラスパスを利用するとよいだろう。

    以上で、準備の完了だ。ちなみにクラスパッケージはflaファイルの編集時に必要なだけで、パブリッシュした時点でswfファイルに必要な情報は埋め込まれるため、サーバにアップロードする場合や、swfファイルの納品時にはクラスパッケージを添付する必要はない。

    Fuse Kitにトライ!


    それでは、いよいよFuse Kitを試してみよう!

    新規ファイル(フレームレート:30fps)にボールを描画し、シンボルに変換してムービークリップ(インスタンス名:ball)にしておく【図3】。

    【図3】ボールを描画したら、シンボル変換しムービークリップ化する
    【図3】ボールを描画したら、シンボル変換しムービークリップ化する

    そして_rootのフレーム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】ができあがる!


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

    よく見かける動きだが、このActionScriptの簡潔な記述に注目してもらいたい。Fuse Kitを利用しなくても同じような動きは再現できるが、利用することで作業効率は大幅にアップするだろう。また、記述方法も直感的でわかりやすく、ActionScript初心者でも容易に使うことができるようになるだろう。

    驚くべき簡易さや機能が本領を発揮するのはまだまだこれからだが、解説を含めて次回に持ち越したい。一度使うと、もう手放すことができなくなるFuse Kit、おおいに活用していこう!


    次回へつづく


    著者写真
    [プロフィール]
    かやはら・のぶゆき●1972年生まれ、広島在住。広島大学経済学部卒業後、紆余曲折の末、2006年5月に株式会社メディア・パルサーを設立。若手を鍛えながらFlash制作に勤しむ。二児のパパ。
    http://www.procreo.jp/

    twitter facebook このエントリーをはてなブックマークに追加 RSS
    【サイトリニューアル!】新サイトはこちらMdNについて

    この連載のすべての記事

    アクセスランキング

    8.30-9.5

    MdN BOOKS|デザインの本

    Pick upコンテンツ

    現在