作成日

21 October 2012

ADC MEETUP Round 06「CREATE THE WEB TOUR」のセッション2では、アドビ システムズのデベロッパーエバンジェリスト・Lee Brimelow氏より、Web標準技術を使ったアニメーション作成ツール「Adobe Edge Animate」の紹介が行われました。

(01:00) まずはEdge Animateの簡単な紹介が行われました。Edge AnimateはHTML5/CSS3/JavaScriptを使ったアニメーションコンテンツを作成することができるオーサリングツールです。Flash Professionalなどと同様のインターフェイスでアニメーションを作成できます。

(01:35) そこからは、デモを交えながらEdge Animateの個別の機能が紹介されました。Edge AnimateのUIは左に属性プロパティのパネルが並んでおり、下部にはタイムラインが表示されています。これを操作してアニメーションを作成していきます。

(03:10) コンテンツを配置するとキーフレームが自動でタイムラインに追加されます。タイムライン上にピンを設置してコンテンツのプロパティを設定すれば、ピンとピンの間のアニメーションが自動で作成されます。コンテンツの配置を変更すれば、移動するようなアニメーションを作成することができます。

(05:20) Edge Animateからブラウザーを起動して実際の動作を確認できます。また、イージング効果はイージングパネルによって簡単に実装できます。

(06:20) 要素をシンボルでまとめると、シンボル単位でコンテンツを複製したり、独立したタイムラインで再生したりできるようになります。

(07:50) トリガーを埋め込んで、アニメーションなどをコントロールできます。トリガーはスニペットを使って簡単に設定できます。

(11:35) アニメーションはタイムラインで設定するだけでなく、JavaScriptによって実装することもできるとのこと。Edge AnimateにはjQueryが組み込まれているので、jQueryで用意されているアニメーション効果を使うことができます。ソースコードの編集はコードパネル使って行う。スニペットも用意されています。

(15:00) Edge Animateにはボタンや罫線、テキストボックスなどの様々な部品が用意されていますが、重要なのはこれらがdiv要素を用いて実装されているという点です。あくまでもHTMLをはじめとしたWeb標準技術で完結させているわけです。そこで、実際にdiv要素を用いて簡単なボタンを作成するデモが紹介されました。div上にテキストを配置し、イベントを設定すればボタンのような効果を実装できます。divなので、カーソルがボタンに乗ったら形を変えるなどといった効果も、CSSだけで簡単に追加できます。

(17:30) 実際にどのようなコードが生成されたのかは、Open Developer Toolのインスペクタによって確認できます。公開の形式はPublish Settingで行うことができて、たとえばStatic HTMLを指定すれば、静的なHTMLのコードだけで実装されていることが確認できるそうです。また、新しいWeb Animate Deployment Packageを利用すれば、WebサイトだけでなくInDesignやiBooksの形式にエクスポートしたり、Digital Publishing用に使うことなどもできるとのことです。

(20:50) 次のデモでは、Webフォントの統合機能が紹介されました。フォントの設定パネルがWebフォントをサポートしており、オープンなWebフォントを通常のフォントと同じように選ぶことができるそうです。

やり方は、Webフォントのサイト上から任意のフォントを選び、そこに示されたスニペットのコードをEdge Animateのフォントパネルに取り込むだけ。Edge Web FontsやGoogle Web FontsなどといったオープンなWebフォントサービスを利用して文字を装飾することができます。

(24:20) その他の様々な機能の使い方は、Edge Animateにあらかじめ用意されたチュートリアルプロジェクトを参照することで学習できます。チュートリアルプロジェクトでは用意されたシナリオに沿ってEdge Animateの使い方を学ぶことができるようになっており、実践的な使用例の参考になるとのことでした。

(26:00) 最後に、「なぜFlashではなくHTMLで作るのか」という疑問への回答が提示されました。「どちらでも好きなものを使って欲しい。大切なのは優れたコンテンツを作れることで、Edge Animateはそのための選択肢の1つとして提供している」とのことす。

そして、Edge Animateのどこが優れているのかを語る代わりに、Edge Animateで何ができるのかというユースケースを見せたいとして、ゲームサイト「Botanicula」のバナー制作の例が紹介されました。BotaniculaのバナーはEdge Animateを利用して作成されており、Edge Animateを使って実装できる様々な要素がふんだんに盛り込まれているそうです。

(28:50) また、米国の人気テレビドラマ「Breaking Bad」の公式サイトの事例も紹介されました。このサイトはFlashを利用してインタラクティブに様々な情報を提供していますが、Flashに対応していないモバイル端末では見ることができません。そこで、Animateを利用してこのサイトのHTML5版を作成してみたそうです。この例は、従来はFlashでなければ実現できなかったようなインタラクティブなWebサイトも、Edge AnimateであればFlashと同様の手順でFlashを使わずに構築できるということを示しています。セッションでは、具体的にどのような手順で作成したのかもデモによって詳しく説明されました。

 

関連ADC記事:
Edge Animateで作るHTMLモーショングラフィック
Edge Animateでレスポンシブなバナーを作ろう