こんにちは、リファレンス的なことをかいてきたんですが。 個別にトピックに整理したほうがよかったと反省しつつの第5回目です。

 講師の仕事をするまで、GIFアニメなんかあんまりつかわなかったんです。 私が教わったころは、基本あまり好ましくないなどといわれたましたけど、 今 i-phoneはFLASHをプラグインしないので最近アニメーションはGIFアニメやjQuery系でつくったりとちょっと変遷しているような様子です。しかし、Flashにはflashでしかできない事も多いですし勉強する時間を作るべきですよね。クリエイティブ&エンターテイメントなwebSiteの演出方法としてFlashはまだまだ主力です。 話を戻してGifアニメーションですが FwでつくるよりPhotoshopやFlashプロフェッショナルでGifアニメで書き出すほうがよさそうなのですが。 FireWorksの講座なのでFwで作ってみましょう。




 

見本・・・・アニメーションGIFの例

アニメーションシンボルの作成

 flashアニメーションのように ActionScriptで制御できませんが。簡単なコマ送りのアニメーションができます。

コマ数 位置 透明度 回転等の設定を行うと自動的に各ステート(コマ)に動きが割り当てられます。設定方法さえ覚えてしまえば簡単に作成できます。任意のオブジェクトをアニメーションシンボルに変換し「アニメーションダイアロブボックスで」アニメーションの各設定を割り当てて動かします。簡単な動きしか設定できませんが使い方しだいで表現力があがります。

Adobeテクニックノート・・・・・・・このサイトが一番わかりやすいと思いますのでこのサイトを参考に製作してみてください。

 
製作方法
  1.  アニメーションにしたいオブジェクトのレイヤーを選択するか選択ツールでオブジェクトを選びます。背景はグループ化をしたりロックをしておきましょう。
  2.  F-8キー もしくは メニューバー「変更」>シンボルに変換 「アニメーションシンボル」に設定します。シンボル名も入れておきましょう。

    シンボルに変換ダイアログボックス

  3.  
  4. レイヤーパネルにある パネルメニューで「レイヤーを複数のフレーム(ステート)で共有」にチェックを入れると背景の画像もアニメーションに書き出されます。

     (1つのドキュメント(ファイル)には複数のアニメーションが書けます。 しかし動作が重くなったりファイルが大きくなります。) 
  5. アニメーションダイヤログボックス「アニメーションオブジェクトを右クリック→<アニメーション>→<設定>」か プロパティーインスペクタで ステート数(コマ数)を入力 

        回転数 透明度 移動距離(px)移動角度 等を入れます。(非常に単純な動きしかできません。)

        製作後 シンボルをダブルクリックするとシンボルの編集画面で アニメーションシンボル内の編集ができます。 入れ子にはできないと思われます。(flushほど複雑にできない)    アニメーションダイアログボックス

     

  6. OKボタンを押して終了です。 失敗したら ドキュメントボックスで何度でも作り直せます。

    アニメーションシンボルプロパティインスペクタ

再生方法

 

アートボード(編集画面)の左したに 再生ボタンと フレーム番号が表示されます。再生ボタンを押すと動きが確認できます。  

移動アニメーションでは
   
  • みどりの○点が始点
  • 赤が最後のフレームの終点
  • 途中のフレームを青○点で
  • オニオンスライス的(cs5は可能)な表記ではないですが各フレームの表示位置が確認できます。
  • 各ステートを選択ツール等で移動させることで移動の編集をすることができます。

書き出し方

 

 

  1. アニメーションの載っている部分にスライスを作成します。 アニメーションオブジェクトを選択ツール(V)で選び→右クリック→ 矩形スライスの挿入。もしくはスライスツールで囲む。
  2. 最適化パネルもしくは画像プレビュー<ファイル>→<描画プレビュー(イメージプレビュー)>→描画プレビューダイアログボックスで指定します。
  3. 「アニメーションGIF」で更新ボタンで書き出す色を設定します。 プロパティでGIFスライス名を英数半角で入力を忘れないでください。

    描画プレビューオプションパネルダイアログボックス

  4. 描画プレビューダイアログボックスで「アニメーションGif」を設定したら アニメーションTabでステートのタイミング(1/100秒単位)の設定が指定できます。 

    描画プレビューアニメーションダイアログボックスの画像

    ステートメントパネルでもタイミング設定は編集できます。

    ステートパネルの画像

描画プレビューでさらにアニメーションの表示設定ができます。「アニメーション」タブで 継続時間の設定をします。 継続時間(停止時間)は100分の○秒でアニメーションが動きます。  20/100の場合1秒間に5コマ動きます。  各フレームに継続秒数を入力すると 実行秒数がしたに表示されます。    また、1回再生か ループ再生か設定できます。(ループの場合ブラウザに負荷をかけ表示が遅くなることありです。)    

書き出したGIF 画像は<img>でもCSSプロパティ background-imgでも動作します。  

個人的にPhotoshopや FlashでのGIFアニメーションの作り方や設定その他、諸注意はまだ私も学習不足で申し訳ないです。

Flashに関しては個人的にアクションスクリプトがいかほどの効果を生み出すのか調べ中であります。 擬似要素hoverのアニメーションぐらいは作ってみたいものです。

 凝ったアニメーションなどを作るにはデータ容量や画質、ローカルプログラム、各ブラウザとの愛称のことなどある程度知識が必要です。まずは簡単な動きを組み合わせたアニメーションを作りましょう。  

このエントリーをはてなブックマークに追加
[`evernote` not found]
はてなブックマーク - Fireworksを教えることに!(その5)GIFアニメーション機能