「ADC MEETUP Night – Web制作者のためのアプリ開発ワークフロー」で行った「Edge Animate」セッションのプレゼンテーション資料です。

1. ADC MEETUP Night
Web 制作者のためのアプリ開発ワークフロー
‒ SESSION 4 ‒
スマホアプリのインタラクティブコンテンツ

2. 渡辺知規 （ワタナベ トモノリ）
・WEB デザイナー＆WEB プログラマー
・株式会社スパイラルエッジ 代表取締役
池袋の小さな WEB 制作会社で、
日々、WEB を中心としたクリエイティブワークに従事

3. Adobe Edge Animate CC
に加えて、
Adobe Edge Inspect CC

4. 押井守監督による
iPad 向けコミックアニメーション作品
「ちまみれマイ・ラブ」で、Edge Animate を
利用したアニメーション制作を担当。
インタビュー記事：
http://gallery.adobe-web.jp/web/chimamiremylove/
ADC ONAIR 出演：
http://onair.adobe-adc.jp/130319/

5. ・Adobe Creative Cloud からダウンロードして利用できる
・HTML5＆CSS3 で、直感的にアニメーションやゲームを作れる
・Flash Professional と非常によく似た概念とインターフェース
・JavaScript を利用することで、
ツール単体では達成できない内容も実装可

6. Adobe Edge Animate CC を利用した
ワークフローと機能説明

8. 外部から取り込んだ素材リスト
それぞれの「+」ボタンを押すと、
エクスプローラーが起動する。

9. ライブラリからステージ上に設置した要素が
こちらに表示される。
表示上の並び順（表示階層）なども、
ドラッグ＆ドロップで設定可能。

10. ライブラリから、素材をここに
ドラッグ＆ドロップすることで、
ステージに設置できる。
キャプチャ
素材の位置や大きさなど、
このステージの中で、
見たまま直感的に操作可能。

11. タイムラインアニメーションを作成していく為の、メインウィンドウ。
ステージ上にある素材（要素）が縦に表示され、横軸で、時間が展開する。
その他、タイムラインや要素毎に、
クリックなどのイベントを登録して、アクションを登録できる。
（※Adobe Edge Animate CC JavaScript API）

12. ステージ上にある要素の位置や大きさ、
透明度など設定できる。
ステージ上での編集と異なり、
数値で設定できる為、かなり細かな調整が可能。

13. 各種ツール群
単純な図形要素やテキストの設置などは、
ここから選択して、ステージに設置する。

14. ベジェ曲線で、なめらかな曲線アニメーションを作成することが可能。

15. Adobe Edge Animate CC でも
JavaScript でアニメーションの
作成や制御を行うことが可能！
また、スニペットパネルが
準備されている

16. Adobe Edge Animate CC の独自の機能にアクセスする為の
JavaScript ベースの API
一例
sym.play(); // タイムライン再生
sym.stop(); // タイムライン停止
マニュアル：
http://www.adobe.com/devnet-docs/ja_JP/
edgeanimate/api/current/index.html

17. Edge Animate は、HTML5 ファイルで生成される為、
JavaScript でかなりの拡張が可能。
・音を鳴らす
・ランダムに動かす
・条件分岐させる etc...
しかも、jQuery API も使えるので、
show() や hide() といったお馴染みの関数も利用可！

18. モバイルデバイス向けの製作 TIPS

19. - フィルター
： 現状、Android ブラウザーに未対応。
FireFox・IE も同様）
（
- 素材サイズ
： 1024×1024 以上のサイズは、モバイル上で
意図しない動作となる可能性あり。
→Adobe Edge Animate CC 上でサイズを
調整すれば解消できる。
（Retina ディスプレイ対応時など）

20. Adobe Edge Inspect CC で
簡単に端末上でプレビューしながら開発しよう！

21. 必要なものは・ ・
・
・PC 用 Adobe Edge Inspect CC
・Google Chrome 用の Adobe Edge Inspect CC
拡張機能
・モバイルデバイス用 Adobe Edge Inspect CC アプリ

22. ①Adobe Edge Inspect CC を有効化
②Adobe Edge Animate CC でコンテンツを製作
③Adobe Edge Animate CC のプレビュー機能で都度デバイス上で確認できる
PC 画 面
スマートフォンやタブレット端末で確認

23. パブリッシュ

24. WEB
最適化された HTML で出力
Animate デプロイメントパッケージ
「oam」形式で出力
・他の Adobe ツールで、Edge Animate コンポジションを利用化
※例えば Dreamweaver CC などでページ内に埋め込める

25. これまでもアップデートを繰り返し、
着実に機能の強化が進んでいる「Adobe Edge Animate CC」
。
今後も目が離せないツールの 1 つです！