1.5からはじめるit勉強会 adobe edge_animate

2013年5月19日第1回 1.5からはじめるIT勉強会「いまはじめよう　Adobe Edge Animate」

1.5からはじめるIT勉強会いまはじめようAdobe Edge Animate

2

Facebookページ　http://fb.me/it.ichigo

FBページに参考サイトURLやデータを投稿します。

みま & たま　S


https://www.facebook.com/it.ichigo

https://www.facebook.com/it.ichigo

概要自己紹介Adobe Edge Animate による作品紹介Adobe Edge Animate についての説明使用ファイル / フォルダ構成について構成要素についてデバイス・ブラウザ対応についてFlashとの違い各パネルの説明JPEGアニメ作成 / スライド作成 / 色々なアクション機能ワークショップ発表

3

Let's try

,

Let's try

,

Let's try

, Edge Animateバージョン1.5このスライドは、2013年5月19日時点の情報です。


MARIE SUENGA (@mima_v)

4

自己紹介

Webクリエイター（ノン・フリーランス）FB：fb.me/suenagamarie

TW：@mima_v

属性：迷子日常：勉強会,アロマオイル,バレエ etc.


2012年プライベートの主な活動2012/03/11 「WordBench東京」WordCrab Tokyo 2012 ～あの素晴らしいカニをもう一度～

少しの知識と手間で縮まる私とプラグインの距離

2012/6/23 「ゆるふわ勉強会」Photoshopで効率よくデザインしよう

2012/12/9 「0.5からはじめるIT勉強会第0回目」主催スマートフォン対応とレスポンシブWebデザイン

5

自己紹介

たまさん


Adobe Edge Animate についての説明


Adobe Edge Animate による作品紹介

7

Facebookページへ1

実際に触ってみよう。


SEO

アクセシビリティアニメーションをページ内に取り込む。既存のHTMLページをアニメーション化※使用可能な機能や使用条件に制限あり

8


Invert　反転Hue-Rotate　色相変更Contrast　コントラスト変更Saturate　彩度変更

Sepia　セピア処理Greyscale　グレースケール処理Blur　ぼかし処理Shadow　ドロップシャドウ処理

CSSベース（相対配置など）

CSSフィルタ

静的HTMLとしてコンテンツをパブリッシュ


9

静的HTMLとしてコンテンツをパブリッシュ



楽々使用 WEBフォント Adobe Edge Codeが統合。 Edge Animate内から直接呼び出し組み込むことが出来る。

10

Edge Web Fontsの凄いところは、組み込みやすさだけではない。

o 代替フォントを指定出来る。o 500以上ものフォントの多さo 商用利用可能で無料



使用ファイル / フォルダ構成

HTML（描画部分）

CSS（表現部分）jQuery（アニメーションコア部分）JSON形式（アニメーションの書方）

11

名前を付けて保存「ファイル＞パブリッシュ」すると、出力されるフォルダ


使用ファイル / フォルダ構成について

12

×××.html　　　・・・ブラウザに表示するファイル

×××_edge.js ・・・画像やシンボル定義について

×××_edgeAction.js ・・・ユーザーによるインタラクション部分

×××_edgePreload.js ・・起動の時に必要なJSファイルを読み込むファイル

edge_includes フォルダ

edge.1.5.0.min.js ・・・Edge Animateのエンジン部分

jquery-1.7.1.min.js ・・・jQuery本体

（Ctrl/command+E）


使用ファイル / フォルダ構成について

13

images フォルダ

×××.jpg

×××.png

×××.gif

×××.svg

使用可能な画像形式

制作途中でEdge Animateのバージョンを上げた場合の対応方法別名で保存（または保存）


構成要素について

コンポジション edge animateのコンテンツ（アニメーション）全体のこと。アニメーションごとにコンポジションIDが割り振られているので色々なアニメーションをページ内に入れることが可能。

シンボル＝ステージ / タイムライン / アクション要素のセットをグループ化したものが一つの構成単位


コンポジション

　シンボルステージ

タイムライン

アクション

15

デバイス・ブラウザ対応について


16

基本的には問題ありません。

以下、公式サイト

　WebKitをベースにした環境でデザインするため、開発したコンテンツを最新ブラウザや各種モバイルデバイスで確実に表示できます。

　　(引用:Webデザインツール＆サービス | HTML, CSS, JavaScriptなど | Adobe Edge)

‘

スマートフォンの対応について


17

ブラウザやデバイスによってサポートしておらず表現が異なったり。

Edge animateを使うことで同じ表現になることはない。

Android2.X でCSS3で表現出来ない円は長方形で表示されたり。

id:'circle',type:'ellipse',rect:['347px','135px','186px','178px','auto','auto'],borderRadius:["50%","50%","50%","50%"],fill:["rgba(192,192,192,1)"],stroke:[0,"rgba(0,0,0,1)","none"]

×××_edge.js図形・円ソースコード

スマートフォンの対応について


IE6~9の対応について

18

IE6~9について

HTML5未対応のIE8以下フォールバックあり。1. Google Chrome Frame

2. 画像

HTML5一部対応のIE9

CSS3、一部のみサポート ex)グラデーションはサポート外 →　単一色べた塗り表示。


19

HTML5未対応のIE8以下への対応

IE8以下への対応方法１　・IE 向けの Google Chrome Frame 拡張機能を使用

→IE6～8のレンダリングをGoogle Chromeと同じように表示　　　・Google Chrome Frameのインストールを誘導することも可能　　　



20


Google Chrome Frame インストーラー（パブリッシュ設定）　・プロンプトなし　・IFrameプロンプト　・オーバーレイプロンプト



21


Chrome Frame インストーラー（パブリッシュ設定）


オーバーレイプロンプトIFrameプロンプトcloseボタン


22

IE8以下への対応方法２　ポスターイメージを表示させる。　任意に指定することが出来る。

※どのブラウザでも設定を行えば、真っ白な画面が表示されることはない。




電子書籍作成にも使われるEdge Animate

23

Edge Animateで作成された電子書籍

　押井守監督作品「ちまみれマイ・らぶ」

iPad,iPhoney用電子書籍

HTML5 アニメーションを活用したiPad 向け電子出版

http://gallery.adobe-web.jp/web/chimamiremylove/





24

Edge Animateで作成された電子書籍

　押井守監督作品「ちまみれマイ・らぶ」



25

Edge Animateで作成　→　パブリッシュ　→　インポート　→　調整 / 編集　→　電子書籍化

Adobe Digital Publishing SuiteやApple iBooks Authorにインポートが可能

Digital Publishing Suite（DPS）

iBooks Author


26

気になるあの子との違い


Flashとの違い

27

Edge Animate

イージング関数はあるが、微調整などの自由度はない。Music再生機能はない。グラデーションの種類が少ない。= 画像周りの加工機能が少ない。

FlashはCanvas / Edge AnimateはDOM

DOM操作をベースとしているため、Canvasよりバグが少ない。

Androidのバグの多さに違いが・・・！


Flash使いにはこちらもオススメ

28

Flashの「ような」動きを一から作ることが出来る。Flash(.swf)を「変換」用ツールではない。

変換Flash Professional CS6の拡張機能 Adobe Flash Professional Toolkit for CreateJSなど

Canvasアニメーション / DOMアニメーション　$ 選択自由$

DOMって何？


29

Flashとの違い

「Edge Animate」への改名前の「Edge Preview」　機能が物足りなかった Edge Preview 2　（2011年）

劇的な改善


30

今後のアップデートについて


31

Mothion paths,Templates,Faster content,Swipe gesture support,Preciseanimation,Reusable symbols

http://html.adobe.com/edge/animate/features.html

ADOBE & HTML Features

Powerful features in Edge Animate CC help you easilycreate engaging contentwith animation andinteractivity.

‘






32

Motion paths, templates,& CDN hosting are on the way in Edge Animate CC, Coming in June!‘

FACEBOOKページ




33

今後のアップデートに期待大


34

1. ツールパネル2. プロパティパネル3. ステージ4. エレメントパネル5. ライブラリパネル6. タイムラインパネル

Edge Animate起動 ,各パネルの説明


35

コンポジションクラス作成したアニメーションに割り当てられる

コンポジションクラス名を指定。　● sample01.an 　● コンポジションクラスをEDGE-ichigoとした場合　

各パネルの説明（プロパティパネル）


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />　<meta http-equiv="X-UA-Compatible" content="IE=Edge" />　　<script charset="utf-8" type="text/javascript" src="sample01_edgePreload.js"></script>　<style>　　</style>　　<div class="EDGE-ichigo" id="Stage">　</div>

各パネルの説明（トリガー：発生条件）

36

DOMイベントシンボルレベル・コンポジションレベル・ページレベル・ブラウザレベル・エレメントレベル

jQueryイベント

タッチイベント

タイムラインイベント



37

DOMイベント　[シンボルレベル]

　　creationComplete　シンボルの生成が完了し、利用可能になった時（autoplay前）　　beforeDeletion　シンボルの削除直前の時

　[コンポジションレベル]

　　compositionReady　アニメーションが再生可能となり、いつでも再生出来る時

　[ページレベル]

　　scroll　スクロールした時　　keydown　キーを押した時　　keyup　キーを話した時



38

DOMイベント　[ブラウザレベル]　　orientationchange　デバイスの向きを変えた時（iPhone/iPad）　　resize　ウィンドウサイズが変わった時　　onError　エラーが生じた時　

　[エレメントレベル]　　click クリック時（タッチデバイスでも常に有効。他、クリックイベントがバインドされていれば有効）

　　dbclick　２回素早くクリック時　　mouseover　マウスポインタを上に重ねた時　　mousedown ターゲット上で押された時　　mousemove ターゲット上でマウスポインタを押しながら動かした時　　mouseup　ターゲット上でクリックして上げた時　　mouseout　マウスポインタがターゲット（要素）から外れた時



39

jQueryイベントmouseenter (jQuery)　マウスポインタが要素に入った時mouseleave (jQuery)　マウスポインタがターゲットから外れた時focus (jQuery) 　マウスポインタやタブきーなどでフォーカスした時

　　　　　　　　　（例：お問合せフォームの入力項目）

タッチイベントtouchstart　タッチした時touchmove　タッチしたまま動かし時touchend　タッチ状態から離れた時

タイムラインイベントupdate 更新した時play　再生した時complete　再生完了した時stop　停止した時


各パネルの説明（タイムラインパネル）

40

自動キーフレームモードタイムラインにキーフレームを設定して作成。

自動トランジションモード段階的な遷移のあるキーフレーム使用する時は自動キーフレームモードと一緒にONにする。自動キーフレームでは瞬間移動のような動き作成時に自動トランジションモードをON左下から右上へ、滑らかな移動になる。

Let's try ,

Let's try ,



41

ピンの切り替えタイムライン上の編集が記録される。アニメーションと関係のない動きをする場合は、OFFにする。

イージング色んなタイプのイージングがある。選択式で自分で微調整することは出来ない。

トリガースニペットクリックすると、スニペットとソースが表示される。



42

ラベルについて予めタイムライン上にラベルを設定しておくことでトリガーで任意の位置に移動する時、ラベルで指定することが出来る。function(sym, e)// 指定した位置からタイムラインを再生 (ミリ秒またはラベル)sym.play("ラベル名");

もちろん、ミリ秒で指定しても良いが、ラベルで指定すると、ラベル自体を移動させることが出来るため修正が楽。


43

ハンズオンタイム


44

JPEGアニメ作成 / スライド作成 / 色々なアクション機能を試す

1$2013年5月19日第1回 1.5からはじめるIT勉強会「いまはじめよう　Adobe Edge Animate」

45

ワークショップタイム開始


46

THANKS！$

$


47

おまけ


CSSフィルタの対応端末について


49

CSSフィルタの対応端末について

赤色：非対応


1.5からはじめるit勉強会 adobe edge_animate

Documents