2012年01月18日

Adobe Edge Preview 3 (アドビ エッジプレビュー3)をちょっとだけ使ってみた。

前から使ってみたかったけど、なかなかタイミングがなくて使えなかった、
Adobe Edge Preview 3(アドビ エッジプレビュー3)を使ってみました。

何ができるソフト?


HTML5、JavaScript、CSS3などのWeb標準技術を使って、Flashアニメのようなアニメーションコンテンツが作れてしまうソフトです。オーサリングは、Web技術を知らなくても簡単に作ることができます。

起動してみましょう


Adobe LabsからAdobe Edge Preview 3.1をダウンロードしてインストール。

こちらが起動画面。

ad01.JPG

After Effectsっぽい感じの画面です。

なにか書いてみる


「CreateNew」で、ステージを用意します。

ad02.JPG

左上にツールがあるのでそれを使う見たいですが、ツールってこれだけ?
というぐらい少ないです。「選択」「四角」「角丸四角」「テキスト」の中から選びます。
たぶん、プレビュー版だから少ないんだと思います。

ad03.JPG

とりあえず、「角丸四角形」を選択してステージにドラッグ。
あとは、左にあるCSSの設定がいろいろいじれそうなパネルで色や形を変えます。
形状変化の設定も、数値指定やドラッグをするだけでかなり簡単に作れます。

ad04.JPG

アニメーションを作る


アニメーションは画面下のタイムラインを使います。

ad04_5.jpg

マーカーを0:01にドラッグします。
これで1秒の設定です。

ad05.JPG

そのあと、図形の色を変えます。

ad06.JPG

これだけで、徐々に色が変わるアニメーションの完成。
左のパネルを使えば、透明度や角度の変更も簡単にできます。

1秒を設定した場所で、図形をドラッグして位置を変えれば、移動のアニメーションもできます。

ad09.JPG

作成後、ファイルを保存します。

書き出されたファイル。

ad10.JPG

完成ファイル


できあがったファイルです。

図形が動くアニメ

IE9、Firefox9、chromeでしっかり動作確認できました。

感想


かなり直感的で使いやすいです。
Flashユーザーの方ならすんなりとこの製品を覚えられるのではないでしょうか。
他にもJavascriptが簡単に追加できる機能もあるようです。
いろいろ使えそうなのでもうちょっと触ってみたいと思います。
posted by エンディー at 13:52
デベロッパー | コメント(0) | トラックバック(1)
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

桴瑰㨯⽷睷⹶慬牡猭灬慧攮湥琯獵灲敭攭慮瑬敲
Excerpt: 洭卣桯潬 彵彏‭ 娀轗彵彁hrF_娀䄀彟䌀
Weblog: 桴瑰㨯⽷睷⹶慬牡猭灬慧攮湥琯獵灲敭攭慮瑬敲
Tracked: 2016-12-01 10:50