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が製品としていつどのように提供されるかはまったく明らかではありませんが、非常に楽しみなツールだといえます。

あわせて読みたい

HTML/CSS JavaScript Web技術 Web標準 Adobe Adobe Flash




タグクラウド

クラウド
AWS / Azure / Google Cloud
クラウドネイティブ / サーバレス
クラウドのシェア / クラウドの障害

コンテナ型仮想化

プログラミング言語
JavaScript / Java / .NET
WebAssembly / Web標準
開発ツール / テスト・品質

アジャイル開発 / スクラム / DevOps

データベース / 機械学習・AI
RDB / NoSQL

ネットワーク / セキュリティ
HTTP / QUIC

OS / Windows / Linux / 仮想化
サーバ / ストレージ / ハードウェア

ITエンジニアの給与・年収 / 働き方

殿堂入り / おもしろ / 編集後記

全てのタグを見る

Blogger in Chief

photo of jniino

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

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

最新記事10本