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

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

概要自己紹介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日時点の情報です。

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

MARIE SUENGA (@mima_v)

4

自己紹介

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

TW：@mima_v

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

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

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

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

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

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

5

自己紹介

たまさん

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

Adobe Edge Animate についての説明

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

Adobe Edge Animate による作品紹介

7

Facebookページへ1

実際に触ってみよう。

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

SEO

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

8

Adobe Edge Animate についての説明

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

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

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

CSSフィルタ

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

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

9

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

Adobe Edge Animate についての説明

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

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

10

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

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

Adobe Edge Animate についての説明

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

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

HTML（描画部分）

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

11

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

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

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

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）

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

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

13

images フォルダ

×××.jpg

×××.png

×××.gif

×××.svg

使用可能な画像形式

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

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

構成要素について

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

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

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

コンポジション

　 シンボル ステージ

タイムライン

アクション

15

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

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

16

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

以下、公式サイト

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

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

‘

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

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

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図形・円ソースコード

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

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

IE6~9の対応について

18

IE6~9について

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

2. 画像

HTML5一部対応のIE9

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

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

19

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

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

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

IE6~9の対応について

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

20

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

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

IE6~9の対応について

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

21

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

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

IE6~9の対応について

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

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

22

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

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

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

IE6~9の対応について

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

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

23

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

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

iPad,iPhoney用電子書籍

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

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

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

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

24

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

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

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

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

25

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

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

Digital Publishing Suite（DPS）

iBooks Author

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

26

気になるあの子との違い

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

Flashとの違い

27

Edge Animate

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

FlashはCanvas / Edge AnimateはDOM

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

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

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

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

28

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

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

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

DOMって何？

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

29

Flashとの違い

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

劇的な改善

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

30

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

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

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.

‘

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

32

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

FACEBOOKページ

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

33

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

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

34

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

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

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

35

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

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

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

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />　<meta http-equiv="X-UA-Compatible" content="IE=Edge" />　<!--Adobe Edge Runtime-->　<script charset="utf-8" type="text/javascript" src="sample01_edgePreload.js"></script>　<style>　<!--　.edgeLoad-EDGE-ichigo { visibility:hidden; }　-->　</style>　<!--Adobe Edge Runtime End-->　<div class="EDGE-ichigo" id="Stage">　</div>

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

36

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

jQueryイベント

タッチイベント

タイムラインイベント

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

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

37

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

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

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

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

　[ページレベル]

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

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

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

38

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

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

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

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

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

39

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

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

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

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

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

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

40

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

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

Let's try ,

Let's try ,

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

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

41

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

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

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

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

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

42

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

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

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

43

ハンズオンタイム

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

44

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

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

45

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

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

46

THANKS！$

$

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

47

おまけ

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

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

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

49

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

赤色：非対応

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