Webふぉれすとうぇぶ実験室：アニメーションGIFを作ろう！


	Web制作、Webデザインのスキルアップに役立つ情報をお届けします！みんなが癒され、元気になるWebを目指します。

Webふぉれすとトップ > うぇぶ実験室


	アニメーションGIFを作ろう！

複数の画像ファイルをFireworksに読み込んで、アニメーションを作成します。

【実験1】アニメーションGIFを作る

【作業の前に】3枚のGIF画像を準備し、ファイル名をそれぞれ「inu1.gif」「inu2.gif」「inu3.gif」としました。


inu1.gif	inu2.gif	inu3.gif

【1】あらかじめ準備しておいた画像をFireworksに取り込む
Fireworksの「ファイル」メニュー→「開く」、「ファイルを開く」ダイアログで「inu1.gif」「inu2.gif」「inu3.gif」を選択し、「アニメーションとして開く」にチェックを入れます。
※「アニメーションとして開く」は、複数のファイルを選択するとチェックできるようになります。

【2】新規ファイルの作成
「開く」ボタンをクリックすると、新規ファイルが作成されます。読み込んだファイルは、別々のフレームに取り込まれます。

ドキュメントウィンドウ左下の「再生・停止」ボタンをクリックすると、読み込まれた画像ファイルが再生されます。

きゃ～目がまわる～～

このままではあまりにも犬の動きが速すぎる気がするので、
表示時間の変更をしたいと思います。

【3】フレームの表示時間を変更する
1つのフレームを長く表示させたいときは、各フレームの表示時間を変更します。「フレームパネル」の右端の数値がそのフレームの表示時間（1/100秒単位）です。初期設定は「7」となっています。

フレームの表示時間を変更するには、「フレームパネル」で各フレームの右端の数字をダブルクリックし、設定ウィンドウの「フレームの継続時間」で指定します。1秒間表示されたい場合は「100」と入力します。
できるだけスムーズな動きになるよういろいろ試した結果、今回は上から順に「10」「20」「10」に変更しました。

こんな感じになりました。

▼これまでアニメーションGIFは、素材集にあるものを使用していましたが、Fireworksを使うとすごく簡単にできてしまうので驚きました。もう少し絵が上手に描けたらな……。
▼もっとスムーズに動かすためには、コマ数（画像の数）を増やせばいいのですが、そうするとどうしても重くなってしまいます。できるだけ少ないコマ数で効果的な動きを作るには、やっぱり絵の練習が必要です。

｜ページのトップへ｜Webふぉれすとトップへ｜