Web design iV

Transcript

1. web design IV WEI, HUANG e-Mail: ga895479@gmail.com
2. Contents • Create JS – Introduction to easel JS • Stage • Shape • Bitmap • Graphics • Event • Ticker • Shadow • Sprite – Other
3. Easel.js • 由於多數瀏覽器逐漸淘汰 flash 轉向支援 HTML 5 ， 因此 Abode 推出一套 Create JS 作為提供給以往習 慣使用 Flash 語法開發的使用者加速上手 html 5 下 的 canvas 開發，而 Easel 則是 create.js 提供的其中 一種負責繪圖的函式庫。
4. Q & A • Q. 為何不寫原生的 canvas 語法 ? A. 語法較長，必須實作一些圖像處理。 • Q. 我沒學過 flash 可以玩嗎? – A. 可以，大致上理解其類別作用使用這無太大困難。 • Q. 有其他類似的 library 嗎? – A. P5.js 、 processing.js ……
5. Eeael.js • Create 本身是一個大物件內容包山包海，諸如 Bitmap、Shape、Event … • 怎麼用? – CDN 大招開下去，注意 create 採用 jQuery 語法做為基底， – 因此引入 create.js 時，必須同時引入 jQuery 並且需要再 easel 前引入。
6. Stage • 建立一個主舞台，每個 Stage 對應到一個 Canvas ID • new createjs.Stage(‘canvas’); • addChild() – 將欲再 Stage 顯示的物件實體加入
7. Shape • 產生幾何圖形 • 將幾何圖形放入 Stage 中製作 • 須配合 Graphics
8. Bitmap • 加入一個點陣圖物件 • 可接受 png jpg … 格式 • 可對 Bitmap 進行相對的影像處理
9. Graphics • 圖形物件，產生出一系列圖形 • 包含線、方、圓…
10. Event • 對於物件實體所對應的事件處理
11. Ticker • 計時器，提供物件顯示更新時用
12. Shadow • 創建陰影
13. Sprite • 製作動畫使用
14. 練習 & 作業 • 練習 (一) – 製作一個可以顯示數個物件並可於平臺上相互碰撞 • 作業 (一) – 製作打磚塊遊戲 • 作業 (二) – 圖形解鎖