Edge Animateで作成するHTML5サイトのサンプル

2013年02月04日 (月)
Tweet

Edge Animateで作成するHTML5サイトのサンプル

随分前に作成したものですが、Edge Animateを使ったウェブサイトサンプルを作ったので紹介します。Edge Animateとは2012年9月にリリースされたアドビのHTML5向けのアニメーション制作ツールです(参考記事)。アニメーションを作るためのタイムラインを持っており、JavaScriptなどを併用してインタラクティブコンテンツを作ることのできます。ユーザーコミュニティーが盛り上がればいいなぁということでソースファイルも配布しておきます。

Edge Animateの特徴

インタラクティブコンテンツを作るには課題の多いHTML5ですが、Edge Animateは初級者でも使いやすいように至れりつくせりの機能がついています。特徴的な機能としては次の通り。

アニメーションは内部的にjQueryアニメーションとして変換されている
既存のHTML製ウェブサイトにアニメーションを付与することができる（既存のコードを壊さない）
Google Web Fontに対応している
旧式IE6〜8対応のGoogle Frameプラグインをサポートしている
旧式ブラウザ向けの下位ステージ対応ができる
プリローダー実装のインターフェースがある
スクリプトを書くことなく、HTML5のアニメーションを作成できる
スニペットが用意されているので、スクリプトの苦手なデザイナーも使いやすい（と思う）

Flash Proとの比較

類似ソフトとしてのFlash Proと比べた時のメリットとしては次の点です。

jQueryを用いて動きを実装しているだけあってFlash実行ファイル(SWF)よりも滑らかに動く ※Flashは最大60fps(16ms毎の画面更新)の制限があるのだが、Edge Animateは約77fps (13ms毎の画面更新である)
イージングの種類がグラフ表示されるので容易かつ効率的に動きを調整できる
After Effectsのようなインターフェースであり、プロパティ別のキーフレームが作りやすい (Flash Proのモーションエディターは非常に使いづらいので…)
レイアウト配置に相対配置(パーセンテージ配置)ができるので、可変レイアウト対応が容易
セマンティックに作成できるのでSEOの効果が期待できる (ゼロスクラッチからでも静止テキストとして出力できるし、既存HTMLサイトの編集ならなおさら効果が期待できる)
Edge Animate 1.0の起動がFlash Pro CS6に比べて爆速

もちろんFlash Proのほうが実現可能な機能が多く完成度が高いのですが、新しいソフトウェアということでメリットだけ書きだしてみました。