2014.05.21
自社サイトリニューアルでのアニメーション制作について少しだけ。
新人カノさん
が「私は黄色がいいんです
」ということで、
あっさり脱オレンジ。ブログ色を紫に変えた岡田です。
この機会にアニメーション制作時の画面キャプチャを少しだけ。
メニューにマウスを持って行くと、髭の生えたココノヱくんが
色んなアルファベットから出現する今回の演出
サイトは非Flashですが、画像書き出しまでの工程はほぼFlashで作成しています。
Flashタイムラインでアニメーションを作っているときが、一番和みます
数コマのラフイメージをデザイナーから受け取って、
モックを作成、共有、修正を繰り返すという作業工程。
アニメーション作りは、慣れているFlashが早いです
これをFlashCS6から搭載した「スプライトシート書き出し」で、
一コマずつ並べた画像を作成。こんな感じ。
開始と終了フレーム数を指定して、再生や逆再生、
終了時にメソッドを実行してくれるような自作のスプライトアニメーションクラスを
JavaScriptでゴニョゴニョして無事表示させております
同じくトップスライドショーのナビ。
実績サムネイルのグニョグニョ感に合わせてこちらもグニョっと
Flashタイムラインでアニメーションを作っているときが、一番和みます
Flashモックでは確認の為にいくつかドットを並べていますが、
スプライトシート作成時はドット一個分の全コマ画像を作成。
（以下、途中で切りましたがサイトで使用した画像は横4400pxほどあります
）
これをスライドショーの枚数分並べて、うまくアニメーションが続くように、
JSでドットごとに表示フレームを変えながら制御してます。
サムネイルにぶつかったとき発生する泡も同様です。
こちらはタイムラインで作らずに、
クリックする度にランダムで発生する泡パーティクルをFlash上で。
何度かクリックして良い感じのアニメーションが出たら、
その動きを保存して、スプライトシートを書き出すAIRアプリを作成。
で、色別に並べたシートがこんな感じです
FlasherがJS触るとこんな作り方になってしまいますが
なかなか楽しい演出に仕上がったのでは、なんて思ってます
comments
trackback
- このエントリに対するトラックバックURL