Adobe Edgeを使ってみる


Adobe Edgeのプレビュー版がダウンロードできることを知り
おとしてみた。

いろんなとこで記事がでていて
http://www.itmedia.co.jp/news/articles/1108/01/news102.html
http://japan.cnet.com/news/service/35008500/
気にはなっていた製品なんだけど

どんなもんなんでしょ。

ダウンロードはこちらから
http://labs.adobe.com/technologies/edge/


インストして使ってみると、雰囲気AfterEfects。

図形や、テキストの
座標、スケール、透明度、回転など
おなじみのパラメータをキーフレームに
入力していけば
あとは、edgeが間を補間して
アニメーションができるというもの。

FlashかAfterEfectsを使ったことある人は
違和感なく使える感じ。


画面はこんなん。


どうです、映像系のアプリ触ったことある人はなじみある感じで
すぐにとっつけそうな感じでしょ。

実際、すぐにとっつけました。
ただ・・・・・ 
これはまだプレビュー版だからなのだと思うのですが
想像してたより、機能が少ない。
もう少し映像表現できるといいなあ。
マスクとか、全部とはいわんでもAfterEfectsのフィルターみたいなの。
ほんと、基本的なパラメータしかないからなー。

で、いいとこなんだけど
保存時出力されるのは、edgeのプロジェクトファイルと
html、css、js、イメージのフォルダ、jsのライブラリフォルダ(jqueryとか入ってる)等。
出力されるHTMLは

--------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title>Untitled</title>
<!--Adobe Edge Runtime-->
    <script type="text/javascript" charset="utf-8" src="test_edgePreload.js"></script>
<!--Adobe Edge Runtime End-->

</head>
<body style="margin:0;padding:0;">
<div id="stage" class="EDGE-2716842">
</div>
</body>
</html>


--------------------------------------------
というかんじで、body部はdivタグだけで
中身はすべてjsによるDOM操作に投げられてます。

そのjs内のアニメーションの情報は、json形式で保存されているので
その部分だけ、あとから修正して動的な動きに変更したりもできそうです。

で、実際テスト的に作ってみて動かしてみたところ
まー、ブラウザによって見え方ちゃうちゃう。
見え方ちゃうだけならまだしも、ちゃんと動いてなかったり。
そんなに複雑なもの作ってなくてこんな感じなので
まだAdobeさん、えんやこらがんばってるみたいね。

(ということで、テスト作品はアップしません。)


まあ、ざっと使った感じだと
僕は、FLASHにあまりなじめんかったんですが
こっちだと、違和感なくさわれました。
なんというか、AdobeAdobe感なUIなのです。(たぶんFLASHは、もとがマクロメディアだからちょっとAdobeでも異質なんかな?)

当然、クリックイベントなどにJsソースを書くこともできますので
アプリっぽいのも作れます。
この辺も、Flashより違和感なかったな。


とにかく、JSソース吐き出すということで、
FLASHよりいろいろと、連携の部分やらで
自由度や親和性が高いのかなと期待はしてまいます。

それに、今こんなんだすのって、
当然スマフォアプリも含めて考慮されてるのでしょうし。

製品版に期待!!

(現時点のバージョンでは、FLASHユーザーはよびこめんやろね。)