ブログトップ画像の「GIFアニメ化」

ブログトップ画像の「GIFアニメ化」・こいつ
@@4.jpg

【「GIFアニメ」って、そういえば今まで作った事が無い事気が付いた】
 過去エントリの「ハマルWEB漫画を見つけた」でもちょこっと書いてるんだけど、ymdは「WEBページにおける動的な要素」が結構重要だと思ってます。

 何でもいいと思うんだけど、「スライド」だったり「フェードイン/アウト」だったり、何も動きが無いよりかはそのページが「動いてる」感じがして良いなと。…まぁ、動いてるんだから「動き」を感じるのは当たり前なんだけど、イメージ的には「厚み」がある。こんな感じ。逆に画像イメージだけだと「平たい」感じがして、一応アニメーションの世界に携わっていた人間としては「前者」かなと。…好みもあるけどね。

 んで、早速“こいつ”の「目」をぱちぱちさせて見る事にしました。…なんせ「GIFアニメ」を作った事が無いので。

【「パラパラ漫画」の延長線上に「GIFアニメ」はあった】
 「アニメ」と言っても特に難しいことは無くて、「パラパラ漫画」の要領で画像を何枚か用意して、あとは専用のソフトを使って、画像一枚の表示時間を設定して、「.GIF」で保存すれば出来上がりってワケです。難しい要素は特に無し。ちなみに、今回使った画像は「9枚」。「瞬き」がモチーフだから、目を閉じる動きは目を開ける動作の逆を作ればいいわけで、実質「4枚」。。

・1
@0.jpg

・2
@1_20091213182834.jpg

・3
@2.jpg

・4
@3.jpg

・5
@4.jpg

・6
@5.jpg

・7
@6.jpg

・8
@7.jpg

・9
@0.jpg

 こんな感じで「目」のレイヤーをちょっと変えてやるだけで、「瞬きのアニメーション」が出来てしまうワケです。「GIF」は軽いから扱いやすい事し「初心者」には有り難い。これを応用すると、ランナーを走らせたり、サーファーをテイクオフさせたり出来るんで、また気が向いたらやってみようかな。。でも、「画」を書くのがめんどくさいなぁ。。

 …ちなみに、「.GIF」はymdの使ってる画像ビューワ「Picasa」ではアニメとして認識されなかったんで(設定方法知りません。。)、最初はアニメが出来てないと思ってたんだけど、インターネットブラウザにぶち込んだらウザイほど瞬きしてたんで、ボンミスには気をつけたいなと。その部分に結構時間を取られてしまったんで。。

 若干気持ち悪いけど、ちゃんと動き出しました。

web拍手

トラックバックURL: http://secret-live.net/wp/wp-trackback.php?p=2857