マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

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サイトへ

-WEBデザイン, WEB制作

関連記事

データベース(MySQL)の日付操作について

データベース(MySQL)の日付操作について

データベース(MySQL)で普段よく使いますが、 なかなか覚えられない、日付の操作のSQLについて書きます。 以下のようなニュースのテーブルが存在します。 CREATE TABLE IF NOT EX …

【これから始めるWEB制作】adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その3~

【これから始めるWEB制作】adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その3~

こんにちは、ひよっこWEB製作者のMです。 皆様いかがおすごしでしょうか? 大寒の時期とあって毎日ひじょ~~~~に寒いですが、体調など崩されておりませんでしょうか? 私は、1月が今週で終わるということ …

動物や人物の写真を一瞬で切り抜き?!すごすぎる無料ツール「remove.bg」

動物や人物の写真を一瞬で切り抜き?!すごすぎる無料ツール「remove.bg」

こんにちは、デザイナーのAです。 今回は人物や動物が映った写真の背景だけを一瞬で切り抜いてくれる無料ツール「remove.bg」をご紹介します。 ※6月のアップデートデートでかなり対象の幅が広がったよ …

【PHOTOSHOP】すぐに使えるデザインテクニック!アート風文字をラクに作る方法

【PHOTOSHOP】すぐに使えるデザインテクニック!アート風文字をラクに作る方法

STEP1. まず加工したい写真素材をPhotoshopで開きます。 STEP2. 背景の写真レイヤーの上に文字を入力し配置します。 STEP3. レイヤーパレット上でテキストのレイヤーを右クリックし …

【世界一カンタン?!】1枚の画像だけでロールオーバーをさせる方法

【世界一カンタン?!】1枚の画像だけでロールオーバーをさせる方法

画像のロールオーバーって面倒ですよね。 2枚の画像を用意してJavascriptで制御して、、や背景画像していしてh overで、、 というのが一般的ですが、 今回は画像1枚だけ。CSSに4行記載する …