意外な事実!アニメーションGIFはFlashで簡単に作れる!

意外な事実!アニメーションGIFはFlashで簡単に作れる!

野田

野田

はじめまして、新人デザイナーの野田です。 ブームは去ったと思ったのですが、またアニメーションgifを使ったWEBサイトが増えてきましたね。 WEBデザインギャラリーサイトなど見ていても、最近になってgifアニメーションのカテゴリができているのを、チラホラ見かけるようになりました。 戻ってきましたね。gifアニメの時代が! jsのみで動きをつけるのもいいですが、小さいパーツなどに簡単な動きをつけたいなど考えた場合、わざわざ動きを与えるコードを書くより、gifアニメーションで動きをつけたほうが良いのでしょう。 今までは、FireworksかPhotoshopでチマチマ作っていたのが当たり前だったと思いますが、今はFlashで制作できるようになっていたのは御存じでしょうか?知らない人も多いのでは? っということで、早速作ってみました。

1.アニメーションの設定

まずは、普通にFlashのタイムラインでもなんでもいいので、アニメーションを作ってください。

1.まず!!

今回は、簡単に説明するため、かなり簡単な作りで制作しました。 単純に自転車に乗ってる人が、街を滑走します。 その際、動きをつけるために背景が流れ、タイヤがクルクル回っているというようにします。 制作方法は、今回は割愛でお願いします。

2.アニメーションGIFファイルの書き出し

■ 制作が完了したら、ファイル → パブリッシュ設定を選択します。

制作完了

■ パブリッシュ設定画面で、【GIFイメージ】をチェック、【再生】をアニメーションに設定、ループの回数も選択できますので、お好みに合わせてパブリッシュします。

パブリッシュ設定画面

3. え、もう完成?

はい。もう完成です。 出力したGifです。 やはり、swfとは多少の違いやブラウザによる動きの違いはあると思いますが、 ポイントで使用するなら十分だと思いませんか?

完成Gif

最後に

おすすめはしていましたが、今回のつくり方だと実は穴もあります。 ※大きなディティールで使う場合は、減色や動きが気になるほど落ちる ※やはり動きが気になる ※動きが気になる ※そして動きが気になる です。 解決方法は、たくさんあるのですが、今回は基礎編として情報をご提供させていただきます。 先に気になる方は、【flash gifアニメーション PICTシーケンス】を調べてみてください。 ファビコンやWEBサイトを制作する際に、あ!!っという感じで思いだしていただけると幸いです。 新人デザイナー25歳の野田でした。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

クリエーティブディレクター / デザイナーの野田です。 小さい頃、兄にバトルDJとして育てられ、嫌になって逃げだした過去をもっています。 電車通勤です。 子供います。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL