チュートリアルのトップへ >> Fireworksトレーニングのトップへ ■コラムのトップへ ■オリジナルプロダクト ■制作料金
変型ツールだけでアニメーション

前回に引き続き、簡単な設定だけでGIFアニメーションが作成できるテクニックを公開しましょう。今回は、グラフィックスの拡大・縮小などのツールを使用して、テキスト入力された文字が動くアニメーションです。

まず、新規画面に動かしたい文字を入力し、塗りとエフェクトの設定をします。

画面

レイヤー複製 左図のように、最初に作った画面を複製して、
次のフレームを作成します。
複製されたフレームに対して、
変形ツールを使って変化させます。

拡大縮小 変形ツールは、拡大・縮小をはじめとして、斜めに変化させるモードや、自由変形のモードが用意されています。

今回はデフォルトの伸縮ツールを使うことにする。このツールでは選択されたオブジェクトを拡大・縮小できるほか回転も使えるようになっているます。

下の図版のように選択したオブジェクトを縮小します。縮小したフレームをさらに複製して段階的に縮小するようなアニメーションを作成します。

今回のアニメーションは文字が左方向へ圧縮して縮んでいくような効果を狙ってみました。
変形中

アニメ設定


まず、ファイルメニューの[書き出し]を選択して、[書き出しのプレビュー]ダイアログボックスが現れたら、オプションからアニメーションGIFを選びます。

次に右図のようにアニメーションの設定を行います。今回のアニメーションは5フレーム。

時間軸の設定は右図の通りです。

今回も1フレーム目の時間設定を若干長めに設定してあります。アニメーションの動きのプレビューは一番下左のボタン群を操作して動きの具合をプレビューします。

今回のアニメーションもループの設定を「永久に」にしました

仕上がったアニメーションは以下の通りです。気に入らなければ何度でもやり直すことが出来ます。また色の変化などを途中で加えればバリエーションは無限に広がるでしょう。

アニメ設定

上のアニメーション制作時に作った元データ(PNGファイル)を使って色だけを変化させてみたのが下の例です。

このバリエーション制作に費やした時間はわずか1分。 FIREWORKSでは一度作った画像をバリエーションとして増やすことには非常に優れていますね。

アニメ設定


  

このWEBサイトに掲載されている文書・画像・映像・写真等の著作権はSilicon Cafe'に帰属し、許諾なく 複製・頒布を行うことは 法律で固く禁じられています。 Copyright (C) 1995-2003 Silicon Cafe'. All rights reserved