More Related Content Similar to 1.5からはじめるIT勉強会 adobe edge_animate Similar to 1.5からはじめるIT勉強会 adobe edge_animate (20) More from Marie Suenaga (9) 1.5からはじめるIT勉強会 adobe edge_animate3. 概要
自己紹介
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」
7. Adobe Edge Animate による作品紹介
7
Facebookページへ1
実際に触ってみよう。
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」
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」
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」
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」
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>