FireworksでGIFアニメを作成しよう | Web仕事人の部屋

Web仕事人の部屋

札幌のWeb制作会社・株式会社メディアリュウム/株式会社WEBサクセスのスタッフHが、Web制作のTipsなどをお届けします。

こんにちは、橋本です。


WEBサクセスのGIFアニメーションについては「Fireworks」で作成しました。

簡単ではありますが、作成手順をふりかえってみましょう。


ご存知のとおり、GIFアニメは、みなさん小さい頃に教科書のすみに描いた(描いてないですか?)パラパラ漫画のようなものです。静止画が連続で現れることによって、動いて見えるんですね。


WEBサクセスの牛くんを例に解説していきましょう。


用意したのはこんな画像です。


画像その1


牛くん

Fireworks上は通常作業を行うフレームは フレーム1 となっています。

画像その1は フレーム1 のステージで作成します。


次に、牛くんにセリフを言わせたい、ということで噴出しを追加します。

牛くんの位置は変わらないので、フレーム1をコピーして、フレーム2を作ります。
フレームをコピー

フレーム2 には、フレーム1と同じ絵が配置されています。

フレーム2 が選択されている状態で、噴出しを作成します。


牛くんとふきだし

フレーム2の絵はこれで完成です。

そして最後に「WEBサクセス」の文字を右に配置したいと思います。

フレーム2 で作成した絵に追加したいので、先ほどの要領で フレーム2 をコピーして フレーム3 を作ります。

フレーム3のステージ上で文字を追加します。


牛くんとふきだしとWEBサクセス

この状態で、


フレーム1 → 牛くん

フレーム2 → 牛くんとふきだし

フレーム3 → 牛くんとふきだしと「WEBサクセス」


というように、各フレームには違う絵が配置されました。


絵が揃ったところで、各フレームをどれだけ表示させるのか、時間を設定します。

フレームのパレット上で時間の設定ができます。
フレームのウインドウ

今回はフレーム1と2をそれぞれ2秒ずつ表示させたいので、「200」としました。

フレーム3は4秒で「400」としました。


表示時間を変えたいときは、数字の部分をクリックすると別ウインドウが開き、時間が変更できるようになります。

フレームのウインドウで表示時間を調整

100分の○○秒、という設定なので、200と入力すれば2秒となるわけです。

時間を調節したところで、アニメーションGIF として保存します。

そうすると・・・



牛アニメ


できあがりです!


この静止画の繰り返しで、GIFアニメは成り立っているわけですね。


WEBサクセスのGIFアニメは、このあと 馬くん や 熊くん が続きますが、これにどんどんフレームを増やしていって、連続させているのです。


WEBサクセスホームページにお越しの際は、ぜひ最後までご覧下さい ニコニコ



//////////////////////////////////////////////////////////////////////


経営者の方からご好評をいただいております

「経営者のためのWeb 活用塾」

  第4期 受講生募集します!

  2007 年7 月12 日(木)開講です!
----------------------------------------------

■ 日 程(全4回コース)

1回目 2007年7月12日(木) 19:00~21:00
2回目 2007年7月19日(木) 19:00~21:00
3回目 2007年7月26日(木) 19:00~21:00
4回目 2007年8月 2日(木) 19:00~21:00

■場 所

正文舎印刷株式会社 多目的ホール

地図はこちら

札幌市白石区菊水2条1丁目4-27
(駐車場あります)

■ 受 講 料

  23,000円(テキスト代金込、税込)

---------------------------------------------

【Web活用塾とは】

どうしたら、Web の価値をみなさまに正しく知ってもらえるだろうか。    
その答えのひとつが「経営者のためのWeb 活用塾」です。

・ホームページとブログの効果的な使い分け
・ブログによるブランディング
・ひとりでできるSEO 対策

など、弊社のWeb 制作スタッフが、ホームページやブログを使った集客について、
講義をします。
受講生のみなさまには、ご自分で実際にブログを書いたり、
ホームページを改良していただいて、その結果を次の勉強会で
フィードバックしていただきます。

一方的な講義ではなく、
参加メンバーさんとの双方向で、Web をよりよく活用していきましょう。

---------------------------------------------
【これまでの受講生の方の声 抜粋】

基本的なプロセスをあらためて考えさせられました。
 経営方針にも関わることなので、
 次回もしっかり学ばせていただきます。

大変よかったです。ありがとうございました。

●第2期1回目の活用塾で学んだ方法を実践した結果は、
  Yahoo  2位→1位
  Google 圏外(100位外)→14位
  MSN  圏外(100位外)→12位

 でした。
 いずれも1週間以内に反映され、その効果のほどに
 びっくりしました。ありがとうございます。
 これだけでも参加したかいがあったなぁと。

●検索で一位になるキーワードがあるようで、
 企業さまからの問い合わせが増えました

具体的ケーススタディを見ながらの講義はわかりやすく
 参考になりました。ありがとうございました。

---------------------------------------------
お申込みはこちらから

●電話 TEL: 011-893-6390
   (担当:白藤/蝦名)

●フォームから簡単にお申し込みができます!
経営者のためのWeb活用塾 申込みフォーム