FlashのようにHTML5アニメーションを作れる、アドビが開発中の「Edge」とは?

2010年11月2日

アドビシステムズが先週行ったイベント「Adobe MAX」で、開発中のHTML5アニメーションツール「Edge」について明らかにしました。そしてAdobe TVの「EPISODE:Preview of the Edge Prototype tool for HTML5」では、動画でより詳しくEdgeの機能について解説しています。

そこで見えてきたのは、EdgeとはFlashでタイムラインを設定するように手軽かつ本格的にHTML5のアニメーションを作るツールになるだろう、というものです。公開された動画からその機能を見ていきましょう。

レイヤごとにプロパティの設定が可能

これがEdgeの画面。上部がオブジェクトの操作ペインであり、WebKitによるプレビューも表示されます。下部にタイムラインが表示されています。画面右上にはレイヤ、右下にプロパティがあります。

fig

これがタイムラインの部分。Actorsごとに表示とアニメーションのタイミングを決定できます。この画面ではbookTitle、bookImage、saladImage、navBarの4つのActorがあるのが分かります。

fig

左がレイヤ画面。レイヤはDivタグごとに設定され、重ねて表示されるようです。そして右がレイヤごとに設定できるプロパティ。透明度、バックグランドカラー、文字、開始時の位置と終了時の位置、回転角度、拡大縮小、3D表示によるパースの大きさなど、さまざまな属性をレイヤごとに設定できると説明されています。

fig

動画からタイムラインとプレビューが連動しているところを1秒ごと4コマのアニメーションGIFにしました。アニメーションとタイムラインが同期していることが分かると思います(実際にはもっとスムーズに動いているので、ぜひ記事末の動画を見てください)。

fig

まるでFlashでタイムラインを使うようにHTML5でアニメーションが作成できるツールのようです。

使っている技術はHTML5、CSS3、jQueryか

Adobe MAXでの説明やこの動画の説明などから想像すると、EdgeはHTML5(おそらくCanvasタグ)とCSS3、JavaScriptのjQueryなどを駆使してアニメーション機能を実現していると推測されます。

いままでこのようなノンプログラミングかつ直感的にアニメーションを作成するツールはありませんでした。Edgeが製品としていつどのように提供されるかはまったく明らかではありませんが、非常に楽しみなツールだといえます。

このエントリーをはてなブックマークに追加
follow us in feedly

カテゴリ Web技術 / JavaScript
タグ  Adobe , CSS , Flash , HTML5 , JavaScript , Web標準


次の記事
2013年までにクラウドのリーダーはマイクロソフトとVMwareになる、とガートナー

前の記事
HTML5への傾倒が進むアドビ


カテゴリ



Blogger in Chief

photo of jniino Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed



新着記事 10本


PR - Books


fig

fig

fig