いわゆる「flashライク」といわれるインターフェイスで、html5なアニメーションを作れるアプリを試して比較してみました。

「Edge animate」「hype 3」ともに、アニメーションを作れるアプリです。
写真をスライドさせたり、ボタンを置いたり、頑張ればゲームも作れます。
読み込む情報にもよると思いますが、出来上がったものはflashよりは軽い印象。
バナー広告や、ネット上のプレゼンテーション、アイキャッチなどに利用します。

スマホ用のビューも作れますし、レスポンシブにもでき
スマホやタブレットでも再生＆利用できるのが特徴でしょうかー。

PC上ではIE8＋他モダンブラウザで再生対応しています。
（古すぎるパソコンだと再生できないかもですね。）


１）画像データをドラッグ＆ドロップして配置
２）「録画」ボタンを押して、キーフレームを置きたいタイミングを選択→位置などを指定
３）イージングやアニメーション動作、透明度などを調整
４）全体タイムラインを調整

みたいな感じです。細かなところはjsで制御するみたいです。
出来上がったあとは、既存のHTMLに該当コードを読み込んでおしまい。
ベースはhtml5なので、CSS3+ウェブフォントでやるのがスマートっぽいです。


とにかくプレゼンテーションが上手。説明ビデオも英語だけどなんとなくわかるくらいわかりやすい。UIがシンプルにまとめられていて、すごくサクサクうごいて好きな感じでした。

Tumult Hype 3（公式サイト）
価格：通常版が ¥5000、プロフェッショナル版はapp内課金でさらに＋¥5000。
公式ページに試用版があるので、まずは試すこともできます。

→app storeからの購入はこちら。


・キーフレームベースのアニメーション
・アニメーションの動きなどをペジェ曲線で視覚的に操作
・複数のシーン接続が簡単そう
・webkitベース、retinaなmacでも綺麗なUI
・retina画像も自動書き出し
・iOS系スワイプやタッチなどのアクションもできるらしい
・レスポンシブ対応　※ブレークポイントベース

まだまだ機能はたくさんあるので、詳しくは、こちらを御覧ください。


サンプルはこちら。


最初のチュートリアルを見たら、基本的な操作はほとんど困りませんでした。
背景をちょっとフェードインさせたり
文字を動かして注目させたり、
背景に動画を入れたり
そういったちょっとしたシーンですばやく作るのに便利そうでした。

アニメーションの動きがペジェで出るのが素敵です。flashでは頭でイメージしながらやらなくてはいけなかったところが、すごくスッキリしている感じでした。


先にhypeを試用したので、体感もっさりしてました。Edgeシリーズはずっと研究版みたいな印象があるのでしょうがないのかもです。
UIはAdobe Premire＋flashみたいな感じ。タイムラインの操作がプレミアっぽくて、アクションの設定がflash。
最初からウェブフォントのtypekitがセットされてるので、初期フォントには困らないかも。

＊ちなみにhypeの初期フォントはiOS準拠もしくはウェブセーフフォントのセットが入っていて、google web fontなどをあとから設定できます。

Adobe Edge Animate CC（公式サイト）
価格はAdobe creative cloudのサブスクリプションに準拠。（¥2,180/月〜）
無料のcreative cloudアカウント作成で30日間試用可能。


・新規プロジェクトでアニメーションを作成する方法と、
　既存htmlを読み込んでのアニメーション作成の２つの方法がある

・レスポンシブもdiv幅100%表示でキーオブジェクトを移動させないhtmlっぽい方法と
　画像のように扱って拡大縮小してしまう簡易の方法が選べる

・きっとflashをがっつりやってたひとはこっちに行くような気がする

・SVGとか読み込んで重くなっても大丈夫、プリロードアニメーションも簡単に設置。


サンプルを作ってみました。
こちらは、レスポンシブで。div幅100%なほうにしてみました。
ボタンを中央に寄せるのに手間取りました・・。

今プレビューしてみたら、こっちのほうが重いかもですね。


アニメーションプレビューがカクカクで残念。（わたしのMacのスペックが低いのかもですが。）
そして、adobe製品全般に言えるなんともいえないストレスを感じました。
しかしながら、とにかくコツコツ時間をかけてつくればすごいものができそうだし
flashに比べたらずっと直感的になっていると思います。
いっぱい設定してたらいろんな動きができました。のめり込むタイプにおすすめかもしれません。


レスポンシブ対応といっても、いろんなレスポンシブの仕方があるので
そのあたりで使い分ければいいかなと思いました。
個人的にはhype3のプロフェッショナル版がかわいいなっておもってます。

縦横固定なら、どちらでも簡単なものなら操作はほぼ一緒かなと。

ネットでも今後さらにプレゼンテーション能力が試されそうですね。

ご参考にどうぞ。

関連記事

• HTML5なアニメーションを作れるアプリ「Edge animate」と、「hype 3」
• HTMLでモックを組み立てるときに便利なウェブサービス＋α
• 私なりのPC作業中の椅子の座り方を考えてみた。
• HTMLコーディング時のCSS調整はSafariやChormeの「要素の検証」が便利。
• photoshopでオブジェクトや空間の横幅や高さをささっと確認する方法