Edge Animateで電車を走らせる

Edge Animateの習作に、このブログのヘッダー部分にアニメーションを組み込んでみました。阪堺電車モ162と大阪市電3050、それぞれをクリックあるいはタップすると動き出します。スマホやタブレットでもOKのはずです。

Adobe Edge AnimateはHTML5+CSS3用のアニメーション制作ツールです。iOSや新しいAndroidがフラッシュに対応していないこともあって、今後ウェブ上のアニメーション制作のデフォルトツールになるのではないかと思われます。

ちなみに現時点ではバージョン1.5で、登録すれば無料で利用できますが、たぶん近々にリリースされるCreative Cloudバージョンから有償化されるようです。

出力したアニメーションはフラッシュのようにobjectタグでオールインワンになるのではなくて、HTMLファイル1+JavaScriptファイル3つが出力されるので、これらを全部サーバーにアップロードする必要がありますが、DrupalにEdge Suiteという便利なモジュールがリリースされていたのを見つけました。

まだdevバージョンでダウンロード数も200程度なのですが、これがなかなかスグレモノです。Edge Animateでパブリッシュする際にoamファイルという設定を選択しておき、これをDrupal上でアップロードするだけで、アニメーションのブロッグが生成されます。

ここではヘッダー部分にposition設定で貼っつけているだけです。

アニメーション自体はBトレのデフォルメを参考に、イラレで作ったpng画像をタイムラインで移動させてイージングをかけているだけで、これだけじゃ面白く無いので音源を組み込んでみました。音源はこちらのoggファイルを利用させていただき、Adobe Auditionで編集、さらにブラウザがoggとmp3を選択して再生できるようにしています。

Edge Animateでは現状オーディオのサポートはされていないのですが、別途JSを組み込めばOKです。Buzzというスクリプトを利用させてもらっています。この外部スクリプトは別途Drupalのテンプレートで呼び出す必要があります。これで、Edge Animationのオブジェクトにapiを組み込んでやります。

モ162のツリカケ音は、都電7000系のもの、大阪市電3050は115系電車のものを使ってみたのですが、なんとなくそれっぽいです。

※IE9ではたぶん音が鳴らないと思います。

Edge Animateハマれそうです。インタラクティブなバナーやナビゲーションメニュー、DrupalのDBからのデータの読み込み、Google Map等のAPIとの連動、といったいろんなことができそうです。