Adobe社のEdge Animateというツールを聞いたことはありますか？クリエイティブ クラウドのメンバー登録をしている人は、「聞いたことあるけど、何するツール？」という方もいるかと思います（私もそうでした…）。Edge AnimateはアニメーションやインタラクティブなコンテンツをFlash感覚で作成できるツールです。簡単な使い方を、サンプルも交えて紹介します！

↑私が10年以上利用している会計ソフト！

Adobe Edge Animateとは？

Flashで作っていたようなアニメーションを作成し、HTMLとJavaScriptで書きだすツール。タイムラインを使って直感的に動きのあるHTMLコンテンツを作成できます。Adobe クリエイティブクラウドにメンバー登録すると使えます。HTMLの基礎知識のあるユーザーが対象だと思うので、「簡単なページは作れるけど、もう少し動きがほしい…」という人に試してもらいたいツールです。

どんなことができるの？

Adobeサイトでいくつか実例が紹介されています。

こんなかっこいいバナーや、

インフォグラフィックスも作れちゃうようです。

HTMLで作ったページの要素にアニメーションをプラスするためのツールですね！それではさっそく簡単なアニメーションのあるコンテンツを作ってみましょう！

Edge Animateの画面

新規作成ボタンをクリックすると、デフォルトのワークスペースが表示されます。全体的にFlashを使った事がある人ならピンとくる画面ですね。

1. ステージ部分がHTMLページになります。ここに画像やテキストを配置してコンテンツを作っていきます。
2. プロパティパネルでステージや各要素のサイズや背景色などの細かい設定をしていきます。
3. エレメントパネルに要素が表示。
4. ライブラリパネルに使用している画像やシンボルが表示されます。
5. 下にあるのがタイムライン。「何秒のところに、どの要素が、どう変化するか」の時間軸です。

スタティックなバナーを作成

まずはテキストや画像など、必要な要素を配置して、アニメーションなしのバナーを作りましょう。ステージを新規作成し、プロパティで640×300サイズにします。

画像はメニューの ファイル＞読み込み から挿入できます。選択ツールで位置やサイズを調整しましょう。

テキストツールで文字を入力します。プロパティでサイズや色、フォントの指定ができます。フォント名のセレクトボックスの横にある「＋」をクリックすると、Webフォントの追加もできます！（英字のみ）

描画ツールで円や長方形を描画できます。色や線種の設定もプロパティから。ボタンの長方形とボタンテキストを選択し、右クリックから、または コマンド + G でグループ化しておきましょう。

とりあえずこんな感じの静止バナーが完成しました。

フェードインで表示

女の子の画像をフェードイン効果で徐々に表示させましょう。まずは選択ツールで画像をクリック。
プロパティパネルの不透明度のところにある小さな四角をクリックして、不透明度のキーフレームを追加します。その後不透明度を0に設定。

タイムラインで再生ヘッドを1秒までドラッグします。

そこで不透明度を100に戻します。するとタイムラインの画像＞不透明度のところに色がつきました！

スペースキーで動きを確認できます。ブラウザーで表示させる場合は、ファイル＞ブラウザーでプレビュー をクリック。

デモ

ここまでのデモです。うまくフェードインできましたか？
デモ1 フェードイン

画面外にある要素をスライドさせて表示

タイムラインで再生ヘッドは1秒のところにしたまま、見出しテキストをクリックし、ステージの外にドラッグします。

プロパティパネルで位置のキーフレームを追加し、

再生ヘッドを1.5秒まで移動。

そしてテキストをもともとあった場所まで戻します。スペースキーで確認すると、左から右にテキストが流れてくると思います。

同様にパラグラフとボタンもスライドさせましょう。パラグラフは1.5秒から2秒、ボタンは2秒から2.5秒で移動させます。

デモ

テキストやボタンが時間差をつけてスライドされました。
デモ2 スライド

イージング効果を追加

これだけではなんだかつまらないので、動きをかっこよくしちゃいましょう。タイムラインパネルでキーフレームのバーをクリックした後、イージングボタンをクリックします。今回はイーズアウトからBackを選びましたが、この効果はお好みのものでOK！

デモ

かっこいいアニメーションが追加されました！
デモ3 イージング

ボタンクリックでリンク

最後にボタンをクリックして別のページに移動できるようにしましょう。まずはタイムラインパネルのボタン要素に注目。左端に｛｝マークがあるのがわかります。このアイコンをクリックし、設定をしていきます。

今回はクリックイベントを追加するので、一番上のクリックを選択。

「URLを開く」を選び、リンクさせたいURLを入力します。

カーソルはデフォルトではリンク要素でも通常の矢印カーソルなので、プロパティで指のカーソルに変更しておきましょう。

ファイルの書き出し

これで完成！ファイル＞パブリッシュ でファイルを書き出します。「web」フォルダ内のファイル一式をアップロードすることになります。IEへの対応ですが、基本的にHTML5に対応しているIE9〜サポートとなっているようです。

IE8以下でも表示させるには

Google Chrome Frameの使用

Google Chrome Frameは、IE用の無料のプラグインで、IE8以下のユーザーが導入していると、Chromeと同じ動作にしてくれるものです。ファイル＞パブリッシュの設定で、すべてのチェックボックスにチェックしておけば、ユーザーがGoogle Chrome Frameを使用している場合うまく表示されます。

「下位ステージ」を用意しておく

対応していないブラウザー用の画面を作成できます。プロパティパネルの「下位ステージ」で「編集」をクリックし、非対応ブラウザー用のコンテンツを用意しておきます。デモでは静止コンテンツを表示しています。

デモ

デモ4 完成！

ひととおりの流れはこんな感じです。本当、Flashを使ったことある人なら、なんだか懐かしい気持ちになるようなFlash感ですね！今回紹介したように一から作成する他、既存のHTMLファイルを開いてアニメーションのみをEdge Animateで追加することもできます。基本的な使い方のみ紹介しましたが、使い込めば複雑な動作も簡単に実装できそうです。公式チュートリアルページも参考にしてみてください。

このようにAdobe製品といってもPhotoshopやIllustratorといったメジャー製品だけでなく、新しい技術を盛り込んだ製品も次々とデビューしています。Adobe クリエイティブクラウドなら月々5000円（学生さんは4000円）でAdobeシリーズが思い切り楽しめます！なんだかステマっぽいですけどw、おすすめですよー！30日間は無料メンバーとして使用できるようなので、まずはお試しください ;)