2013/5/19に開催

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

2. 2
Facebookページ
http://fb.me/it.ichigo
FBページに参考サイト
URLやデータを投稿します。
みま & たま S
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

3. 概要
自己紹介
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」

4. MARIE SUENGA (@mima_v)
4
自己紹介
Webクリエイター（ノン・フリーランス）
FB：fb.me/suenagamarie
TW：@mima_v
属性：迷子
日常：勉強会,アロマオイル,バレエ etc.
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

5. 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」

6. Adobe Edge Animate についての説明
62013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

7. Adobe Edge Animate による作品紹介
7
Facebookページへ1
実際に触ってみよう。
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

8. 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. 9
静的HTMLとしてコンテンツをパブリッシュ
Adobe Edge Animate についての説明
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

10. 楽々使用 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」

11. 使用ファイル / フォルダ構成
HTML（描画部分）
CSS（表現部分）
jQuery（アニメーションコア部分）
JSON形式（アニメーションの書方）
11
名前を付けて保存 「ファイル＞パブリッシュ」すると、出力されるフォルダ
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

12. 使用ファイル / フォルダ構成について
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. 使用ファイル / フォルダ構成について
13
images フォルダ
×××.jpg
×××.png
×××.gif
×××.svg
使用可能な
画像形式
制作途中でEdge Animateのバージョンを上げた場合の対応方法
別名で保存（または保存）
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

14. 構成要素について
コンポジション
edge animateのコンテンツ（アニメーション）全体のこと。
アニメーションごとにコンポジションIDが割り振られているの
で色々なアニメーションをページ内に入れることが可能。
シンボル
＝ステージ / タイムライン / アクション 要素のセットをグ
ループ化したものが一つの構成単位
142013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
コンポジション
シンボル ステージ
タイムライン
アクション

15. 15
デバイス・ブラウザ対応について
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

16. 16
基本的には問題ありません。
以下、公式サイト
WebKitをベースにした環境でデザインするため、開発
したコンテンツを最新ブラウザや各種モバイルデバイ
スで確実に表示できます。
(引用:Webデザインツール＆サービス | HTML, CSS, JavaScriptなど | Adobe Edge)
‘
スマートフォンの対応について
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

17. 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」

18. 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. 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. 20
HTML5未対応のIE8以下への対応
Google Chrome Frame インストーラー（パブリッシュ設定）
・プロンプトなし
・IFrameプロンプト
・オーバーレイプロンプト
IE6~9の対応について
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

21. 21
HTML5未対応のIE8以下への対応
Chrome Frame インストーラー（パブリッシュ設定）
IE6~9の対応について
オーバーレイプロンプトIFrameプロンプト
closeボタン
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

22. 22
IE8以下への対応方法２
ポスターイメージを表示させる。
任意に指定することが出来る。
※どのブラウザでも設定を行えば、真っ白な画面が表示されるこ
とはない。
HTML5未対応のIE8以下への対応
IE6~9の対応について
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

23. 電子書籍作成にも使われる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」

24. 電子書籍作成にも使われるEdge Animate
24
Edge Animateで作成された電子書籍
押井守監督作品「ちまみれマイ・らぶ」
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

25. 電子書籍作成にも使われる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勉強会「いまはじ

26. 26
気になるあの子との違い
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

27. Flashとの違い
27
Edge Animate
イージング関数はあるが、微調整などの自由度はない。
Music再生機能はない。
グラデーションの種類が少ない。
= 画像周りの加工機能が少ない。
FlashはCanvas / Edge AnimateはDOM
DOM操作をベースとしているため、Canvasよりバグが少ない。
Androidのバグ
の多さに違いが・・・！
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

28. 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. 29
Flashとの違い
「Edge Animate」への改名前の「Edge Preview」
機能が物足りなかった Edge Preview 2 （2011年）
劇的な改善
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

30. 30
今後のアップデートについて
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

31. 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 easily
create engaging content
with animation and
interactivity.
‘
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

32. 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. 33
今後のアップデートに期待大
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

34. 34
1. ツールパネル
2. プロパティパネル
3. ステージ
4. エレメントパネル
5. ライブラリパネル
6. タイムラインパネル
Edge Animate起動 ,各パネルの説明
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

35. 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. 各パネルの説明（トリガー：発生条件）
36
DOMイベント
シンボルレベル ・ コンポジションレベル ・ ページレベル ・ ブラウザレベル ・
エレメントレベル
jQueryイベント
タッチイベント
タイムラインイベント
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

37. 各パネルの説明（トリガー：発生条件）
37
DOMイベント
[シンボルレベル]
creationComplete シンボルの生成が完了し、利用可能になった時（autoplay前）
beforeDeletion シンボルの削除直前の時
[コンポジションレベル]
compositionReady アニメーションが再生可能となり、いつでも再生出来る時
[ページレベル]
scroll スクロールした時
keydown キーを押した時
keyup キーを話した時
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

38. 各パネルの説明（トリガー：発生条件）
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. 各パネルの説明（トリガー：発生条件）
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. 各パネルの説明（タイムラインパネル）
40
自動キーフレームモード
タイムラインにキーフレームを設定して作成。
自動トランジションモード
段階的な遷移のあるキーフレーム
使用する時は自動キーフレームモードと一緒にONに
する。
自動キーフレームでは瞬間移動のような動き
作成時に自動トランジションモードをON
左下から右上へ、滑らかな移動になる。
Let's try ,
Let's try ,
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

41. 各パネルの説明（タイムラインパネル）
41
ピンの切り替え
タイムライン上の編集が記録される。
アニメーションと関係のない動きをする場合は、OFFにする。
イージング
色んなタイプのイージングがある。
選択式で自分で微調整することは出来ない。
トリガー スニペット
クリックすると、スニペットとソースが表示される。
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

42. 各パネルの説明（タイムラインパネル）
42
ラベルについて
予めタイムライン上にラベルを設定しておくことでトリガーで
任意の位置に移動する時、ラベルで指定することが出来る。
function(sym, e)
// 指定した位置からタイムラインを再生 (ミリ秒またはラベル)
sym.play("ラベル名");
もちろん、ミリ秒で指定しても良いが、ラベルで指定すると、
ラベル自体を移動させることが出来るため修正が楽。
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

43. 43
ハンズオンタイム
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

44. 44
JPEGアニメ作成 / スライド作成 /
色々なアクション機能を試す
1$
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

45. 45
ワークショップタイム開始
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

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

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

48. CSSフィルタの対応端末について
482013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

49. 49
CSSフィルタの対応端末について
赤色：非対応
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」