はいどうも～。
今月から「プロフェッショナル」というよくわからない職種を与えられたエンジニアの吉田です。

2011年7月31日に「Adobe Edge」のプレビューが公開されました！

「Adobe Edge」とは、一言で説明すると、Webサイトのモーションや
インタラクションをGUIでオーサリングできるツールです。

ここ最近は、HTML5、CSS3、JavaScriptなどのWeb標準技術を使って
インタラクティブな動きを表現するサイトを見かけるようになりました。

しかし、HTML5やらCSS3やらJavaScriptやらでアニメーションを作るとなると
まだまだプログラマがコードを書かなければならない状況ではないでしょうか。

しかし、Adobe Edgeを使えばそんなお悩みも解決できるかもしれません！

Adobe Edgeではタイムラインにキーフレームをポチポチ打ってアニメーションを
創っていくことが可能です。

この操作感はFlashやAfter EffectsやPremiereのタイムラインを触るような感覚です。


そんなわけで、今回はEdgeを使って簡単なテキストモーションを作ってみます！

 

インストール

「Adobe Edge」は以下のサイトからダウンロード可能です（Adobe IDが必要です）。
http://labs.adobe.com/technologies/edge/

ダウンロードしたzipファイルにはインストーラが入っているので
それに従ってインストールします。

実践

では、さっそく始めてみましょう！


1. Edgeを起動
Edgeを起動すると以下のような画面が表示されます。

 

動画によるEdgeの紹介もあるので、最初はこちらをみるとイメージが掴めると思います。
http://www.adobe.com/go/gettingstartededge


2. 新規作成
「File」＞「New」で新規Edgeプロジェクトが作成されます。
初期表示は、"ステージ"となる要素（白い四角形）が表示されています。

 

3. 背景色を変えてみる
ステージが選択されたこの状態では、左側のPropertiesパネルで、縦幅や横幅、背景色が変更できます。

ちなみに、下部にあるTimelineパネルの「Auto-Keyframe Properties」ボタンがONの状態で
プロパティを変更した場合は、自動的にキーフレームが作成されます。
アニメーションさせる必要のないプロパティ変更は、「Auto-Keyframe Properties」をOFFにした
状態で値を変えた方がタイムラインが汚れなくて良いでしょう。
もちろん、キーフレームはあとからでも消せるのでONの状態でも問題ありません。


4. テキストを入力してみる
次に、テキストを入力してみます。
ツールバーから「Text Tools」を選択します。

メインパネルを矩形にドラッグし、テキストを入力します。
今回はとりあえず「Hello World」と入力してみました。
 

右上のElementsパネルには、DOMの構造が表示されていて、
Photoshopなどでレイヤーを扱うかのように表示を切り替えることができます。


5. アニメーションをつけてみる(その1)
まず、タイムライン上でスライダーを0:00の軸に移動します。
ここでは、先ほどのテキストのopacityをゼロにして、サイズを500%くらいにしてみます。
 

 

6. アニメーションをつけてみる(その2)
次にタイムラインから0:01にスライダーを移動し、
先ほどのテキストのopacityを100%、サイズを50%くらいにしてみます。
 

すると、こんな感じのアニメーションが出来ました！

※playボタンで再生

7. アニメーションをつけてみる(その3)
さらに、いろいろとアニメーションをくっつけてみます。
 

こんな感じのテキストのモーションが簡単に作れました！

※playボタンで再生


 

まとめ

まだプレビュー版なので機能的には少ないのかもしれませんが、
簡単なアニメーションであればこれだけでオーサリングできそうです。

「ぼかし」や「グラデーション」などはまだ操作できないようですが、
ゆくゆく機能が充実して行けば豊かな表現ができそうですね！


デワデワ。