Home > スポンサー広告 > HTML5なアニメーションを作れるアプリ「Edge animate」と、「hype 3」

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

2015-03-26 Thu 08:28:59

このコメントは管理者の承認待ちです

2015-03-26 Thu 10:09:15

このコメントは管理者の承認待ちです

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: -

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/137-f302f410
Listed below are links to weblogs that reference
スポンサーサイト from バニデザノート

Home > スポンサー広告 > HTML5なアニメーションを作れるアプリ「Edge animate」と、「hype 3」

Home > ユーティリティ > HTML5なアニメーションを作れるアプリ「Edge animate」と、「hype 3」

HTML5なアニメーションを作れるアプリ「Edge animate」と、「hype 3」

top_201503252007154f0.jpg

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

何をするアプリ?

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

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

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

基本の操作はほぼ同じ

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


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

Tumult Hype 3

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

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

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

特徴

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

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

サンプルを作ってみました

サンプルはこちら。

所感

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

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

Adobe Edge Animate CC (2014)

先に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を読み込んでのアニメーション作成の2つの方法がある

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

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

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

サンプル

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

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

所感

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


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

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

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

ご参考にどうぞ。
関連記事

Comments: 2

2015-03-26 Thu 08:28:59

このコメントは管理者の承認待ちです

2015-03-26 Thu 10:09:15

このコメントは管理者の承認待ちです

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/137-f302f410
Listed below are links to weblogs that reference
HTML5なアニメーションを作れるアプリ「Edge animate」と、「hype 3」 from バニデザノート

Home > ユーティリティ > HTML5なアニメーションを作れるアプリ「Edge animate」と、「hype 3」

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。