Weitere ähnliche Inhalte
Ähnlich wie 【Edge Animate】スマホアプリのインタラクティブコンテンツ (20)
【Edge Animate】スマホアプリのインタラクティブコンテンツ
- 2. 渡辺知規 (ワタナベ トモノリ)
・WEB デザイナー&WEB プログラマー
・株式会社スパイラルエッジ 代表取締役
池袋の小さな WEB 制作会社で、
日々、WEB を中心としたクリエイティブワークに従事
- 5. ・Adobe Creative Cloud からダウンロードして利用できる
・HTML5&CSS3 で、直感的にアニメーションやゲームを作れる
・Flash Professional と非常によく似た概念とインターフェース
・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() といったお馴染みの関数も利用可!
- 19. - フィルター
: 現状、Android ブラウザーに未対応。
FireFox・IE も同様)
(
- 素材サイズ
: 1024×1024 以上のサイズは、モバイル上で
意図しない動作となる可能性あり。
→Adobe Edge Animate CC 上でサイズを
調整すれば解消できる。
(Retina ディスプレイ対応時など)
- 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 画 面
スマートフォンやタブレット端末で確認