スマホアプリのインタラクティブコンテンツ

ADC MEETUP Night Web 制作者のためのアプリ開発ワークフロー

‒ SESSION 4 ‒

渡辺知規（ワタナベ トモノリ）・WEB デザイナー＆WEB プログラマー・株式会社スパイラルエッジ　代表取締役

池袋の小さなWEB 制作会社で、日々、WEB を中心としたクリエイティブワークに従事

Adobe Edge Animate CC

に加えて、 Adobe Edge Inspect CC

インタビュー記事：http://gallery.adobe-web.jp/web/chimamiremylove/

ADC ONAIR 出演：http://onair.adobe-adc.jp/130319/

押井守監督によるiPad 向けコミックアニメーション作品「ちまみれマイ・ラブ」で、Edge Animate を利用したアニメーション制作を担当。

・Adobe Creative Cloud からダウンロードして利用できる

・HTML5＆CSS3 で、直感的にアニメーションやゲームを作れる

・Flash Professional と非常によく似た概念とインターフェース

・JavaScript を利用することで、ツール単体では達成できない内容も実装可

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

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

ライブラリからステージ上に設置した要素がこちらに表示される。

表示上の並び順（表示階層）なども、ドラッグ＆ドロップで設定可能。

ライブラリから、素材をここにドラッグ＆ドロップすることで、ステージに設置できる。

素材の位置や大きさなど、このステージの中で、見たまま直感的に操作可能。

キャプチャ

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

ステージ上にある要素の位置や大きさ、透明度など設定できる。

ステージ上での編集と異なり、数値で設定できる為、かなり細かな調整が可能。

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

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

Adobe Edge Animate CC でもJavaScript でアニメーションの作成や制御を行うことが可能！

また、スニペットパネルが準備されている

Adobe Edge Animate CC の独自の機能にアクセスする為のJavaScript ベースの API

sym.play(); // タイムライン再生

sym.stop(); // タイムライン停止

マニュアル：http://www.adobe.com/devnet-docs/ja_JP/edgeanimate/api/current/index.html

一例

Edge Animate は、HTML5 ファイルで生成される為、JavaScript でかなりの拡張が可能。

・音を鳴らす・ランダムに動かす・条件分岐させる etc...

しかも、jQuery API も使えるので、show() や hide() といったお馴染みの関数も利用可！

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

- フィルター ：　　現状、Android ブラウザーに未対応。　　　（FireFox・IEも同様）

- 素材サイズ ：　　1024×1024 以上のサイズは、モバイル上で　　　意図しない動作となる可能性あり。

→Adobe Edge Animate CC 上でサイズを 調整すれば解消できる。　　　　（Retina ディスプレイ対応時など）

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

必要なものは・・・

　　　　　　・PC 用 Adobe Edge Inspect CC　　　　　　・Google Chrome 用の Adobe Edge Inspect CC 拡張機能　　　　　　・モバイルデバイス用 Adobe Edge Inspect CC アプリ

①Adobe Edge Inspect CC を有効化②Adobe Edge Animate CC でコンテンツを製作③Adobe Edge Animate CC のプレビュー機能で都度デバイス上で確認できる

PC画面 スマートフォンやタブレット端末で確認

パブリッシュ

WEB

最適化された HTML で出力

Animate デプロイメントパッケージ

「oam」形式で出力・他の Adobe ツールで、Edge Animate コンポジションを利用化※例えば Dreamweaver CC などでページ内に埋め込める

これまでもアップデートを繰り返し、着実に機能の強化が進んでいる「Adobe Edge Animate CC」。

今後も目が離せないツールの 1 つです！