FW4 NOTE

アニメーションGIFの作り方／透過GIF画像と配置する背景との関係
わたしがアニメーションGIFを作っていて理解したことは、
アニメーションGIFとは複数のフレームがあってフレーム1からフレーム2、3・・・と順番に、指定した時間、そのフレームのオブジェクトを表示することで変化が表現されるもの
ということです。
ですからアニメーションGIFを作るのは、フレーム数をいくつにして、それぞれのフレームでは何をどう表示するかを考えて作成することになります。
わかり易いように前にトップページで使っていた花火のアニメーションＧＩＦをもっと単純な形にした次のようなアニメーションＧＩＦを作ってみましょう。
　
（１）

Fireworks4を起動し、［ファイル］メニュー→［新規作成］で
キャンバスサイズの幅を300ピクセル
　　　　　　　　　　 　 　高さを200ピクセル
　　　　　　 　　　　　　 解像度を72ピクセル／インチ
キャンバスカラーはカスタムカラーの青色を選択する。
　
（２）

ツールボックスの［楕円ツール］を使って、左側の３つの円を描く。
　
　 このとき［塗り］パネルで塗りの種類は［なし］にし、［ストローク］パネルのみ次のように設定する。
　
　
（３） 次に右側の３つの円を描く。この３つの円はレイヤー2とする。
（２）で作ったものと全く同じ大きさで良いのでコピーしてしまうのが手っ取り早い。
　
→
　

このままではレイヤー１とレイヤー２の円が重なっているので、レイヤー２の３つ円を選択して配置したい位置まで移動する。

　
　 　
（4） 次にアニメーションＧＩＦにするため、フレームパネルを開き、フレームを７つ追加する。
（総フレーム数 ８）
　
　 　
（５）

次の表のように各フレーム毎に必要なオブジェクトを割り当てる。
　
1
2
3
4
5
6
7
8
左の円
小
○
○
○
○
○
　
　
　
中
　
○
○
○
○
　
　
　
大
　
　
○
○
○
　
　
　
右の円
小
　
　
○
○
○
○
○
　
中
　
　
　
○
○
○
○
　
大
　
　
　
　
○
○
○
　
　 　
　 《各フレーム毎に必要なオブジェクトを割り当てる手順》
　 　
　 　 　
　 左側のオブジェクト（レイヤー１）を次のように処理する。
　
　 【１】 フレーム１の左側の３つの円（レイヤー１の３つのパス）を選択してコピーする。
　
　 【２】 上の図のAのボタンをクリックするとBが２となってフレーム２の状態（レイヤー１、２とも何もない）をあらわすので、選択されているレイヤー１にコピーした左側の３つの円をペーストする。
　
　 【３】 同様にしてフレーム３〜５のレイヤー１にも左側の３つの円をペーストする。
　
　 【４】 フレーム１の左側の３つの円のうち中と大の円は必要ないので削除する。（選択してDeleteキーを押す）
　
　 【５】 フレーム２の左側の３つの円のうち大の円は必要ないので削除する。
　
　 【６】 フレーム４の左側の３つの円の色を黄緑系の色に変更する。
フレーム５についても同様。
　
　 右側のオブジェクト（レイヤー２）については、フレーム１の右側の３つの円（レイヤー２の３つのパス）を選択してコピーし、フレーム３〜７のレイヤー２にペーストして、各フレーム毎に不要な円を削除したり（フレーム１は３つとも削除）、色をピンク系に変更したりする。
　 　 　
（６） ツールボックスの［切り抜きツール］を使ってキャンバスのサイズを適当な大きさに切り抜く。
　
（７）

アニメーションGIFとして書き出す。
　 【１】 ［ファイル］メニュー→［書き出しのプレビュー］のダイアログボックスを次のように設定する。
　 　 《オプションタブ》
　　　　 ファイル形式―― アニメーションGIF
　　　　 パレット ―――― WebSnapアダプティブ
　　　　 最大カラー数―― ３２
《アニメーションタブ》
　　　　 フレームの継続時間―― ３０
　　　　　　　　（Shiftを押しながらクリックして全フレームを選択して）
　　　　 ループ ―――― 永久に
　
　
（↓オプションタブを選択したときの左部分） 　
（↓アニメーションタブを選択したときの左部分）
　
　 　 　
　 【２】 書き出しのプレビューのダイアログボックスの右部分下のほうにある［再生］ボタンをクリックしてアニメーションを確認し、ＯＫだったら［書き出し］ボタンをクリックして保存する。
このページのＴＯＰへ