Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web design iV
Search
Frank
July 25, 2016
Programming
0
160
Web design iV
Frank
July 25, 2016
Tweet
Share
More Decks by Frank
See All by Frank
Web design III
frankweihuang
0
240
Web design II
frankweihuang
0
370
Web design
frankweihuang
0
250
Other Decks in Programming
See All in Programming
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
250
Ruby Function Composition
bkuhlmann
1
330
Folding Cheat Sheet #2
philipschwarz
PRO
0
120
Ruby GitHub Packages
bkuhlmann
0
630
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
800
Ruby Pattern Matching
bkuhlmann
0
920
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
雑に思考を整理する技術と効能
konifar
58
28k
Folding Cheat Sheet #3
philipschwarz
PRO
0
120
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
0
180
Featured
See All Featured
Visualization
eitanlees
135
14k
GitHub's CSS Performance
jonrohan
1024
450k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
The Cost Of JavaScript in 2023
addyosmani
15
3.8k
How to train your dragon (web standard)
notwaldorf
72
5.1k
Embracing the Ebb and Flow
colly
79
4.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
354
18k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
259
12k
Agile that works and the tools we love
rasmusluckow
324
20k
How GitHub (no longer) Works
holman
304
140k
Transcript
web design IV WEI, HUANG e-Mail:
[email protected]
Contents • Create JS – Introduction to easel JS •
Stage • Shape • Bitmap • Graphics • Event • Ticker • Shadow • Sprite – Other
Easel.js • 由於多數瀏覽器逐漸淘汰 flash 轉向支援 HTML 5 , 因此 Abode
推出一套 Create JS 作為提供給以往習 慣使用 Flash 語法開發的使用者加速上手 html 5 下 的 canvas 開發,而 Easel 則是 create.js 提供的其中 一種負責繪圖的函式庫。
Q & A • Q. 為何不寫原生的 canvas 語法 ? A.
語法較長,必須實作一些圖像處理。 • Q. 我沒學過 flash 可以玩嗎? – A. 可以,大致上理解其類別作用使用這無太大困難。 • Q. 有其他類似的 library 嗎? – A. P5.js 、 processing.js ……
Eeael.js • Create 本身是一個大物件內容包山包海,諸如 Bitmap、Shape、Event … • 怎麼用? – CDN
大招開下去,注意 create 採用 jQuery 語法做為基底, – 因此引入 create.js 時,必須同時引入 jQuery 並且需要再 easel 前引入。
Stage • 建立一個主舞台,每個 Stage 對應到一個 Canvas ID • new createjs.Stage(‘canvas’);
• addChild() – 將欲再 Stage 顯示的物件實體加入
Shape • 產生幾何圖形 • 將幾何圖形放入 Stage 中製作 • 須配合 Graphics
Bitmap • 加入一個點陣圖物件 • 可接受 png jpg … 格式 •
可對 Bitmap 進行相對的影像處理
Graphics • 圖形物件,產生出一系列圖形 • 包含線、方、圓…
Event • 對於物件實體所對應的事件處理
Ticker • 計時器,提供物件顯示更新時用
Shadow • 創建陰影
Sprite • 製作動畫使用
練習 & 作業 • 練習 (一) – 製作一個可以顯示數個物件並可於平臺上相互碰撞 • 作業
(一) – 製作打磚塊遊戲 • 作業 (二) – 圖形解鎖