◇Adobe Edge Animate って何？
「HTML５アニメーション・オーサリングツール」
この言葉から分かる通り、HTML5のソースです。
ただ、画面はFlashなどのアニメーションツールに似てます。
上の画面からキーフレームやJS、CSSフィルターを付けたりと色々遊べます。
JSが苦手な人にも有り難いことに、スニペットからワンタッチで入れることも出来ます。
名前を付けて保存をすると色々なファイルが出力されます。
画像では「onmouse」と名前を付けました。
パブリッシュ「ファイル＞パブリッシュ」すると、更にこんな感じのファイルが出来ます。
publish > web > 色々
内部編集も外部編集もどちらも可能です。
既存サイトにモーションを追加することもアニメーション画像を追加することも出来ます。
シーン制御やギミックをつけることが出来、マウスの動きやmouseoverなどのイベントに応じてコンテンツが変化します。
※Flashの「ような」動きを一から作ることが出来ますがFlash(.swf)を「変換」することは出来ません。
変換ですと、Flash Professional CS6の拡張機能Adobe Falsh Professional Toolkit for CreateJSがあるようです。
どちらが良いというわけではなく、自分に向いている方をチョイスするのが良さそうです。
◇スマートフォンでも見れるの？
iPhoneや最近のAndroidはFlash非対応ですが、Edge Animateはソースファイルとなるので問題ありません。
以下、公式サイトでも明確に書かれています。
WebKitをベースにした環境でデザインするため、開発したコンテンツを最新ブラウザや各種モバイルデバイスで確実に表示できます。
(引用:Webデザインツール＆サービス | HTML, CSS, JavaScriptなど | Adobe Edge)
そう。確実なんです！！
スマートフォンでも表示出来るなんて嬉しいです。
◇IE8以下のことを考えると使えないのでは？
HTML5と聞くと、
「対応していないブラウザがあるから使えないのでは？」
そう思う方も少なくないかと思いますが、
なんと！
IE8以下（下位ブラウザ）もサポートされています！
２つ方法があります。
方法１：Internet Explorer 向けの Google Chrome Frame 拡張機能を使用
Google Chrome Frameへ誘導することでIE6・IE7・IE8のレンダリングをGoogle Chromeと同じにし、
表示させることが出来ます。
方法２：動かない画像（ポスターイメージ）を表示し、コンテンツを見せる。
任意に指定することが出来ます。
※どんなブラウザでも真っ白な画面が表示されるなんてことは起きません。
◇Flashとの違い
大きな相違点として、Edge Animateはカーブに弱いこと。
あとは、Flashよりもまだ機能が少ないようです。
（当方Flashの機能についてあまり得意ではありません。）
改名前の「Edge」を試してみて、出来そうなことが機能としてなくて満足できなかったあの日から1~2年。
こんなにも素晴らしいものがリリースされるとは思っていなくて驚きました。
この劇的改善からも今後のアップデートに期待出来ます！
◇無料です。（2013年3月現時点では）
Adobe Edge AnimateはAdobe Creative Cloudに登録すると使えるツールです。
無償メンバーシップでもフルで機能が使えます。
他のEdgeシリーズの無料/有料のご確認はこちらから
◇どんな作品を作れるの？
サンプルを見た方が言葉で説明するよるも早いですね。
色々紹介します。
★Edge Animate サンプルショーケース（Demo）
URL先では以下４つのサンプルが紹介されています。
ゲームです！始め気づかなくて０点でしたXD
こんなことも出来るのかと創作意欲が上がります。
シンプルな動きですぐに真似して使えそうで参考になります♪
動きが滑らかで惚れ惚れします。
以下からファイルをDL出来ます。どのように作成しているのか参考になりますね！
★Edge Animateサンプルショーケース
他にはこちらもあります。
★忍者
さらに、おすすめサイトとして、
★Edge Animateで作るHTMLモーショングラフィック
ここでモーショングラフィック作成方法が分かりやすく紹介されており、
サンプルをダウンロードすることも出来ます。
◇楽々使用！Webフォント
※Adobe Edge Codeに統合されているため、Edge Animate内から直接呼び出し組み込むことが出来ます。
お手軽です〜
ただし、β版は今のバージョンほど簡単には組み込めません。
やり方はありますが、新しい方を入れ直した方が他のことも考えると楽で時間短縮でその分得です。
β版をアンインストールの後に新しい方をインストールして下さい。
Adobe Application Managerからもアンインストールするよう説明文が表示されます。
このEdge Web Fontsの凄いところは、組み込みやすさだけでなく、
・代替フォントを指定出来るところ
・500以上ものフォントの多さ
・商用利用可能で無料
ですです。
◇ソース、汚くなるんじゃないの？
DOMの操作で作り上げていくもので、classが追加され、数行ごそっと入ります。
◇どうやって勉強しよう？
新しいもののネックなところは、昔からあるものに比べて学習材料が少ないところですよね。
Edge AnimateはFlashやAfter Effectsの操作に似ていますが、それらアニメーションツールを扱ったことの無い人には少しばかり難しいかもしれません。
上で挙げたサンプルでも勉強出来ますが、、、
土台からしっかり学びたい時には勉強しづらいかもしれません。
そういう私もアニメーションツール系は初心者で、Edge Animateのピン操作は手探りで四苦八苦でした。
そんな私のような初心者でも、一通りの使い方を学べるのはEdge Animateを起動した後に出てくるこの画面
（普通の紹介ですみません。）
他に学習出来るサイトですとやはりAdobeさんのサイトが豊富です。
★Adobe TV
英語ですが、見てるだけで学べます。
特にアインシュタインのビデオは可変に出来たり画像が変わったり・・・
面白かったです♪（Adobe Edge Animate: Creating and Importing）
可変についてはこちらの記事でも分かりやすく説明されています。
アインシュタインのビデオにはない、コンテンツ幅に応じて表示を変える方法も紹介されています。
難易度高そうですがやってみたいです！
あとは、FAQページがEdge Animateについて分かりやすく説明されています。
★FAQ
ちなみに、余談ですが・・・
みま＆たまで主催しているハンズオン式勉強会の次題として、この「Edge Animate」を取り上げることが決まりました★
日時と場所はまだ未定ですが、や・・・やるんだからね！！
このブログでもAdobe Edge Animateのダウンロード方法について説明し、
機能や操作方法に焦点を当てて取り上げたいと考えています。
ただ、私の傾向として半年放置することが容易に考えられるので、
続きを読みたいと思って頂ければ「いいね！」など押して頂けますと、やる気に繋がり頑張れます ;D