Web システムのツボ

Adobe Edge のプレビュー版 を使ってみました

edge_title.jpg FlashからJavaScriptへ移行する動きが盛んになってきています。
そんな中2011年08月01日、AdobeからHTML5 デザインツール Adobe Edge の
プレビュー版が公開されました。

今回インストールする環境はWindowsです。
インストールするには、Windows Vista以上が最低限必要になります。
僕自身Flash案件を担当することが多かったのですが、
Adobe Edgeを使用してどのようなものが作れるのかを試してみました。

ダウンロード

Adobe Edge Preview版
※Adobe Edge Preview版をダウンロードするには、アカウント登録をする必要があります。

サンプル

まず始めに、「Adobe Labs」にサンプルがありますので、どのようなものが出来るかご覧ください。

1.Getting Jumpy
20110821_sample1.jpg

2.Sunshine and Sailing
20110821_sample2.jpg

3.Ferris Wheel and Roller Coaster
20110821_sample3.jpg

4.Solar System
20110821_sample4.jpg

5.Planet Earth
20110821_sample5.jpg

6.Time Clock
20110821_sample6.jpg

どれもパッと見た限りではFlashかJavascriptか見分けがつかない程の出来栄えです。
サンプル版とソースは下記からダウンロードできます。
Adobe Edge Preview Sample Files


Adobe Edge を使ってみた

早速プレビュー版をダウンロードして簡単なものを作ってみました。
今回作るものは、よくあるサイトトップの画像が切り替わるフラッシュと同じものです。

1.起動画面
起動するとこのような画面が立ち上がります。
edge_sample1.jpg

2.新しくプロジェクトを作成します
普段FlashはFlash CS4で制作を行っていますが、各操作方法は違和感なく使うことが出来ました。
現在はプレビュー版なので触れるプロパティに限りがありますが、それでも十分いいものが作れそうです。

・プロパティ
edge_sample3.jpg

・エレメント
edge_sample4.jpg

・タイムライン
edge_sample5.jpg


3.画像追加
今回は画像を切り替えるものを作るので、 [File]=>[Import]から画像をステージに追加します。
edge_sample6.jpg

4.イベント追加
一通り画像を配置し終わると、プロパティとタイムラインを操作してイベントを追加していきます。
イージングも一通り用意されており、細かく設定することが出来ます。
edge_sample7.jpg


5.完成

デモを見てみる
edge_201108221427.jpg

Flashを作るような感覚で、すごく楽に作ることが出来ました。
書き出したJSファイルも割りと整理されている印象を受けました。
これらのファイルを直接編集することも十分出来そうです。
Adobe Edgeの今後の動向に注目です。

ちなみに、HTML5なのでIEをどうするかは悩みどころですね。

(tsubasa)

Webシステムのツボとは

オープンソースの紹介や、プログラミング講座、フリーソフトのレビューなど、Webエンジニアが送る、つれづれ日記。
【隔週金曜日更新】

運営会社:株式会社ジーピーオンライン

RSSを購読する

Monthly Archive