FIREWORKS徹底検証

Fireworksトレーニングのトップへ >> Webトレーニングのトップへ>> ホーム

文字入力だけで出来るGIFアニメーション

前ページで作成した四角ボタンを使って、文字が変化するアニメーションGIFを作ってみましょう。

まず、前ページで作った文字入り四角ボタンのなかから、アニメーションにしたいボタンを選んで、コピーをとる。その後、ファイルメニューから［新規作成］で新規画面を作成すると、一旦コピーしてある画像は、クリップボードに記憶されているので、新規画面を作る際に、そのサイズを表示してくれます（下図）

さて、新規画面に先ほどコピーしておいた画像をペーストします。きっちり画面に納まるのが気持ちイイですね。

GIFアニメーションとは、連続的にGIFの画像を時間軸に沿って表示するものです。したがって、今回の作業は連続的な画像の制作、つまりフレーム制作ということになります。

フローティングパレットのLayers and FramesからFramesモードを選択する（下図）最初は当然1フレームしかないので、新たに新しいフレームを作らなければなりません。
フローティングパレットの右上の三角矢印アイコンをプレスすると、新規に作るフレームの設定ができるようになります。

新規で作れるフレームは、単にフレームを追加するだけのAdd Frames。現在のフレームを複製するDuplicate Framesがあります。当然、削除用のDelete Frameもあります。

今回はDuplicate Framesを選択して、1フレーム目の複製を行うことにしました。

Duplicate Framesを選択すると、右のようなダイアログボックスが表示されて、複製するフレームの数や、フレームを複製や挿入する場合の場所の設定を行うことが出来ます。

最初は1フレームだけを複製して、現在のフレーム（最初のフレーム）の後に置くことにします。

文字換え

今回のアニメーションは、バックの四角ボタンはそのままで、文字だけが変化する簡単なアニメーションです。「TOWERS」という文字が「CLICK HERE」と変化させたいので、複製された画面（2フレーム目）の文字部分を選択してCLICK HEREという文字を入力すします（上図）

さらに、CLICK HEREという文字部分を点滅させるような効果を狙いたいので、2フレーム目を3フレーム目に複製して、文字部分の色のみを変化させました。

複製を繰り返して、合計フレームは6つになりました。あまり複雑なアニメーションにして、フレーム数を増やすと、データ容量が大きくなるので、この辺で止めておきましょう。

この段階でアニメーションの具合を見ることはできないが、フレームを順番にプレビューすることによって、ある程度の動きはイメージできます。

これで、あとは出力の際にアニメーションの設定を行うだけ。

アニメーション書き出しの設定は、静止画の書き出し同様にExportで行う。
OptionではAnimated GIFを選択する（上画面左）オプティマイズをチェックしておくと、連続画面でも画像が最適化されます。
アニメーションの設定では、フレーム毎の時間設定を行えます。ここで全体の動きのイメージを想定しながら表示時間を入力します。今回の場合は1フレーム目を長めに設定してあります。下のチェックボックスでは、アニメーションのループの設定ができるようになっています。

左が最終的に書き出されたアニメーションGIFです。説明すると長くなってしまったが、実際に制作を行うと驚くほど簡単で効果的なアニメーションが作れます。今回の作業に関しても、所要時間は10 ～20分程度でした。

また、FIREWORKSは他のアニメーション制作ツールに比べて、仕上がったデータ容量が非常に軽い。ちなみに今回のアニメーションのファイルサイズは19Kしかありません。

[FIREWORKS友の会（おすすめリンク）]　[よくある質問と解答]　[メーリングリスト]　[企業向けトレーニング]　[スポンサー]　

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