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

2,455 views
2,344 views

Published on

2013/5/19に開催

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,455
On SlideShare
0
From Embeds
0
Number of Embeds
419
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. 2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」1.5からはじめるIT勉強会いまはじめようAdobe Edge Animate
  2. 2. 2Facebookページ http://fb.me/it.ichigoFBページに参考サイトURLやデータを投稿します。みま & たま S2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  3. 3. 概要自己紹介Adobe Edge Animate による作品紹介Adobe Edge Animate についての説明使用ファイル / フォルダ構成について構成要素についてデバイス・ブラウザ対応についてFlashとの違い各パネルの説明JPEGアニメ作成 / スライド作成 / 色々なアクション機能ワークショップ発表3Lets try,Lets try,Lets try, Edge Animateバージョン1.5このスライドは、2013年5月19日時点の情報です。2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  4. 4. MARIE SUENGA (@mima_v)4自己紹介Webクリエイター(ノン・フリーランス)FB:fb.me/suenagamarieTW:@mima_v属性:迷子日常:勉強会,アロマオイル,バレエ etc.2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  5. 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. 6. Adobe Edge Animate についての説明62013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  7. 7. Adobe Edge Animate による作品紹介7Facebookページへ1実際に触ってみよう。2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  8. 8. SEOアクセシビリティアニメーションをページ内に取り込む。既存のHTMLページをアニメーション化※使用可能な機能や使用条件に制限あり8Adobe 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. 9静的HTMLとしてコンテンツをパブリッシュAdobe Edge Animate についての説明2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  10. 10. 楽々使用 WEBフォントAdobe Edge Codeが統合。Edge Animate内から直接呼び出し組み込むことが出来る。10Edge Web Fontsの凄いところは、組み込みやすさだけではない。o 代替フォントを指定出来る。o 500以上ものフォントの多さo 商用利用可能で無料Adobe Edge Animate についての説明2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  11. 11. 使用ファイル / フォルダ構成HTML(描画部分)CSS(表現部分)jQuery(アニメーションコア部分)JSON形式(アニメーションの書方)11名前を付けて保存 「ファイル>パブリッシュ」すると、出力されるフォルダ2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  12. 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. 使用ファイル / フォルダ構成について13images フォルダ×××.jpg×××.png×××.gif×××.svg使用可能な画像形式制作途中でEdge Animateのバージョンを上げた場合の対応方法別名で保存(または保存)2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  14. 14. 構成要素についてコンポジション edge animateのコンテンツ(アニメーション)全体のこと。アニメーションごとにコンポジションIDが割り振られているので色々なアニメーションをページ内に入れることが可能。シンボル=ステージ / タイムライン / アクション 要素のセットをグループ化したものが一つの構成単位142013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」コンポジション  シンボル ステージタイムラインアクション
  15. 15. 15デバイス・ブラウザ対応について2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  16. 16. 16基本的には問題ありません。以下、公式サイト WebKitをベースにした環境でデザインするため、開発したコンテンツを最新ブラウザや各種モバイルデバイスで確実に表示できます。  (引用:Webデザインツール&サービス | HTML, CSS, JavaScriptなど | Adobe Edge)‘スマートフォンの対応について2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  17. 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. 18. IE6~9の対応について18IE6~9についてHTML5未対応のIE8以下フォールバックあり。1. Google Chrome Frame2. 画像HTML5一部対応のIE9CSS3、一部のみサポートex)グラデーションはサポート外 → 単一色べた塗り表示。2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  19. 19. 19HTML5未対応の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」
  20. 20. 20HTML5未対応のIE8以下への対応Google Chrome Frame インストーラー(パブリッシュ設定) ・プロンプトなし ・IFrameプロンプト ・オーバーレイプロンプトIE6~9の対応について2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  21. 21. 21HTML5未対応のIE8以下への対応Chrome Frame インストーラー(パブリッシュ設定)IE6~9の対応についてオーバーレイプロンプトIFrameプロンプトcloseボタン2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  22. 22. 22IE8以下への対応方法2 ポスターイメージを表示させる。 任意に指定することが出来る。※どのブラウザでも設定を行えば、真っ白な画面が表示されることはない。HTML5未対応のIE8以下への対応IE6~9の対応について2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  23. 23. 電子書籍作成にも使われるEdge Animate23Edge Animateで作成された電子書籍 押井守監督作品「ちまみれマイ・らぶ」iPad,iPhoney用電子書籍HTML5 アニメーションを活用したiPad 向け電子出版http://gallery.adobe-web.jp/web/chimamiremylove/2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  24. 24. 電子書籍作成にも使われるEdge Animate24Edge Animateで作成された電子書籍 押井守監督作品「ちまみれマイ・らぶ」2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  25. 25. 電子書籍作成にも使われるEdge Animate25Edge Animateで作成 → パブリッシュ → インポート → 調整 / 編集 → 電子書籍化Adobe Digital Publishing SuiteやApple iBooks Authorにインポートが可能Digital PublishingSuite(DPS)iBooks Author2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじ
  26. 26. 26気になるあの子との違い2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  27. 27. Flashとの違い27Edge Animateイージング関数はあるが、微調整などの自由度はない。Music再生機能はない。グラデーションの種類が少ない。= 画像周りの加工機能が少ない。FlashはCanvas / Edge AnimateはDOMDOM操作をベースとしているため、Canvasよりバグが少ない。Androidのバグの多さに違いが・・・!2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  28. 28. Flash使いにはこちらもオススメ28Flashの「ような」動きを一から作ることが出来る。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. 29Flashとの違い「Edge Animate」への改名前の「Edge Preview」 機能が物足りなかった Edge Preview 2 (2011年)劇的な改善2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  30. 30. 30今後のアップデートについて2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  31. 31. 31Mothion paths,Templates,Faster content,Swipegesturesupport,Preciseanimation,Reusable symbolshttp://html.adobe.com/edge/animate/features.htmlADOBE & HTML FeaturesPowerful features in EdgeAnimate CC help you easilycreate engaging contentwith animation andinteractivity.‘2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  32. 32. 32Motion paths, templates,& CDN hosting are on the way in EdgeAnimate CC, Coming in June!‘FACEBOOKページ2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  33. 33. 33今後のアップデートに期待大2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  34. 34. 341. ツールパネル2. プロパティパネル3. ステージ4. エレメントパネル5. ライブラリパネル6. タイムラインパネルEdge Animate起動 ,各パネルの説明2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  35. 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. 各パネルの説明(トリガー:発生条件)36DOMイベントシンボルレベル ・ コンポジションレベル ・ ページレベル ・ ブラウザレベル ・エレメントレベルjQueryイベントタッチイベントタイムラインイベント2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  37. 37. 各パネルの説明(トリガー:発生条件)37DOMイベント [シンボルレベル]  creationComplete シンボルの生成が完了し、利用可能になった時(autoplay前)  beforeDeletion  シンボルの削除直前の時 [コンポジションレベル]  compositionReady アニメーションが再生可能となり、いつでも再生出来る時 [ページレベル]  scroll  スクロールした時  keydown キーを押した時  keyup  キーを話した時2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  38. 38. 各パネルの説明(トリガー:発生条件)38DOMイベント [ブラウザレベル]  orientationchange デバイスの向きを変えた時(iPhone/iPad)  resize  ウィンドウサイズが変わった時  onError  エラーが生じた時  [エレメントレベル]  click クリック時(タッチデバイスでも常に有効。他、クリックイベントがバインドされていれば有効)  dbclick  2回素早くクリック時  mouseover マウスポインタを上に重ねた時  mousedown ターゲット上で押された時  mousemove ターゲット上でマウスポインタを押しながら動かした時  mouseup  ターゲット上でクリックして上げた時  mouseout  マウスポインタがターゲット(要素)から外れた時 2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  39. 39. 各パネルの説明(トリガー:発生条件)39jQueryイベント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. 各パネルの説明(タイムラインパネル)40自動キーフレームモードタイムラインにキーフレームを設定して作成。自動トランジションモード段階的な遷移のあるキーフレーム使用する時は自動キーフレームモードと一緒にONにする。自動キーフレームでは瞬間移動のような動き作成時に自動トランジションモードをON左下から右上へ、滑らかな移動になる。Lets try ,Lets try ,2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  41. 41. 各パネルの説明(タイムラインパネル)41ピンの切り替えタイムライン上の編集が記録される。アニメーションと関係のない動きをする場合は、OFFにする。イージング色んなタイプのイージングがある。選択式で自分で微調整することは出来ない。トリガー スニペットクリックすると、スニペットとソースが表示される。2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  42. 42. 各パネルの説明(タイムラインパネル)42ラベルについて予めタイムライン上にラベルを設定しておくことでトリガーで任意の位置に移動する時、ラベルで指定することが出来る。function(sym, e)// 指定した位置からタイムラインを再生 (ミリ秒またはラベル)sym.play("ラベル名");もちろん、ミリ秒で指定しても良いが、ラベルで指定すると、ラベル自体を移動させることが出来るため修正が楽。2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  43. 43. 43ハンズオンタイム2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  44. 44. 44JPEGアニメ作成 / スライド作成 /色々なアクション機能を試す1$2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  45. 45. 45ワークショップタイム開始2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  46. 46. 46THANKS!$$2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  47. 47. 47おまけ2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  48. 48. CSSフィルタの対応端末について482013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」
  49. 49. 49CSSフィルタの対応端末について赤色:非対応2013年5月19日 第1回 1.5からはじめるIT勉強会「いまはじめよう Adobe Edge Animate」

×