2014.05.21

自社サイトリニューアルでのアニメーション制作について少しだけ。

新人カノさんNEW が「私は黄色がいいんですぷっくっくな顔!!」ということで、
あっさり脱オレンジ。ブログ色を紫に変えた岡田です。

この機会にアニメーション制作時の画面キャプチャを少しだけ。

メニューのキャプチャ

メニューにマウスを持って行くと、髭の生えたココノヱくんが
色んなアルファベットから出現する今回の演出ひらめき

サイトは非Flashですが、画像書き出しまでの工程はほぼFlashで作成しています。

メニュー制作時のキャプチャ

Flashタイムラインでアニメーションを作っているときが、一番和みますいい気分(温泉)

数コマのラフイメージをデザイナーから受け取って、
モックを作成、共有、修正を繰り返すという作業工程。

アニメーション作りは、慣れているFlashが早いですダッシュ(走り出すさま)

これをFlashCS6から搭載した「スプライトシート書き出し」で、
一コマずつ並べた画像を作成。こんな感じ。

メニューのスプライトシート

開始と終了フレーム数を指定して、再生や逆再生、
終了時にメソッドを実行してくれるような自作のスプライトアニメーションクラスを
JavaScriptでゴニョゴニョして無事表示させておりますレストラン

スライドショーメニューのキャプチャ

同じくトップスライドショーのナビ。
実績サムネイルのグニョグニョ感に合わせてこちらもグニョっと曇り

スライドショーメニューの製作時キャプチャ

Flashタイムラインでアニメーションを作っているときが、一番和みますいい気分(温泉)

Flashモックでは確認の為にいくつかドットを並べていますが、
スプライトシート作成時はドット一個分の全コマ画像を作成。
(以下、途中で切りましたがサイトで使用した画像は横4400pxほどあります冷や汗2

スライドショーメニューのスプライトシート

これをスライドショーの枚数分並べて、うまくアニメーションが続くように、
JSでドットごとに表示フレームを変えながら制御してます。

泡キャプチャ

サムネイルにぶつかったとき発生する泡も同様です。

こちらはタイムラインで作らずに、
クリックする度にランダムで発生する泡パーティクルをFlash上で。

何度かクリックして良い感じのアニメーションが出たら、
その動きを保存して、スプライトシートを書き出すAIRアプリを作成。

泡スプライトシート生成AIRアプリキャプチャ

で、色別に並べたシートがこんな感じです目

泡スプライトシート

FlasherがJS触るとこんな作り方になってしまいますがたらーっ(汗)
なかなか楽しい演出に仕上がったのでは、なんて思ってます指でOK

TAG =
Flash
開発
JavaScript

COCONOE inc.

ADDRESS :
1613-5, SHIMPO, MINAMI-KU
OKAYAMA-SHI, OKAYAMA,
700-0945 JPN
TELEPHONE :
086-243-6614