Category Archives: 6 ウェブアニメータ

05 ぴかぴかアイコンに挑戦(GIFアニメ)

2枚以上の画像を用意しておいて、GIFアニメを作ってみます。

  ←このような派手なアイコンを作ってみませんか^^

今回は同じ大きさの画像を2枚以上用意してみてください。
(このページでの説明は2枚以上用意した場合です。1枚の時は こちらです。

複数枚の画像ファイルを使用してアニメーションを作成

 

 ← のアイコンの場合下の4枚を用意しました。

   
とりあえず、作ってみたい画像が無い方は、この↑の4つでもダウンロードしてください。

4枚同じ大きさです。

アニメーション ウイザードを使って作成します。
黄色い魔法のランプみたいな怪しいアイコンででてきますよ!


複数の画像ファイルを使用してアニメーションを作成を選びます。

次へ



ファイルの設定画面がでますので、画像の追加(昔は選択?)で使いたい画像を2枚以上選択します。

4色の●のアイコンを選択しています。
(キーボードの[Ctrl]を押しながら選択すると一度に選べます)


一度に開かなくても一個一個開いてもOKですw
何度でも「画像の追加」ボタンを押してください。
画像の順序を入れ替える事もできます。
色の表示される順番にこだわるなら入れ替えてください。(後からも変更可)
プレビューにチェックを入れて見ると便利。
大きさもここで確認してね^^



上の画像と同じですが・・・。使いたい画像を選んだら、 次へ を押します。



どこにあわせて重ねるかということを聞いてきますが、今回は同じ大きさの画像なので、そのまま次へを押します。



繰り返しの回数・無限か、フレームの1枚1枚の表示時間を聞いてきます。
今回は、繰り返しは無限を選びました。
有限の場合は回数を設定してください。(後からでも変更可)

各フレームの表示時間はデフォルトで500になっています。
これでもいいのですが、少し早くしたかったので200にしてみました。
早いほどピカピカしますが、早すぎると色がわからないピカピカになります。
その辺は好みで、効果を確認しつつ(この後、出来ます)決めてください。



この時点でできているアニメーションが表示されています。
右向きの青い三角を押すとプレビューでみる事ができます。
速さや重なる順番が気に入らなければ、 戻る で戻って変更してもOKです。
(この後でも変更可)
これでいいなら完了を押します。




この画面↑が表示されます。
ここで、最適化をしたり、アニメの表示速度を変えたり、などもすることが出来ますが、とりあえず十分なので、完成にします。
ツールバーの保存を押すか、
メニューバーのファイルから、名前を付けて保存を押し、 半角英数字でファイル名をつけて保存してください。

完成です Ψ(`∀´)Ψ

出来たでしょうか?確認もできたかな?w

XPならクリックしただけで確認できると思うけど、一昔前はこの確認がちょっと大変だったのですw

むかーし確認が出来なくて、悩んだ事があったので一応書いておきます。
(2001年ごろに書かれた昔・・・。確認できたら下の文章は気にしないでw)

実際出来上がっていてもフォルダの中ではアニメに見えないことがあるので、ホームページビルダーに貼り付けてみるか(編集画面ではアニメマークはでるけどピカピカはしませんが・・・)素材ビューの下のところに設定っていう所があって、そこで「アニメーションを動かす」を設定すれば、素材ビューでもアニメが動きます。
GIFファイルを何で開くかという関連付けがあって、もし編集ソフトなどになってたら確認したいだけなのに編集画面がひらいちゃったりしてめんどくさいですよねw

アニメを確認するためにホームページビルダー本体があるのかもしれないですね! (ひどいw)