ホームページ作成編 その8
作成したGIF画像を読み込もう！
作成手順3では、作成手順2で作成したGIF画像をフリーソフトGiamを使ってアニメーションバナーにします。最後の仕上げです。まずはGiamをダウンロードしたら解凍し、起動させましょう。
まずは、作成手順2で作ったGIF画像8枚をGiamに読み込みます。
【コマの付け足し】
[ファイル]⇒赤い線で囲まれた[コマの付け足し]⇒作成手順2で作ったGIF形式の画像ファイルを選択して読み込みます。「コマの付け足し」はファイルを読み込む作業の事。パラパラ漫画のイメージで！
ファイルを読み込むと赤い矢印▼のスペースに1コマ〜8コマと読み込まれたファイルが表示されます。この時、順番（アニメーションにしたときの動きの順番）が正しくなくても、赤い線で囲まれた"↑上移動"と"↓下移動"で順番を変更できます。
【コマの動きを設定】
どのようにアニメーションとして動かすか決めましょう。今回は、下の画像にあるように小さい「バナー作成♪」の文字がだんだん大きくなっていくようにします。
このような動きにするために1コマ目のファイルを一番小さい「バナー作成♪」の文字のGIF画像にして下さい。赤い線で囲まれた"↑上移動"と"↓下移動"で順番を変更しましょう。
アニメーションにした時の動きを決めよう！
アニメーションにした時に、どのような動きにするか決めなくてはいけません。コマ（GIF画像）の動きの速さや繰り返しの設定を行います。
【繰り返す回数を設定】
アニメーションバナーにした時の動きを何回繰り返すのか設定します。赤い線で囲まれた"繰り返しセット"にチェックを入れてください。アニメーションの動きは永久に続けますから、赤い線で囲まれた"永久に繰り返す"にチェックを入れてください。
【コマを動かす速度】
コマごとの表示する速度を決めましょう。つまりゆっくりとした動きにするなら1つのコマを表示する時間は長くなります。早い動きにするなら逆に短くなりますよね。その設定をします。
赤い線で囲まれた"1コマ 88×31"を選択してください。次に赤い線で囲まれた"ウェイト有り"にチェックを入れてください。その下の"ウェイト［1/100s］"に10を設定します。これは、1コマ目の表示している時間が0.1秒を意味します。
1〜7コマ目までは、"ウェイト［1/100s］"に10を設定します。8コマ目（「バナー作成♪」の文字が一番大きいGIF画像）は、"ウェイト［1/100s］"に200を設定します。これは、繰り返す動作にメリハリを付けるためです。
【動作確認】
次は、動作の確認をしましょう。上の図の赤い矢印▼の再生マークをクリックすると動作確認の画面が出てきます。これで動作の確認をして下さい。
ファイルを保存してアニメーションバナー完成！
アニメーションの動作を確認したら後はファイルを保存して完成です。その前に各コマを最適化しましょう。赤い矢印▼が指すマークをクリックして下さい。最適化されます。これは、前のコマに同じ絵がある場合（例えば背景）は削除して変化するところだけをアニメーションにするという事。これによってファイルサイズを小さくできます。
最適化された後は赤い線で囲まれた部分の各コマのサイズが小さくなっている筈です。
最後に［ファイル］⇒［名前を付けて保存］で終了してください。下にあるようなアニメーションバナーができている筈です。
皆さんも工夫して面白いバナーを作成してみてくださいね。
ホームページに企業のバナーを掲載して広告収入を稼ぎませんか？
ホームページやブログを運営している方なら誰でも始めることが可能です。
詳細はホームページで稼いでみよう♪を読んでみましょう！