WEBデザイン WEB制作

【Fireworks】Flashなしで簡単に作れるGifアニメーション

投稿日:2014年8月20日 更新日:

サイトにちょっとした動きがほしい時、Flashを使わず、Fireworksでも簡単にGifアニメーションを作成できます。
ここで画面読込中のローディングアニメーションを作る手順をご紹介したいと思います。

STEP1. まず動かしたい画像をFireworksに配置します。
load1
STEP2. 「フレームとヒストリ」のツールバーの右側にあるオプションボタンをクリックして、「フレームの複製」を選びます。
load2
(この時「ステートを追加」を選択してしまうと、ページのデザインがコピーされないのでご注意ください。)
「フレームの複製」のウィンドウで数を「1」のままで「現行フレームの後ろに挿入」を選択します。

load3

STEP3. フレームを複製したら、動かしたいオブジェクトを選択して、90度回転します。
load4

STEP4. 2と3のステップを繰り返して、フレーム4つを作成します。
load5

STEP5. ドキュメントウインドウの右下にあるステートコントロールで動作確認をします。
load6

各フレームのスピードを調整したい場合、ステートパネルより各ステートの右側にある数字(初期値は「7」)をダブルクリックすると、「ステートディレイ」ダイアログが開きます。大きい数値にすると回る速度が遅くなり、小さい数値にすると回る速度が早くなります。
load7

STEP6. 最適化パネルからファイル形式を「アニメーションGIF」に変更します。
load8
最後にデータを書き出すときはメニューバーの「ファイル 」→「書き出し…」をクリックして、ファイル名を付けて保存します。
書き出されたアニメーションGIFアニメーションは、Webブラウザにドラッグするだけで動作確認することができます。
laoding

以上の手順を覚えると手軽にGifアニメーションが作れます。
是非サイト制作に活用してみてください!

-WEBデザイン, WEB制作

関連記事

デザインコンセプトとは?重要性や作り方について事例を交えてわかりやすく解説

デザインコンセプトとは?重要性や作り方について事例を交えてわかりやすく解説

デザインコンセプトは、作る側にとっても、見る側にとっても、とても大切です。何を伝えるべきで、何を伝えないべきか。コンセプトをしっかり設定すると、無駄な部分がスリムになってデザインに統一性が生まれるので …

Adobe XD アニメーションの作り方 ①

Adobe XD アニメーションの作り方 ①

こんにちは、デザイナーのAです。 今回はAdobe XDの自動アニメーション機能についてご紹介いたします。 目次1 Adobe XD 自動アニメーション機能とは2 作成方法 Adobe XD 自動アニ …

Google、ペンギンアップデート2.1を実施、アルゴリズムも変更されていた

Google、ペンギンアップデート2.1を実施、アルゴリズムも変更されていた

GoogleのMatt Cutts氏が、ペンギンアップデートver2.1を実行することをTwitter上で発表しました。 検索順位への影響は全体の1%以下とのことで、規模は大規模ではなさそうなことがう …

【CSS3】簡単なドロップシャドウや光彩(グロー)の付け方!

【CSS3】簡単なドロップシャドウや光彩(グロー)の付け方!

デザインを格好よくするためにシャドウを付けたりしますよね。 しかし、サイズが異なるたびに画像を背景に指定したりしなければならないのは大変です。 しかも、シャドウの幅の分だけはみ出ているということもあり …

デザインで役立つ!参考サイトまとめ

デザインで役立つ!参考サイトまとめ

こんちには、デザイナーのHです。 今回は、自分自身が良く参考にしているwebサイト全体の参考サイトではなく、パーツのデザインにフォーカスを当て、いくつかご紹介します。 目次1 Parts. &#821 …