次世代 Web ツール 『Adobe Edge プレビュー版』を使ってみました

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

Adobe Edge プレビュー版が公開されました. Adobe Edge とは HTML5, JavaScript, CSS3 といったWeb標準を使用したウェブサイトを作るための インタラクションデザインツールです.(おそらく)

使ってみての感想や導入, 制作までの流れをまとめました.

Adobe Edge プレビュー版について

使って遊んでみたので, 現状把握していることをメモ

  • インターフェースは Flash や After Effects ライク
  • タイムラインは見た目も操作もほとんど After Effects と同じ. コピペは現状非対応
  • 出力される HTMLを直で編集して要素を追加しても, ツール上でちゃんと反映してくれる.
  • CSS3 と jQuery を使ってアニメーションさせてるっぽい
  • 再生開始命令は, JavaScript:$.Edge.play();
  • 生成できるのは四角形, 角丸四角形, テキスト.次のバージョン以降増えてくると思う.
  • 親子関係は付けられない.デフォルトでstageの子供に.次のバージョンからは付けられるようになるっぽい

導入の流れ

ダウンロード

「Adobe Edge Preview 1」 のインストーラを
http://labs.adobe.com/technologies/edge/
でダウンロードしてください.(英語版のみです) Adobe ID が必要なので登録していない方は登録してからこのページにアクセスしてください.

インストール

インストーラを起動してください. 全てデフォルトで良いと思います.

起動

Adobe Edge を起動すると下記の画面が表示されます.

サンプル

公式サイトに実際に Adobe Edge で制作したサンプルがあります.(こちら)

また, 私もサンプルを作ってみたので下にリンクおいておきます. 良かったら見てください.

使ってみての感想は, プロパティの設定欄は CSS3 のプロパティと直結しているので, CSS3 を使った経験のある方は使いやすそうな感じでした. また上記でも述べたようにモーション付けは After Effects とほとんど同じなので, After Effects を使った経験のある方も導入は楽かと思います.

まとめとしては期待は大大大!! ただプレビュー版ということもあり, 未知数な部分がまだまだ多いです. ですが, 少なくとも Flash や After Effects で可能だったことはサポートされていくと思うのでかなり需要の高いツールになっていくかと思います. これでますます Flash 離れが加速しそうな予感(^^)

今後, 加速度的に HTML5 や CSS3, JavaScript は普及していくのでこういったツールは学んでいて損はないかと思います. 次回は Adobe Edge を使ってちょっとしたサンプルを作ってみようと思います.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT