Adobe Developer Connection(ADC)と連動する開発者向けイベント「ADC MEETUP ROUND2」の最終セッションでは、アドビ システムズ社のDevin Fernandez氏により、現在開発中のツール「Adobe® Edge Animate」についての紹介とデモが行われた。

Adobe Edge Animateについて

Fernandez氏が会場でAdobe Edge Animateについてアンケートをとったところ、まだ知らない人の方が多く、使ったことがある人はごくわずかなようだった。Fernandez氏によると、Adobe Edge Animateは「Flashで作られたコンテンツをWeb標準に準拠したい」という要望から生まれたという。

Adobe Edge Animateは、モーショングラフィックスとインタラクティブなデザインをWeb標準向けに出力することができるツールだ。その際、Flashのように編集用のバイナリファイルがあるのではなく、直接HTML/CSS/JavaScriptファイルが書き出されるとのこと。また、デスクトップ向けだけではなく、モバイルデバイス向けの書き出しにも注力しているという。

※Adobe Labsでは、Adobe Edge Animateのプレビュー版を配布しているので、ぜひ試していただきたい。

FlashからWeb構築へ応用可能

現在、Webサイト向けのアニメーション/インタラクティブコンテンツ作成ではFlash、またモーショングラフィックの世界ではAfter Effectsが主流のツールとなっている。Fernandez氏は「新しいツールもとっつきやすい、使いやすく慣れているUIを使うべき」と、Adobe Edge AnimateのUIを紹介した。Adobe Edge AnimateのUIのベースにはFlash/After Effects/Photoshopで使われているスタイルを取り込み、またパフォーマンス面もプロレベルで通用するように最適化されているという。

今回のデモでは、Adobe Edge Animateの機能として、下記の内容が紹介された。

Adobe Edgeの機能

機能 内容
新しいコンポジション(ムービーを入れる器)からアニメーションを作成 素材などを用いてゼロからAdobe Edge上でアニメーションを作成していくことができる。
既存のWebページにアニメーションの組み込み 既にコーディングが完了しているWebページをAdobe Edgeで開き、アニメーションを追加することができる。
シンプルな描画ツールを搭載 現行バージョンでは、シンプルなシェイプやテキストを作成することができる。
読み込み素材のアニメーション PNG、JPEG、GIF、SVGという素材を読み込み、アニメーションさせることができる。
WebKitベースのデザインステージでプレビュー WebKitベースのプレビュー画面でアニメーションを確認できるので、ブラウザーでの閲覧に近い状態で確認ができる。
CSS3を使ったスタイリング Web標準ベースのテクノロジーで作られているため、CSS3を使ってスタイルを構築していくことができる。
ビジュアルのプロパティインスペクタ アニメーションの指定には直感的にプロパティを変更できるプロパティインスペクタを搭載している。
タイムラインエディタ Flashのようなタイムラインエディタがあるので、効率よくアニメ化をはかることができる。

また、今後は新しいシェイプ、機能、コーディング、グラフィックスが追加される予定であり、現在もフィードバックを受付中であるとのこと。

Adobe EdgeのUI

Adobe Edge Animateの概要の紹介が終わると、実際のアプリケーションを使ったデモを開始した。

まずは、Adobe Edge Animateのファイル形式について。
「全てのAdobe Edge Animateプロジェクトは、HTML/CSS/JavaScriptファイルおよびテキスト形式のプロジェクトファイルから構成されています。つまりFlashのように専用の編集用バイナリファイルは入っていないのです。また、Adobe Edge Animateはアプリケーションのスタートが速いです。パフォーマンスにフォーカスを当てて開発しています」

続いて、アプリケーションのUIについての説明があった。
「WebKitベースでレンダリングされているステージの周りにいくつかのパネルがあります。右側には、『エレメントパネル』と呼ばれるPhotoshopのレイヤーパネルに似たパネルがあり、各要素の重なり順などを変更することができます。ただし、レイヤーパネルとは違い、DOM構造が表示されます」

「左側には『プロパティインスペクタ』と呼ばれるパネルがあります。ここには、アニメーション化できる全てのプロパティが表示されています。もちろん、これらのプロパティはCSSによってコントロールされます」
直感的な値の変更がCSSとして出力されるため、JavaScriptを用いたアニメーションを従来よりも感覚的に行えるようになるのではないだろうか。

「下部にはFlash、After Effectsから取り入れたタイムラインがあります。ここではDOMの中でどのオブジェクトを、またそのオブジェクトのどのプロパティをアニメーションさせているのかがわかります」

「タイムラインの下部にはズームツールがあり、これを使って表示する時間の範囲を変更することができるので、アニメーションのタイミングを細かく制御できます」
このズームツールについては、同様の機能がFlashにもあるので、なじみがある方も多いだろう。

Adobe Edge Animateを使ったアニメーション制作デモ

続いて、アニメーション制作のデモに入った。今回のデモは、簡単なバナー広告を作成するというものだ。

プロジェクトファイルを開くと、3つのテキストブロックがあり、背景画像は既にアニメ化されている状態。テキストは既にステージには配置されているものの、まだアニメーション処理は行われていない。Fernandez氏は、まずテキスト部分のアニメーションから取りかかった。

全てのテキストを選択して、開始点となるプレイヘッドを1/4秒動かした後、アニメーションさせるポイントとなるマークを動かして、オパシティ(透明度)を変更するというオーサリングを行った。基本的なアニメーション作成の手順は、起点と終点を設定し、そして終点でプロパティを変化させるだけのようだ。これは、Flashでいうところの「フレームアニメーションのキーフレームに相当するポイントを作り、その間でプロパティを変化させる」と同じようなものだと考えると分かりやすいだろう。

Fernandez氏は、フェードアウトの他にテキストを移動させるなどのアニメーションを追加した後、アニメーションが行われる時間の変更について解説した。
「タイムライン上にあるアニメーションの端をドラッグすることで、アニメーションの時間を簡単に長くしたりすることができます」

また、テキスト1つひとつを別々のタイミングでアニメーションさせるために、タイムライン上でアニメーションごとドラッグをすることで、アニメーションの開始位置のみを変更するという手法も解説した。このあたりは、After Effectsにも通じる使い勝手といえるだろう。

Adobe Edge Animateでは新しくコンテンツを作ることもできる。その模様をFernandez氏は実際に動作させながら解説を続けた。
「長方形や角丸、テキストをステージ上に配置することができます。まず、ツールパネルより長方形をドラッグしてきて、アニメーションをオフにしたあと、希望のサイズに変更して使用します。配置した長方形は、エレメンツパネルでdivを選ぶことでも選択が可能です。また、CSSによるborder-radiusの変更もプロパティインスペクタからできます」

バナー上にロゴを配置するための白い長方形を配置した後、テキストツールで黒を選択して「Adobe Edge Animate」と入力した。このテキストツールで入力した文字は、フォントの変更も可能で、Times New RomanからArialに変更を行った。

続けてFernandez氏は、SVGでAdobeのロゴを入れる様子を実演した。
「SVGはモダンブラウザーでサポートされているので、プラグイン不要である点が優れています。Adobeでは10年間に渡ってSVGに対する研究を続けてきました」

これでスクリーンには、Adobeのロゴ、そして製品名、背景の白地というデザインが完成した。

その後、Fernandez氏は配置した各パーツにアニメーションをつけていく。まず取りかかったのは長方形部分のアニメーションだ。右側から登場し、フェードインしながら出現するという流れで作成した。続いてテキストのアニメーション。テキストは左側から登場し、白色から黒色に変化しつつ白い長方形内に収まるという流れで作成した。これらのアニメーションは、いずれもマークを使ってキーフレームを決め、プロパティを変化させる方法で作成された。

最後にロゴを表示させるアニメーションだが、Fernandez氏は「本当はこういうことをしたら怒られますが」と前置きをしたあとで、回転しながら拡大して登場するAdobeのロゴを作り上げた。

ここまで完成させたところで、Fernandez氏は作成したアニメーションの仕上がりについて2つの改善点を指摘した。1つはロゴの登場タイミング、そしてもう1つはテキストが境界線まで来た時のモーションのずれだ。このような細かな編集もズームツールを使うことでピッタリと希望のタイミングに合わせることができた。

Fernandez氏は、完成したアニメーションを自信満々でマーケティングのPRの人に見せたとのことだが、結果は「全然良くない」と言われたそうである。アニメーションが直線的で有機的なものが足りないと。そこで、有機的な味付けとして蝶がひらひらと舞うアニメーションを追加したとのことで、その再現が行なわれた。

蝶が羽ばたく様子は幅の値を変えていることで実現し、アニメーションに関しては既に複雑な動きのものが用意されていた。
「この蝶はSVGでできています。まずは蝶をインポートしてプロジェクト内に読み込みます。続いて蝶のアニメーションを元のプロジェクトのタイムラインで選択、コピーを行い、バナー広告のプロジェクト上の蝶でペーストを行うだけで適用ができます」

これで無事バナー広告が完成した。基本的な手法さえ身につけてしまえば、使い方次第で様々なアニメーションを生み出せる点が印象的なデモだった。

既存のデザインにアニメーション

Adobe Edge Animateでは、既存のHTMLページにアニメーションを加えることも可能である。Fernandez氏が実演したのは、Smashing Magazineにあるテンプレートにアニメーションを簡単につけるというデモだった。

Smashing Magazineのテンプレート

まずは、ダウンロードしたHTMLファイルを解凍し、Adobe Edge Animateで開く。続いて、HTML内にあるパネル上のイメージを選択し、アニメーションさせてみせた。ここでは、イージングのバウンスというアニメーションエフェクトを利用し、跳ねるような動きを追加した。HTMLファイル上にある全てのDOMのエレメントを選んでアニメーションさせることができるとのことで、非常に応用性が高い機能と言えるだろう。

アニメーションの出力

出力されたアニメーションはモダンブラウザーなどでプラグインなしに閲覧することができる。会場では、Google Chromeで表示し、うまく動作していた。ただし、いくら表示に成功したとしても、元のHTMLがどうなってしまうかというのも重要な問題だ。Fernandez氏はこの点について、「Adobe Edge Animateは、HTMLのページの構造を変えないし、コンテンツも変えません。アニメーションの実行時にダイナミックに変えているだけです」と述べ、headタグ内で必要なjQueryやいくつかのJavaScript、CSSを読み込んでいるだけだというところを説明した。

アニメーション自体はJSONファイルで定義している。詳しい人間であれば、CMSから動的にJSONファイルの書き出すといった使い方も可能であるとのこと。

EdgeのIDアニメ

最後にFernandez氏以外のスタッフが、Adobe Edge Animateを使って作成した作品が紹介された。アドバイザリーボードではじめて使った人が作ったものは、「EDGE」の文字がなめらかに落ちてくるというもので、これを見た多くの人がFlashかと思ったという。

さらに高度に作りこんだ例も紹介された。同じく「EDGE」文字のモーショングラフィックスだが、生き物のように格文字が動き回る様子は感動ものだ。Fernandez氏はこれをiPadで表示させ、タブレット端末での閲覧が有効である様子を示した。

関連記事