Adobe Edge Previewを使ってみて要点だけ

Adobe Labs で、AdobeのHTML5によるアニメーション制作ツールであるAdobe EDGEのプレビュー版が公開されました。AdobeそしてHTML5といえばiOSでのFlash騒動も記憶に新しいところ。一連のHTML5 vs Flash問題のAdobe側からの一つの回答ということで、さっそく使ってみました。

ちなみにAdobeから出ているサンプルファイルはこちら（Adobe Labs）。

まずはAdobe Labsのサイトにアクセス。ダウンロードにはAdobe IDが必要なようです。


ダウンロードできるのはdmg形式のディスクイメージ（OSXの場合）。インストーラが入ってます。


インストールを選択…といっても特になにもすること無し


インストール中…


インストールが終わると以下みたいな画面。「次の手順を実行してください」と言われても特に何も書いてない。


EDGEのアプリケーションアイコン。


起動直後の画面。Eclipseベース？と思うような操作感だけどどうなんでしょう。


とりあえず新規プロジェクトを作成。Flashでいうステージが現れた。


作れるオブジェクトはテキスト、四角、角丸だけみたい。妙に角丸の設定が細かい。画像は一般的なのは読めるみたいだけど今回試してません。塗り、枠線の色、幅、スタイル、回転など、一般的なプロパティだけ使える感じ。ワークスペースの下部がタイムラインで、とりあえず0秒地点にこんな風に置いてみた。


そして１秒地点に移動…（ワークスペース下部の赤い縦線に注目）


テキストを右に移動してみた。そうするとタイムライン上にキーフレームが打たれる。自動キーフレーム作成っていうチェックが入ってたからだけど、手動でキーフレーム打つやりかたはまだ見てない。


塗り、シアー、角丸半径なんかもアニメーション可能。


書き出しは…Flashみたいに「パブリッシュ」みたいのを探したんだけど無かった。単に書き出しファイルフォーマットにHTMLが選べる。


書き出されたファイルはこんな感じ。.edgeっていうプロジェクトファイルらしきものと、あとはHTML+JavaScript+CSSと、共通ライブラリ的なフォルダ。


sample.htmlをOSX Safariで開いてみたら動いた！まあこの時点で動かないと困るけど。


ここはスマートフォンのブログということを忘れてた！あわててiPhone 3GSでも開いてみたら、やっぱりきちんと表示された。速度も思ったよりはちゃんと出るみたい。

…と、Preview版なので機能的にはごく基本的なものしかないけど、非常に簡単にHTML5形式のアニメーションが作れるし動作もとりあえず問題なさそうなことが分かった。簡単なアニメーションバナーとかから、試しに使ってみてもいいんじゃないかしら。まだ書き出されたファイルの中身とかはたしかめられてないので、追って確認していきたい。