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


関連タグ HTML/CSS / JavaScript / Web技術 / Web標準 / Adobe / Adobe Flash



タグクラウド(β版)

クラウド / AWS / Azure / Google Cloud
コンテナ / Docker / Kubernetes
クラウドネイティブ / サーバレス
クラウド障害 / 運用・監視

プログラミング言語 / 開発ツール
JavaScript / Java / .NET / WebAssembly
HTML/CSS / Web標準
アジャイル開発 / スクラム / DevOps / CI/CD
ソフトウェアテスト・品質
ローコード/ノーコード開発

データベース / RDB / NoSQL / 機械学習・AI
Oracle Database / MySQL / PostgreSQL
Office / 業務アプリケーション

ネットワーク / HTTP / QUIC / セキュリティ
OS / Windows / Linux / VMware
ハードウェア / サーバ / ストレージ

業界動向 / 働き方 / 給与・年収
編集後記 / 殿堂入り / おもしろ

全てのタグを見る

Blogger in Chief

photo of jniino

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

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


最新記事10本