Upload
tomonori-watanabe
View
1.044
Download
0
Embed Size (px)
DESCRIPTION
「ADC MEETUP Night – Web制作者のためのアプリ開発ワークフロー」で行った「Edge Animate」セッションのプレゼンテーション資料です。
Citation preview
スマホアプリのインタラクティブコンテンツ
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 つです!