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

‒ SESSION 4 ‒

スマホアプリのインタラクティブコンテンツ
渡辺知規 (ワタナベ トモノリ)
・WEB デザイナー&WEB プログラマー
・株式会社スパイラルエッジ 代表取締役

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

に加えて、

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

インタビュー記事:
http://gallery.adobe-web.jp/web/chi...
・Adobe Creative Cloud からダウンロードして利用できる
・HTML5&CSS3 で、直感的にアニメーションやゲームを作れる
・Flash Professional と非常によく似た概念とインターフェース
・JavaScrip...
Adobe Edge Animate CC を利用した
ワークフローと機能説明
外部から取り込んだ素材リスト
それぞれの「+」ボタンを押すと、
エクスプローラーが起動する。
ライブラリからステージ上に設置した要素が
こちらに表示される。
表示上の並び順(表示階層)なども、
ドラッグ&ドロップで設定可能。
ライブラリから、素材をここに
ドラッグ&ドロップすることで、
ステージに設置できる。

キャプチャ

素材の位置や大きさなど、
このステージの中で、
見たまま直感的に操作可能。
タイムラインアニメーションを作成していく為の、メインウィンドウ。
ステージ上にある素材(要素)が縦に表示され、横軸で、時間が展開する。
その他、タイムラインや要素毎に、
クリックなどのイベントを登録して、アクションを登録できる。
(※Adobe...
ステージ上にある要素の位置や大きさ、
透明度など設定できる。
ステージ上での編集と異なり、
数値で設定できる為、かなり細かな調整が可能。
各種ツール群
単純な図形要素やテキストの設置などは、
ここから選択して、ステージに設置する。
ベジェ曲線で、なめらかな曲線アニメーションを作成することが可能。
Adobe Edge Animate CC でも
JavaScript でアニメーションの
作成や制御を行うことが可能!
また、スニペットパネルが
準備されている
Adobe Edge Animate CC の独自の機能にアクセスする為の
JavaScript ベースの API

一例

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

マニュアル:
htt...
Edge Animate は、HTML5 ファイルで生成される為、
JavaScript でかなりの拡張が可能。
・音を鳴らす
・ランダムに動かす
・条件分岐させる etc...

しかも、jQuery API も使えるので、
show() や...
モバイルデバイス向けの製作 TIPS
- フィルター

:  現状、Android ブラウザーに未対応。
    FireFox・IE も同様)
(

- 素材サイズ

:  1024×1024 以上のサイズは、モバイル上で
   意図しない動作となる可能性あり。
→Adobe E...
Adobe Edge Inspect CC で
簡単に端末上でプレビューしながら開発しよう!
必要なものは・ ・
・

      ・PC 用 Adobe Edge Inspect CC
      ・Google Chrome 用の Adobe Edge Inspect CC
拡張機能
      ・モバイルデバイス用 Adobe E...
①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 つです!
【Edge Animate】スマホアプリのインタラクティブコンテンツ
Upcoming SlideShare
Loading in …5
×

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

1,592 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,592
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
2
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. ADC MEETUP Night Web 制作者のためのアプリ開発ワークフロー ‒ SESSION 4 ‒ スマホアプリのインタラクティブコンテンツ
  2. 2. 渡辺知規 (ワタナベ トモノリ) ・WEB デザイナー&WEB プログラマー ・株式会社スパイラルエッジ 代表取締役 池袋の小さな WEB 制作会社で、 日々、WEB を中心としたクリエイティブワークに従事
  3. 3. Adobe Edge Animate CC に加えて、 Adobe Edge Inspect CC
  4. 4. 押井守監督による iPad 向けコミックアニメーション作品 「ちまみれマイ・ラブ」で、Edge Animate を 利用したアニメーション制作を担当。 インタビュー記事: http://gallery.adobe-web.jp/web/chimamiremylove/ ADC ONAIR 出演: http://onair.adobe-adc.jp/130319/
  5. 5. ・Adobe Creative Cloud からダウンロードして利用できる ・HTML5&CSS3 で、直感的にアニメーションやゲームを作れる ・Flash Professional と非常によく似た概念とインターフェース ・JavaScript を利用することで、 ツール単体では達成できない内容も実装可
  6. 6. Adobe Edge Animate CC を利用した ワークフローと機能説明
  7. 7. 外部から取り込んだ素材リスト それぞれの「+」ボタンを押すと、 エクスプローラーが起動する。
  8. 8. ライブラリからステージ上に設置した要素が こちらに表示される。 表示上の並び順(表示階層)なども、 ドラッグ&ドロップで設定可能。
  9. 9. ライブラリから、素材をここに ドラッグ&ドロップすることで、 ステージに設置できる。 キャプチャ 素材の位置や大きさなど、 このステージの中で、 見たまま直感的に操作可能。
  10. 10. タイムラインアニメーションを作成していく為の、メインウィンドウ。 ステージ上にある素材(要素)が縦に表示され、横軸で、時間が展開する。 その他、タイムラインや要素毎に、 クリックなどのイベントを登録して、アクションを登録できる。 (※Adobe Edge Animate CC JavaScript API)
  11. 11. ステージ上にある要素の位置や大きさ、 透明度など設定できる。 ステージ上での編集と異なり、 数値で設定できる為、かなり細かな調整が可能。
  12. 12. 各種ツール群 単純な図形要素やテキストの設置などは、 ここから選択して、ステージに設置する。
  13. 13. ベジェ曲線で、なめらかな曲線アニメーションを作成することが可能。
  14. 14. Adobe Edge Animate CC でも JavaScript でアニメーションの 作成や制御を行うことが可能! また、スニペットパネルが 準備されている
  15. 15. Adobe Edge Animate CC の独自の機能にアクセスする為の JavaScript ベースの API 一例 sym.play(); // タイムライン再生 sym.stop(); // タイムライン停止 マニュアル: http://www.adobe.com/devnet-docs/ja_JP/ edgeanimate/api/current/index.html
  16. 16. Edge Animate は、HTML5 ファイルで生成される為、 JavaScript でかなりの拡張が可能。 ・音を鳴らす ・ランダムに動かす ・条件分岐させる etc... しかも、jQuery API も使えるので、 show() や hide() といったお馴染みの関数も利用可!
  17. 17. モバイルデバイス向けの製作 TIPS
  18. 18. - フィルター :  現状、Android ブラウザーに未対応。     FireFox・IE も同様) ( - 素材サイズ :  1024×1024 以上のサイズは、モバイル上で    意図しない動作となる可能性あり。 →Adobe Edge Animate CC 上でサイズを 調整すれば解消できる。      (Retina ディスプレイ対応時など)
  19. 19. Adobe Edge Inspect CC で 簡単に端末上でプレビューしながら開発しよう!
  20. 20. 必要なものは・ ・ ・       ・PC 用 Adobe Edge Inspect CC       ・Google Chrome 用の Adobe Edge Inspect CC 拡張機能       ・モバイルデバイス用 Adobe Edge Inspect CC アプリ
  21. 21. ①Adobe Edge Inspect CC を有効化 ②Adobe Edge Animate CC でコンテンツを製作 ③Adobe Edge Animate CC のプレビュー機能で都度デバイス上で確認できる PC 画 面 スマートフォンやタブレット端末で確認
  22. 22. パブリッシュ
  23. 23. WEB 最適化された HTML で出力 Animate デプロイメントパッケージ 「oam」形式で出力 ・他の Adobe ツールで、Edge Animate コンポジションを利用化 ※例えば Dreamweaver CC などでページ内に埋め込める
  24. 24. これまでもアップデートを繰り返し、 着実に機能の強化が進んでいる「Adobe Edge Animate CC」 。 今後も目が離せないツールの 1 つです!

×