第4回 テキストエフェクトへの活用 | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて

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

Lesson5 Fuse Kitを活用しよう!


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

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

(解説:茅原伸幸)

第4回 テキストエフェクトへの活用


第4回の今回がFuse Kitについての最後となるが、この4回の連載の間にFuse Kitが「Fuse 2.1.1r2」にバージョンアップしている。うれしいことに新バージョンに同梱の「FuseKit2.1.1r2.mxp」の拡張機能パッケージをインストールすると、アクションパネルの左側にFuse Kitのリストが追加され、項目も確認しやすくなり、また入力もとても楽になる。キーワードは色付きで表示され、ショートカットメソッドについては、コードヒントも表示されるようになる【図1】。

FuseKit2.1.1r2.mxp
【図1】待ちに待っていた機能だ! とてもうれしい

そのほかにも「カスタムイージングツール」など、便利な機能が充実している。バージョンアップやバグ対応の情報も兼ねて、随時本家サイトtrick7.com blog: fuse kit アーカイブをチェックしておくことをお勧めする。

さて、今回はFuse Kitを使ってテキストエフェクトを試してみよう【サンプル1】。


【サンプル1】画面クリックでアニメーションスタート

テキストエフェクトはインパクトのある表現を実現しやすく、使用頻度も高いが、手間のかかる作業でもある。特に、一文字ずつアニメーションさせたい場合など、タイムラインで実現しようとすると、レイヤー数もフレーム数も膨大になりやすく、修正や調整がかなり困難な作業になることが多い。Fuse Kitを使えば、さまざまなテキストエフェクトを簡単に調整しながら試すことができるだろう。

まずは下準備として、ステージにテキストを入力した後、修正メニューから一文字ずつに分解する【図2】。

Flash操作画面、[修正]メニューから[分解]を選択
【図2】[Ctrl]+[B]のショートカットも覚えておくとよいだろう

そのあと、少し手間が掛かるが、一文字ずつシンボルに変換してムービークリップにし、それぞれインスタンス名を連番でつける(作例ではt1~t19)。基準点の位置は想定しているエフェクトにもよるが、今回はそれぞれ文字の中心にしている。ここまで準備できたら、あとはActionScriptを_rootのフレーム1に記述しよう【図3】。

アクションフレームでActionScriptを記述
【図3】黄色の背景部分はわかりやすく改行を入れているが、1行のActionScriptだ(コメント文を除く)

■Point 調整しやすいテキストエフェクト


今回は、プロトタイプを拡張する「simpleSetup」ではなく、「register」セットアップを使っている(2行目のオレンジ背景部分)。

次のfor文では、文字数(19文字)分ループさせ、文字の位置座標を取得している。この座標がそれぞれの文字の最終固定位置となる。

次にマウスを押下したときの処理だが、こちらも文字数分ループさせ、それぞれに「Fuse」を設定している。Fuseは配列を基本とし、配列の要素にしたがって各プロパティがトゥイーンする。動作設定のメイン部分(黄色背景)を見ると、“,”(カンマ)で区切って、「項目:値」の形式で各要素を設定していることがわかるだろう。項目名が「start_」で始まっているものは、各プロパティの初期値の設定だ。目的値の設定がなければ、デフォルト値(scaleやalphaは100)を目指してトゥイーンする。

つまり、「start_scale:500,」とだけ記述していれば、縦横500%に拡大した状態からトゥイーンが始まり、デフォルトの100%を目指して縮小しながらトゥイーンする。

そのほかの項目はコメント文を見てもらえればご理解いただけると思うが、ポイントはdelay(遅延)の項目だ。Fuseではトゥイーン開始までの遅延時間を設定できるため、「setInterval関数」などを使わなくても簡単に“時差”をつけることができる。一文字ずつ表示するような場合でも、【図3】のように各文字ごとに遅延時間を設定することで、簡単に流れるような表示を実現できる。

慣れるまでは多々あるプロパティや機能などにとまどうかもしれないが、一度ここまでできてしまえば、あとの調整はかなり楽だ。プロパティを追加したり、値を変更したりすることで、さまざまなテキストエフェクトを簡単に試すことができるだろう。

もちろん前回のFuseFMPクラスを追加することで、ビットマップフィルターも利用できる【サンプル2】。


【サンプル2】ブラーのほかにもカラー指定、初期角度の指定も付け加えてみた

そのほかにも、さらに配列を追加し順番にトゥイーンさせたり、コールバック関数を設定したりと、どんどん拡張することもできる。いろいろと試してみてほしい。

これまで4回に渡ってFuse Kitを試してみたが、その簡易さ、便利さには驚くばかりだ。まだまだ試せていない部分も多々あるが、全容を理解せずとも十分利用価値が高いクラスパッケージだと思う。ほかの人が作ったクラスを利用することや、理解しきれないまま外部クラスを使うことに抵抗を感じる人も多いかもしれないが、大幅な作業効率のアップにより、自由になる時間の価値を考えるとFuse Kitを利用することは大きなメリットとなるだろう。

一度使うとすぐ依存してしまいそうになるが、適度な距離感を持つことも大事だ。バージョンアップ情報やバグ情報などもチェックしながら上手につき合っていきたい。


――「Flashスキルアップ講座」Lesson5は今回で終了です。
次回Lesson6は2月28日(水)からの掲載予定となります。ご期待ください。

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

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

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在