« 我がこころの耳取峠 | Main | CSSアニメーション事始め »

2017.08.22

GIFアニメでバスを動かす

前回の水彩画のバスを動かしてみましょう。

アニメーションの作成には、今や風前の灯のFlashやCSS、それにGIFアニメなどを利用します。
FlashやCSSを利用すると複雑なアニメーションを作ることができます。GIFアニメは複雑な動きは表現できませんが、コンピューターの知識がなくても動きのある絵を用意するだけでアニメーションを作成できます。

今回はGIFアニメでバスを動かします。
GIFアニメはパラパラ漫画と原理が同じで、少しづつ動きのある絵を切り替えて動いているように見せます。

今回用意するものは以下の3枚の絵です。

①背景となる遠景と峠道を描いた絵
Genga01_470

②バスのみを描いた絵
Genga02

③手前の土手のみを描いた絵
Genga03_470

3枚の絵をレイヤー処理が可能な画像編集ソフト(今回はAdobe Photoshop Premere10を使用)に読み込みます。この時重要なのが各レイヤーに配置する絵の順番です。①の絵を一番奥のレイヤー、②の絵を真ん中のレイヤー、③の絵を手前のレイヤーに配置します。
①と③の絵は固定です。②のバスが土手に隠れて見えない状態から、徐々に右に進み、また見えなくなるまで、②の絵を少しづつ動かしながら、その都度、連番などファイル名を変えて保存します。今回はバスが右側に見えなくなるまで38枚の絵(ファイル)を用意しました。

次に用意した38枚の絵をGIFアニメ作成ソフト(今回はGiamというフリーのWinソフトを使用)に読み込み、各絵の表示時間等を設定すれば、GIFアニメの完成です。

峠道をバスが走るGIFアニメ。
Gif_

因みに今回は全ての絵が0.3秒で切替わるように設定しましたが、例えばバスが画面の中央に来た状態の絵だけ表示を3秒にすると、バスが中央に来て3秒間ストップするアニメになります。

バスが中央でストップ。
Gif__stop

 

|

« 我がこころの耳取峠 | Main | CSSアニメーション事始め »

Comments

Post a comment



(Not displayed with comment.)




TrackBack

TrackBack URL for this entry:
http://app.cocolog-nifty.com/t/trackback/62766/65691302

Listed below are links to weblogs that reference GIFアニメでバスを動かす:

« 我がこころの耳取峠 | Main | CSSアニメーション事始め »