1.5からはじめるit勉強会 adobe edge_animate
DESCRIPTION
2013/5/19に開催TRANSCRIPT
![Page 1: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/1.jpg)
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
1.5からはじめるIT勉強会いまはじめようAdobe Edge Animate
![Page 2: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/2.jpg)
2
Facebookページ http://fb.me/it.ichigo
FBページに参考サイトURLやデータを投稿します。
みま & たま S
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 3: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/3.jpg)
概要自己紹介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」
![Page 4: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/4.jpg)
MARIE SUENGA (@mima_v)
4
自己紹介
Webクリエイター(ノン・フリーランス)FB:fb.me/suenagamarie
TW:@mima_v
属性:迷子日常:勉強会,アロマオイル,バレエ etc.
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 5: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/5.jpg)
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」
![Page 6: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/6.jpg)
Adobe Edge Animate についての説明
62013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 7: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/7.jpg)
Adobe Edge Animate による作品紹介
7
Facebookページへ1
実際に触ってみよう。
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 8: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/8.jpg)
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」
![Page 9: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/9.jpg)
9
静的HTMLとしてコンテンツをパブリッシュ
Adobe Edge Animate についての説明
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 10: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/10.jpg)
楽々使用 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」
![Page 11: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/11.jpg)
使用ファイル / フォルダ構成
HTML(描画部分)
CSS(表現部分)jQuery(アニメーションコア部分)JSON形式(アニメーションの書方)
11
名前を付けて保存 「ファイル>パブリッシュ」すると、出力されるフォルダ
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 12: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/12.jpg)
使用ファイル / フォルダ構成について
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」
![Page 13: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/13.jpg)
使用ファイル / フォルダ構成について
13
images フォルダ
×××.jpg
×××.png
×××.gif
×××.svg
使用可能な画像形式
制作途中でEdge Animateのバージョンを上げた場合の対応方法別名で保存(または保存)
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 14: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/14.jpg)
構成要素について
コンポジション edge animateのコンテンツ(アニメーション)全体のこと。アニメーションごとにコンポジションIDが割り振られているので色々なアニメーションをページ内に入れることが可能。
シンボル=ステージ / タイムライン / アクション 要素のセットをグループ化したものが一つの構成単位
142013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
コンポジション
シンボル ステージ
タイムライン
アクション
![Page 15: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/15.jpg)
15
デバイス・ブラウザ対応について
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 16: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/16.jpg)
16
基本的には問題ありません。
以下、公式サイト
WebKitをベースにした環境でデザインするため、開発 したコンテンツを最新ブラウザや各種モバイルデバイ スで確実に表示できます。
(引用:Webデザインツール&サービス | HTML, CSS, JavaScriptなど | Adobe Edge)
‘
スマートフォンの対応について
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 17: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/17.jpg)
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」
![Page 18: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/18.jpg)
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」
![Page 19: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/19.jpg)
19
HTML5未対応のIE8以下への対応
IE8以下への対応方法1 ・IE 向けの Google Chrome Frame 拡張機能を使用
→IE6~8のレンダリングをGoogle Chromeと同じように表示 ・Google Chrome Frameのインストールを誘導することも可能
IE6~9の対応について
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 20: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/20.jpg)
20
HTML5未対応のIE8以下への対応
Google Chrome Frame インストーラー(パブリッシュ設定) ・プロンプトなし ・IFrameプロンプト ・オーバーレイプロンプト
IE6~9の対応について
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 21: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/21.jpg)
21
HTML5未対応のIE8以下への対応
Chrome Frame インストーラー(パブリッシュ設定)
IE6~9の対応について
オーバーレイプロンプトIFrameプロンプトcloseボタン
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 22: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/22.jpg)
22
IE8以下への対応方法2 ポスターイメージを表示させる。 任意に指定することが出来る。
※どのブラウザでも設定を行えば、真っ白な画面が表示されることはない。
HTML5未対応のIE8以下への対応
IE6~9の対応について
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 23: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/23.jpg)
電子書籍作成にも使われる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」
![Page 24: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/24.jpg)
電子書籍作成にも使われるEdge Animate
24
Edge Animateで作成された電子書籍
押井守監督作品「ちまみれマイ・らぶ」
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 25: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/25.jpg)
電子書籍作成にも使われる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」
![Page 26: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/26.jpg)
26
気になるあの子との違い
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 27: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/27.jpg)
Flashとの違い
27
Edge Animate
イージング関数はあるが、微調整などの自由度はない。Music再生機能はない。グラデーションの種類が少ない。= 画像周りの加工機能が少ない。
FlashはCanvas / Edge AnimateはDOM
DOM操作をベースとしているため、Canvasよりバグが少ない。
Androidのバグの多さに違いが・・・!
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 28: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/28.jpg)
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」
![Page 29: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/29.jpg)
29
Flashとの違い
「Edge Animate」への改名前の「Edge Preview」 機能が物足りなかった Edge Preview 2 (2011年)
劇的な改善
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 30: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/30.jpg)
30
今後のアップデートについて
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 31: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/31.jpg)
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」
![Page 32: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/32.jpg)
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」
![Page 33: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/33.jpg)
33
今後のアップデートに期待大
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 34: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/34.jpg)
34
1. ツールパネル2. プロパティパネル3. ステージ4. エレメントパネル5. ライブラリパネル6. タイムラインパネル
Edge Animate起動 ,各パネルの説明
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 35: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/35.jpg)
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>
![Page 36: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/36.jpg)
各パネルの説明(トリガー:発生条件)
36
DOMイベントシンボルレベル ・ コンポジションレベル ・ ページレベル ・ ブラウザレベル ・ エレメントレベル
jQueryイベント
タッチイベント
タイムラインイベント
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 37: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/37.jpg)
各パネルの説明(トリガー:発生条件)
37
DOMイベント [シンボルレベル]
creationComplete シンボルの生成が完了し、利用可能になった時(autoplay前) beforeDeletion シンボルの削除直前の時
[コンポジションレベル]
compositionReady アニメーションが再生可能となり、いつでも再生出来る時
[ページレベル]
scroll スクロールした時 keydown キーを押した時 keyup キーを話した時
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 38: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/38.jpg)
各パネルの説明(トリガー:発生条件)
38
DOMイベント [ブラウザレベル] orientationchange デバイスの向きを変えた時(iPhone/iPad) resize ウィンドウサイズが変わった時 onError エラーが生じた時
[エレメントレベル] click クリック時(タッチデバイスでも常に有効。他、クリックイベントがバインドされていれば有効)
dbclick 2回素早くクリック時 mouseover マウスポインタを上に重ねた時 mousedown ターゲット上で押された時 mousemove ターゲット上でマウスポインタを押しながら動かした時 mouseup ターゲット上でクリックして上げた時 mouseout マウスポインタがターゲット(要素)から外れた時
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 39: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/39.jpg)
各パネルの説明(トリガー:発生条件)
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」
![Page 40: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/40.jpg)
各パネルの説明(タイムラインパネル)
40
自動キーフレームモードタイムラインにキーフレームを設定して作成。
自動トランジションモード段階的な遷移のあるキーフレーム使用する時は自動キーフレームモードと一緒にONにする。自動キーフレームでは瞬間移動のような動き作成時に自動トランジションモードをON左下から右上へ、滑らかな移動になる。
Let's try ,
Let's try ,
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 41: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/41.jpg)
各パネルの説明(タイムラインパネル)
41
ピンの切り替えタイムライン上の編集が記録される。アニメーションと関係のない動きをする場合は、OFFにする。
イージング色んなタイプのイージングがある。選択式で自分で微調整することは出来ない。
トリガー スニペットクリックすると、スニペットとソースが表示される。
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 42: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/42.jpg)
各パネルの説明(タイムラインパネル)
42
ラベルについて予めタイムライン上にラベルを設定しておくことでトリガーで任意の位置に移動する時、ラベルで指定することが出来る。function(sym, e)// 指定した位置からタイムラインを再生 (ミリ秒またはラベル)sym.play("ラベル名");
もちろん、ミリ秒で指定しても良いが、ラベルで指定すると、ラベル自体を移動させることが出来るため修正が楽。
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 43: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/43.jpg)
43
ハンズオンタイム
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 44: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/44.jpg)
44
JPEGアニメ作成 / スライド作成 / 色々なアクション機能を試す
1$2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 45: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/45.jpg)
45
ワークショップタイム開始
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 46: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/46.jpg)
46
THANKS!$
$
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 47: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/47.jpg)
47
おまけ
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 48: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/48.jpg)
CSSフィルタの対応端末について
482013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
![Page 49: 1.5からはじめるIT勉強会 adobe edge_animate](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559794a11a28abf3108b4757/html5/thumbnails/49.jpg)
49
CSSフィルタの対応端末について
赤色:非対応
2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」