Adobe Edge Animateを使ってみました。


Adobe Edge Animateで、HTML5スライドショーを作成してみました。
スライドショーなどの簡単なものであれば、Flashで培った技術が生かせそうな予感がします。

　

スライドショーの仕様

　・約2～3秒で写真自動切り替え

　・画面左右端クリックで写真送り＆写真送り方向の変更

　・下部の名前クリックで写真ページヘ遷移。
　　※写真はFlickerのCreative Commonsのものをお借りしております。
　

Edge Animate 使ってみた感想

　・symbolにくるむことで、Flashのムービークリップ的な操作ができるので
　　Flashに親しんだ人ならとっつきやすい。

　・レイヤーに一つしかオブジェクトは配置できないので、レイヤ構造がすごく縦に長くなりがち

　・Flashと違い、フレームレートの設定はなくタイムラインはミリ秒で操作でき
　　慣れるとわりと楽だと思った。

　・インタラクティブ要素の少ないアニメなら
　　Flashで制作するのと同じくらいの労力で作成できそう。
　　しかし、ベクターデータをEdge Animate内で扱えないようで、
　　グラフィカルな表現はなかなか難儀しそう。

　・深度管理ができないので、重なり順を操りたい時は、創意工夫が必要。

　・iOS、android OS、windows PC、Macなどほとんどの端末のブラウザで問題なく動作した。
　　クロスブラウザ対策が素晴らしいと思った。

　

Edge Animate 改善して欲しいところ

　・ブラウザプレビューすると、コードのundoが効かなくなる（時がある？？？）
　　ちょっと試してから立ち戻る際にやや不便

　・コード内検索できないので、作成中の確認がしづらい、人の作ったものを読み解きにくい

　・マスクは使えないので　cssとかjsでカバーするか、画像を切り抜くか
　　上から覆うもので対処するしかなさそう、、、

　・虫眼鏡ツールがなくて、やきもきする。数値入力はできるけど、、、
　　　※FlashとかPhotoShopにあるスペースキーのショートカットがほしい
　　　※スペースキーに再生が割り当てられているので、工夫して便利にしてほしいな
　

Edge Animate 今後試してみたいこと

　・単純なゲームなど制作。

　・切り抜きツールを利用すればスプライトシート的な扱いができるらしい、今後試したい。

　・xmlやAPI連携などの、調査。

　

参考リンク

　・渋日記@shibu.jp/Adobe Edge Animate 1.0を試してみた
　・Edge Animateで作るHTMLモーショングラフィック
　・Adobe Edge Animateを触ってみよう！
　・あゆたジャーナル/Adobe Edge AnimateのSymbolを使ってみる
　・インタラクティブなWebサイト制作を加速させるEdge Animateの使い方

Related Posts