Fireworks好きのブログなのにFireworksの記事がひとつもないサムイ状態だったので、これから少しFireworksの便利機能を少しずつ紹介したいと思います。
今回はFireworksでgifアニを簡単に制作する方法。

バナーやボタンなど動きがあると目をひきます

出来上がりはこんな感じ。
バナーとかボタンとか動いてるものはやっぱ自然と目がいきますよね。

まずは全体のイメージを考えたところで、動かない「土台の部分」を作ります。

フレームのウィンドウを表示

次に「ウィンドウ」→「フレーム」よりフレームのウィンドウを表示させます。

動かない土台部分は、「アニメーションより上に表示させる部分」と「アニメーションより下に表示させる部分」とに分けます。
今回私はそれぞれをグループ化し、「文字」と「背景」という名前をレイヤーにつけました。

フレームをたくさん作ってアニメーション配置の準備をしておく

次に、フレームのウィンドウより、フレームを増やします。
土台部分は全フレームに表示させるので、1フレームを選択した状態で、フレームウィンドウ下部の「フレームの作成・複製」のアイコンにドラックさせれば、フレームをコピーすることができます。
私の場合ですが、アニメーションを作りながら随時長さを調節していくので、土台となるフレームをあらかじめいっぱい複製しておきます。

いよいよアニメーション作成！

次に、アニメーションを作っていきます。
今回私はシャボン玉をぽわぽわ上にあがっていく、というアニメなので、シャボン玉をアニメーション化します。

アニメーション化したいオブジェクトを選択した状態で右クリック→アニメーション→選択オブジェクトをアニメーション化をクリックします。

アニメーションウィンドウが出ます。
こちらで設定できるのが、

• フレーム→フレーム数の設定
• オブジェクトの移動→シャボン玉が動く距離
• 方向→シャボン玉が動く方向
• 拡大・縮小→シャボン玉を大小大きさを変えていくことができます
• 不透明度→シャボン玉を透明からだんだん表示または逆に消えていく、といった設定
• 回転→右まわり、左まわり、回転数

以上を数値で設定ができます。
Flashのモーショントゥイーンみたいな感じですね。

数値を入れた後でも、下の画像のようなガイドが表示されますので、そこで向きを変えたり、長さを調節したりと、びよんびよん動かせるのですごく便利です。

設定が終わっても、シンボルを右クリック→アニメーション→設定で先ほどのアニメーションウィンドウが表示されるので何度でも設定変更可能。

スライスして書き出したものをプレビュー

アニメーションの設定が終わったら、Fireworks上でプレビューすることも可能ですが、スピード感が全然違いますので、毎回gifに書き出してどんな感じかスピードを確認したほうがよいです。

スライスの「最適化」でアニメーションgifに設定して実際に書き出した画像でプレビューしてみてください。

☆完成です☆

以上のような感じでひとついい感じのアニメーションシンボルができたら、そのシンボルを他のフレームにもペーストしていきます。
色んなところからシャボン玉が浮かんでくるのをあらわすために、ペーストする場所とタイミングをそれぞれずらしていくことでこんな感じになりました。

シンボルの便利なところは、Flashのシンボルと同じように、ひとつの動きの設定を作るだけでいいとこです。
シンボルを使わずに、このシャボン玉の動きを一こま一こま動かして各フレームに配置し、それをいくつも作るとなると途方もない労力が。。。

シンボルを使うことでだいぶ楽にgifアニメ作れますよ！
ぜひ、アニメを使って魅力的なバナーやボタンを作ってみてください☆