Submit Search
Upload
老成之CreateJS與Flash
•
Download as PPTX, PDF
•
11 likes
•
5,123 views
智遠 成
Follow
CreateJS與Flash的愛恨情仇
Read less
Read more
Software
Report
Share
Report
Share
1 of 53
Download now
Recommended
2013 05 同業分享會 米蘭數位 奶綠茶 createJS
2013 05 同業分享會 米蘭數位 奶綠茶 createJS
綠茶 奶
互動設計技術現況 20121205
互動設計技術現況 20121205
亭惠 王亭惠
高雄前端社群 #4 psdtohtml workshop
高雄前端社群 #4 psdtohtml workshop
洧杰 廖
前端工程師與室內裝修師傅的相似之處-twMVC#16
前端工程師與室內裝修師傅的相似之處-twMVC#16
twMVC
Css3 animation
Css3 animation
Ted Hsu
Angular js入门分享 by 王栋
Angular js入门分享 by 王栋
栋 王
網頁開發工具 20140630
網頁開發工具 20140630
Yeh Yung-Hsin
Semantic ui教學
Semantic ui教學
Tien-Yang (Aiden) Wu
Recommended
2013 05 同業分享會 米蘭數位 奶綠茶 createJS
2013 05 同業分享會 米蘭數位 奶綠茶 createJS
綠茶 奶
互動設計技術現況 20121205
互動設計技術現況 20121205
亭惠 王亭惠
高雄前端社群 #4 psdtohtml workshop
高雄前端社群 #4 psdtohtml workshop
洧杰 廖
前端工程師與室內裝修師傅的相似之處-twMVC#16
前端工程師與室內裝修師傅的相似之處-twMVC#16
twMVC
Css3 animation
Css3 animation
Ted Hsu
Angular js入门分享 by 王栋
Angular js入门分享 by 王栋
栋 王
網頁開發工具 20140630
網頁開發工具 20140630
Yeh Yung-Hsin
Semantic ui教學
Semantic ui教學
Tien-Yang (Aiden) Wu
前端杂谈
前端杂谈
salinet
前端開發學習簡介
前端開發學習簡介
peterju
輕鬆上手Asp.net web api 2.1-twMVC#14
輕鬆上手Asp.net web api 2.1-twMVC#14
twMVC
用十分鐘瞭解 《JavaScript的程式世界》
用十分鐘瞭解 《JavaScript的程式世界》
鍾誠 陳鍾誠
開發的效能與效率-twMVC#15
開發的效能與效率-twMVC#15
twMVC
20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日
twMVC
MVC實戰分享 分頁與排序相關技巧-tw mvc#13
MVC實戰分享 分頁與排序相關技巧-tw mvc#13
twMVC
Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4
Kyle Shen
一小時可以打造什麼服務Plus twMVC#18
一小時可以打造什麼服務Plus twMVC#18
twMVC
用十分鐘 向jserv學習作業系統設計
用十分鐘 向jserv學習作業系統設計
鍾誠 陳鍾誠
无名小站首页改版 -渐进增强与css3
无名小站首页改版 -渐进增强与css3
taobao.com
Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)
百範 陳
Adobe air 開發經驗分享
Adobe air 開發經驗分享
Rhino Lu
Mobile web開發架構與入門
Mobile web開發架構與入門
Chi-wen Sun
01 Flex Introduction
01 Flex Introduction
guestd960b1
01 Flex Introduction
01 Flex Introduction
Scissor Lee
Develop
Develop
adam guan
前端开发的那些事儿
前端开发的那些事儿
jndream
GDSC FCU 第1堂 前端新手村 - HTML, CSS, JavaScript介紹
GDSC FCU 第1堂 前端新手村 - HTML, CSS, JavaScript介紹
FCUGDSC
Codeigniter 3.0 之 30 分鐘就上手
Codeigniter 3.0 之 30 分鐘就上手
Piece Chao
Adobe Air的应用与前景(孙颖)
Adobe Air的应用与前景(孙颖)
mimi qiao
Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔
Chih-cheng Wang
More Related Content
What's hot
前端杂谈
前端杂谈
salinet
前端開發學習簡介
前端開發學習簡介
peterju
輕鬆上手Asp.net web api 2.1-twMVC#14
輕鬆上手Asp.net web api 2.1-twMVC#14
twMVC
用十分鐘瞭解 《JavaScript的程式世界》
用十分鐘瞭解 《JavaScript的程式世界》
鍾誠 陳鍾誠
開發的效能與效率-twMVC#15
開發的效能與效率-twMVC#15
twMVC
20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日
twMVC
MVC實戰分享 分頁與排序相關技巧-tw mvc#13
MVC實戰分享 分頁與排序相關技巧-tw mvc#13
twMVC
Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4
Kyle Shen
一小時可以打造什麼服務Plus twMVC#18
一小時可以打造什麼服務Plus twMVC#18
twMVC
用十分鐘 向jserv學習作業系統設計
用十分鐘 向jserv學習作業系統設計
鍾誠 陳鍾誠
无名小站首页改版 -渐进增强与css3
无名小站首页改版 -渐进增强与css3
taobao.com
What's hot
(11)
前端杂谈
前端杂谈
前端開發學習簡介
前端開發學習簡介
輕鬆上手Asp.net web api 2.1-twMVC#14
輕鬆上手Asp.net web api 2.1-twMVC#14
用十分鐘瞭解 《JavaScript的程式世界》
用十分鐘瞭解 《JavaScript的程式世界》
開發的效能與效率-twMVC#15
開發的效能與效率-twMVC#15
20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日
MVC實戰分享 分頁與排序相關技巧-tw mvc#13
MVC實戰分享 分頁與排序相關技巧-tw mvc#13
Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4
一小時可以打造什麼服務Plus twMVC#18
一小時可以打造什麼服務Plus twMVC#18
用十分鐘 向jserv學習作業系統設計
用十分鐘 向jserv學習作業系統設計
无名小站首页改版 -渐进增强与css3
无名小站首页改版 -渐进增强与css3
Similar to 老成之CreateJS與Flash
Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)
百範 陳
Adobe air 開發經驗分享
Adobe air 開發經驗分享
Rhino Lu
Mobile web開發架構與入門
Mobile web開發架構與入門
Chi-wen Sun
01 Flex Introduction
01 Flex Introduction
guestd960b1
01 Flex Introduction
01 Flex Introduction
Scissor Lee
Develop
Develop
adam guan
前端开发的那些事儿
前端开发的那些事儿
jndream
GDSC FCU 第1堂 前端新手村 - HTML, CSS, JavaScript介紹
GDSC FCU 第1堂 前端新手村 - HTML, CSS, JavaScript介紹
FCUGDSC
Codeigniter 3.0 之 30 分鐘就上手
Codeigniter 3.0 之 30 分鐘就上手
Piece Chao
Adobe Air的应用与前景(孙颖)
Adobe Air的应用与前景(孙颖)
mimi qiao
Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔
Chih-cheng Wang
Let's talk about Web Design
Let's talk about Web Design
Abby Chiu
Website Pracice Focusing on UX, Chinese
Website Pracice Focusing on UX, Chinese
multiple1902
富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用
luolonghao
常用Js框架比较
常用Js框架比较
Adam Lu
Html5 games
Html5 games
PL dream
Css and Xhtml part01
Css and Xhtml part01
Sean Yeh
HTML5 历史、现状及未来
HTML5 历史、现状及未来
Yongbin Tian
Adobe Indesign CS5 iPad magazine 電子雜誌製作流程
Adobe Indesign CS5 iPad magazine 電子雜誌製作流程
yunjuli
Node.js 進攻桌面開發
Node.js 進攻桌面開發
Fred Chien
Similar to 老成之CreateJS與Flash
(20)
Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)
Adobe air 開發經驗分享
Adobe air 開發經驗分享
Mobile web開發架構與入門
Mobile web開發架構與入門
01 Flex Introduction
01 Flex Introduction
01 Flex Introduction
01 Flex Introduction
Develop
Develop
前端开发的那些事儿
前端开发的那些事儿
GDSC FCU 第1堂 前端新手村 - HTML, CSS, JavaScript介紹
GDSC FCU 第1堂 前端新手村 - HTML, CSS, JavaScript介紹
Codeigniter 3.0 之 30 分鐘就上手
Codeigniter 3.0 之 30 分鐘就上手
Adobe Air的应用与前景(孙颖)
Adobe Air的应用与前景(孙颖)
Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔
Let's talk about Web Design
Let's talk about Web Design
Website Pracice Focusing on UX, Chinese
Website Pracice Focusing on UX, Chinese
富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用
常用Js框架比较
常用Js框架比较
Html5 games
Html5 games
Css and Xhtml part01
Css and Xhtml part01
HTML5 历史、现状及未来
HTML5 历史、现状及未来
Adobe Indesign CS5 iPad magazine 電子雜誌製作流程
Adobe Indesign CS5 iPad magazine 電子雜誌製作流程
Node.js 進攻桌面開發
Node.js 進攻桌面開發
老成之CreateJS與Flash
1.
CreateJS我 與 F
l a s h 的 愛 恨 情 仇
2.
智遠 職業米蟲/SOHO Mike a3804430@hotmail.com
3.
JavaScript ActionScript3 CreateJS Html & css Html5
& css3PHP&MySql RWD Jquery Photoshop Illustrator 3dsMax Unity Flash 吵架
4.
什麼是CreateJS ?
5.
6.
7.
為什麼要用CreateJS ?
8.
9.
推薦原因 1. CreateJS 有很多方便的TOOLS可以方便加速開發。 2.
FLASH CC版本開始有支援轉出HMTL5 canvas,可以在FLASH把動 畫完成後快速在CreateJS 使用,加速開發時間!!! 3. 有完善的範例與文件參考。 4. 開發的 Grant Skinner 以前也是寫AS的,所以設計API時讓他長的跟 AS的API有點像。
10.
只有FLASH CC版本有支援CreateJS 使用???
11.
FLASH CS6版本可以在官網找到CreateJS Toolkit
12.
介紹一下開發CreateJS的工具
13.
Intel® XDK
14.
15.
小推一下喜歡的佈景主題!!!
16.
優點 1. 擁有良好的程式碼提示 2. 有支援許多html5的開發套件 3.
方便的模擬器可以模擬各行動裝置的狀況 4. 還有許多功能可以自己去發現
17.
缺點 1. 沒有中文版 2. 外掛有點少
18.
馬上來試試!
19.
這時一定要來個 Hello world!!!
20.
21.
Flash 與 CreateJS
的結合
22.
23.
第一步,選擇Html5 Canvas開新檔案 第二步,新增一個影片片段元件
24.
第三步,將角色動畫元件都製作在這層影片片段內 利用影格名稱來當作角色的空置狀態,如上圖就有一個 birdFly 跟
boom 兩個狀態。
25.
第四步,將新增的影片片段新增連結, 因為要匯出給CreateJS使用,所以一 定要新增!!!
26.
第五步,前面確定製作 完成後就可以發佈了。
27.
發佈成功後會看到fla存檔路徑下會有多幾個東西 • images ->
剛剛flash再把元件用道的圖片重新編譯出來 • fly.fla -> 這應該不用多說了… • fly.html -> flash編譯出來的html檔案 • fiy.js -> 剛剛所有的動畫以及元件全部轉入這支檔案裡面,這支js等於是元件庫 到這邊就完成了所有我們要在CreateJS裡面所使用的素材準備!!!
28.
先下載CreateJS中的EaselJS
29.
movieclip-0.8.0.min.js 這是元件用的類別,並沒有包含在4大 類別中,所以需要額外引入!!!
30.
開一個新HTML(不要用原本匯出的HTML),引入js的順序 CreateJS movieclip類 (依需求引入) CreateJS碰撞 (依需求引入) FPS檢測器
(依需求引入) CreateJS元件庫
31.
新增Canvas,引入主要程式 Main.js主程式(自己新增的 )
32.
開工啦!!!!!!!!!!!
33.
將原本flash編譯的html中的js抽出來然後修改放入main.js中
34.
撰寫的內容放這邊
35.
撰寫的內容放這邊
36.
原來這麼簡單!!!
37.
gotoAndPlay()
38.
ndgmr.Collision.js 碰撞
39.
使用矩形包圍體來檢測兩個顯示物件是否碰撞 ndgmr.checkRectCollision(物件A,物件B) 使用像素檢測兩個顯示物件是否碰撞(較耗資源) ndgmr.checkPixelCollision(物件A,物件B,alphaThreshold,true) 1. alphaThreshold 是用來設定半透明像素區域是否參予像素檢測預
,設 值是0,設定1表示半透明像素區域不參予檢測。 2. 最後的參數設定true將回傳所有相交的部分的矩形區域,設定false僅回 傳一個1x1的矩形。
40.
給大家小試一下身手 有點累休息一下!!!
41.
TweenJS
42.
43.
44.
http://www.fabiobiondi.com/blog/2012/08/createjs-zoe- create-spritesheets-in-adobe-flash-for-easeljs/ Zoë官方資料
45.
46.
使用Zoë匯出後會看到2個檔案 1. SWF.json ->
剛剛所設定的動畫編碼 2. SWF.png -> 這應該不用多說了…
47.
48.
Json檔案就可以直接拿來用
49.
SpriteSheet類 http://createjs.com/Docs/EaselJS/classes/SpriteSheet.html
50.
51.
52.
Q&A時間
53.
謝謝大家
Download now