HOME > コラム > WEB全般 > FireworksでアニメーションGIFを作成

FireworksでアニメーションGIFを作成

コラム

今回は、FireworksでアニメーションGIFを作成したいと思います。
と言いますのも、つい先日、何年か振りにアニメーションGIFを制作致しまして、記念に残しておこうかと・・・(笑)
最近はあまり見なくなりましたよね、動的な画像を見せる時はjQueryやフラッシュが増えました・・・フラッシュはだいぶ見なくなりましたが。
5年以上前にはもっと使われてたと思うアニメーション、改めて制作の仕方を残しておこうと思います。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

WEB全般に投稿したコラム記事

FireworksでアニメーションGIFを作成

アニメーションGIFイメージ
あまり使うシーンが見当たらないアニメーションGIF

つい先日、久しぶりにアニメーションGIFを制作致しました。
もう何年も前に制作したことを最後に考えもしなかったアニメーションGIFです(笑)

アニメーションGIFを使っているサイト、最近ではもう見なくなりましたよね。
今のところ(2016年3月現在)ですと、アダルトサイトの広告バナーやニッチ商品のバナー広告くらいでしか見なくなりました。
ユーザーの立場からすると、チカチカしますし、絵的に面白い絵が印象に残っておらず、あまりイイ印象がないのかもしれません。

10年くらい前、2chにはそういうアニメーションGIFやフラッシュで面白画像をつくる人がいたんですけどね、もうめっきり見なくなりました。

こういう言い方が正しいことかどうかは分かりませんが、フラッシュ動画はアニメーションGIFと同じような原理で制作することになります。
1枚1枚のフレーム(コマ)を繋ぎ合わせて動画に見せるという感じですね。
フラッシュの場合はさらに細かい調整などが出来るので、アニメーションGIFよりも制作時間はかかりますが、まぁそんな感じです。

アニメーションGIFの次にフラッシュがきて、その次にjavascript、jQueryがきたと思います。
これらはデバイスやローカルのスペックに伴って必要とされる分野が変わってきたと認識しています。

ということで、今更アニメーションGIFの作り方を解説したところで・・・なお話ですが、弊社は基本的に未経験でも受け入れていることと、こういうことを知らないクライアントさんに知って頂きたいということで、今更ではありますがアニメーションGIFの作り方を解説しようと思います。

Fireworksを使いますよ!

今回はPhotoshopではなく、Illustratorでもなく、Fireworksです。
今回も画像メインで説明致しますので、感覚で憶えて下さいね。

新規画像制作

今回は、アイキャッチでも使っている画像を制作するプロセスを簡単にまとめています。
ということで、サイズは600×400くらいにしています。
サイズに意味はありませんので、ご自由に決めて下さい。

新規画像を制作

適当に画像をつくってみて下さい

まずは適当に画像をつくってみましょう。
ここで作る画像は、1枚目のコマです・・・厳密に言うと1枚目の「ステート」です。。
「ステート」については後ほど出てきます。

適当に画像を制作する

「レイヤー」操作から「ステート」操作に切り替えます

右側にあるパネルの中のレイヤータブの横にあるステートタブをクリックして下さい。
そうしますと、ステート欄に「ステート1」という表示が出ますよね。
これが先述の「ステート」です。

レイヤータブの横にあるステートタブを赤枠でくくっています。

ステートの表示

ステートを複製する

今回は「ステートを複製」という操作で進めていきます。

「ステート1」の上で右クリックをすると、ステートの操作一覧が出てきます。
そこで「ステートの複製」を選びました。
2枚目以降のコマで全く異なる絵にする場合、複製ではなく新規作成を選んでくださいね。

ステートを複製

ステートの複製で同じ絵のコマができました

同じ絵をしたコマが出来上がりました。
「ステート1」の下に「ステート2」ができましたね。
この時、選んでいるステート毎にレイヤーがありますので、例えば「ステート1」を選んでいる状態でステート1内にあるレイヤーを消しても、「ステート2」の中にあるレイヤーは消えません。
ステート毎のレイヤーはそれぞれのステートの中でしか見ることが出来ませんのでご注意下さい。

ステートの一覧

コマの切り替わるスピードを調整してプレビューで確認

先ほどのステートタブの中にある「100」という数字、これはステートが切り替わる時間(速さ)のことです。
(赤枠で囲っている箇所です。)

そして、メニュー部分の「画像プレビュー」で画像のチェックを行うことが出来ます。
ステートが切り替わる時間の調整は「画像プレビュー」の中でも行うことが出来ます。

因みにですが、この時点ではまだアニメーションGIFにはなっていません。
この次でアニメーションGIFの設定を行います。

ステートの切り替わる時間

アニメーションGIFの設定を行い書き出して終了です

「画像プレビュー」をクリックするとウィンドウが開き、細かい設定をします。

まずはオプションボタンを選択している状態で「形式」欄があります。
この欄を「アニメーションGIF」にして下さい。
まずはこれでアニメーションGIFの書き出し準備が整った感じです。

あとは、「アニメーション」というボタンをクリックすると、先ほどのステートを切り替える時間などを設定することが出来る画面になります。
その他、リピートの回数を設定することが出来たりしますので、その時々に応じて設定して下さい。

画像右下部分にある矢印のボタンは再生などのコントロールボタンでして、再生ボタンを押して頂くとアニメーションGIFのプレビューが出来ます。

あとは、「書き出し」をクリックすることでアニメーションGIFを書き出すことが出来ます。

画像プレビューウィンドウ

締め

いかがでしたでしょうか?
アニメーションGIFをバナー広告などで使えるシーンがあるかもしれませんが、昨今は”落ち着いて情報伝達”を目的としたバナー広告が多いため、アニメーションGIFの使い道はないかもしれません。
jQueryやHTML5でも綺麗に見せることが出来るようになってきましたし、なかなか使いどころがないかもしれません。

しかし、端的に何かの説明を補助する場合には、意外に使えるモノです。
無理して使う必要があるとは思いませんが、サイト内のコンテンツで幅を取らず、”パッ”と何かを切り替えながらコンテンツを見せたい時には使えると思います。

ということで、ちょっとしたお役立ち程度に捉えて頂き、使えるシーンがあった時には是非使ってみて下さい。

執筆 : 清水 隼斗

FireworksでアニメーションGIFを作成のAMPページ

Facebookコメント

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。
株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP