Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
CreateJS - from Flash to Javascript
高見龍
May 19, 2013
Programming
27
3.8k
CreateJS - from Flash to Javascript
高見龍
May 19, 2013
Tweet
Share
More Decks by 高見龍
See All by 高見龍
閱讀原始碼 - 再戰十年的 jQuery
eddie
1
460
Learn JavaScript Well
eddie
1
1.1k
How to Learn Web Framework Correctly
eddie
4
1.8k
about-5xruby
eddie
0
90
Ruby on Rails 2018 年進化論
eddie
0
120
10 years in learning Ruby
eddie
5
1.3k
傳說中可以治百病的區塊鏈是怎麼一回事?
eddie
0
1.7k
Git Branch
eddie
0
320
Refactoring (Ruby edition)
eddie
0
220
Other Decks in Programming
See All in Programming
Git Rebase
bkuhlmann
10
1.2k
23年のJavaトレンドは?Quarkusで理解するコンテナネイティブJava
tatsuya1bm
1
140
Zynq MP SoC で楽しむエッジコンピューティング ~RTLプログラミングのススメ~
ryuz88
0
410
Makuakeの認証基盤とRe-Architectureチーム
bmf_san
0
650
Unityでのチート対策を簡単かつ高品質に行う為の取り組み
trapezoid
2
1.9k
Listかもしれない
irof
1
290
エンジニア向け会社紹介資料/engineer-recruiting-pitch
xmile
PRO
0
120
Remix + Cloudflare Pages + D1 で ポケモン SV のレンタルチームを検索できるアプリを作ってみた
kuroppe1819
4
1.4k
Hasura の Relationship と権限管理
karszawa
0
180
PHPDocにおける配列の型定義を少し知る
shimabox
1
140
レガシーフレームワークからの移行
ug
0
130
An Advanced Introduction to R
nicetak
0
1.9k
Featured
See All Featured
A better future with KSS
kneath
230
16k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
22
1.7k
Principles of Awesome APIs and How to Build Them.
keavy
117
15k
YesSQL, Process and Tooling at Scale
rocio
159
12k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
109
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
50k
Statistics for Hackers
jakevdp
785
210k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
38
3.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
22
1.4k
Gamification - CAS2011
davidbonilla
75
4.1k
Bash Introduction
62gerente
601
210k
Design by the Numbers
sachag
271
18k
Transcript
CreateJS 從 Flash 到 JavaScript
None
I’m a Ruby guy ≈ 4 years
but also a Flash guy ≈ 8 years
目前狀狀態 80% iOS app, 20% Ruby / Rails
None
None
CreateJS 從 Flash 到 JavaScript
在開始之前..
武林林㆗㊥中, 曾流流傳著許多的 Flash 殺殺手..
Flash 真的死了了嗎?
可能吧 :)
Flash Play != Flash
None
如果你曾經是個 Flash 程式設計師 或是現在還靠 Flash 討生活...
該㈻㊫學 HTML5 嗎?
聽說說說 HTML5 的 Canvas ㈲㊒有點難?!
Grant Skinner photo by Andy Polaine http://gskinner.com/
http://www.createjs.com
EaselJS .. provides a full, hierarchical display list, a core
interaction model, and helper classes to make working with the HTML5 Canvas element much easier.
TweenJS A simple but powerful tweening / animation library for
Javascript. Part of the CreateJS suite of libraries.
SoundJS A Javascript library for working with Audio. Features a
simple interface as the front end to multiple audio APIs via a plugin model. Currently supports HTML5 Audio & Flash.
PreloadJS .. makes preloading assets & getting aggregate progress events
easier in JavaScript. It uses XHR2 when available, and falls back to tag-based loading when not.
原因?
CreateJS 是 真.大神神㊢寫的!
None
None
Flash-like 的 API
㈲㊒有文件、範例例!
授權?
MIT
Flash == Commercial software
Flash != Not Open
安裝
✴ 就放在你的專案裡裡.. ✴ 或是直接從 CDN 引入.. 安裝 <script src="lib/createjs.js"></script> <script
src="http://code.createjs.com/createjs-2013.05.14.min.js"> </script>
None
哈囉,世界!
哈囉,世界 var canvas = document.getElementById("demo_canvas"); var stage = new createjs.Stage(canvas);
var text = new createjs.Text("Hello, World"); text.color = "white"; text.font = "25px Ariel"; text.x = 50; text.y = 50; stage.addChild(text); stage.update();
等等! 剛剛的程式碼裡裡面是不不是㈲㊒有看到 "Stage" 跟 "addChild"..?!
應該是巧合吧 反正程式都都嘛長得很像.. :)
小圈圈
畫圈圈 var canvas = document.getElementById("demo_canvas"); var stage = new createjs.Stage(canvas);
var graphic = new createjs.Graphics(); graphic.beginStroke("white"); graphic.setStrokeStyle(5); graphic.beginFill("red"); graphic.drawCircle(100, 100, 50); var shape = new createjs.Shape(graphic); stage.addChild(shape); stage.update();
var canvas = document.getElementById("demo_canvas"); var stage = new createjs.Stage(canvas); var
graphic = new createjs.Graphics(); graphic.beginStroke("white") .setStrokeStyle(5) .beginFill("red") .drawCircle(100, 100, 50); var shape = new createjs.Shape(graphic); stage.addChild(shape); stage.update(); 畫圈圈
var canvas = document.getElementById("demo_canvas"); var stage = new createjs.Stage(canvas); var
graphic = new createjs.Graphics(); graphic.s("white") .ss(5) .f("red") .dc(100, 100, 50); var shape = new createjs.Shape(graphic); stage.addChild(shape); stage.update(); 畫圈圈
親愛的, 剛剛是不不是㈲㊒有看到 "Graphics" 跟 "Shape",還㈲㊒有㆒㈠㊀一些熟悉的畫線、 畫圈圈跟著色的方法..?!
旋轉吧,方塊!
旋轉吧,方塊! var stage, shape; function init() { var canvas =
document.getElementById("demo_canvas"); stage = new createjs.Stage(canvas); var g = new createjs.Graphics(); g.s("white").ss(5).f("red").dr(0, 0, 100, 100); shape = new createjs.Shape(g); shape.x = shape.y = 150; shape.regX = shape.regY = 50; stage.addChild(shape); stage.update(); createjs.Ticker.setFPS(30); createjs.Ticker.addEventListener("tick", tickHandler); } function tickHandler (event) { shape.rotation += 4; stage.update(); }
Classes in EaselJS
DisplayObject Abstract base class for all display elements in EaselJS.
Exposes all of the display properties (ex. x, y, rotation, scaleX, scaleY, skewX, skewY, alpha, shadow, etc) that are common to all display objects.
Stage The root level display container for display elements. Each
time tick() is called on Stage, it will update and render the display list to its associated canvas.
親愛的 Flasher 們, ㈲㊒有種回家、熟悉的感動了了嗎..
Container A nestable display container, which lets you aggregate display
objects and manipulate them as a group.
㆒㈠㊀一層包㆒㈠㊀一層
Text Renders a single line of text to the stage.
Bitmap Draws an image, video or canvas to the canvas
according to its display properties.
Shape Renders a Graphics object within the context of the
display list.
Graphics Provides an easy to use API for drawing vector
data. Can be used with Shape, or completely stand alone.
Filter The base filter class that other filters (ex. BoxBlurFilter,
ColorMatrixFilter, etc) extend.
Ticker Provides a pausable centralized tick manager for ticking Stage
instances or other time based code.
Rectangle Represents a rectangle as defined by the points (x,
y) and (x +width, y+height).
SpriteSheet Encapsulates all the data associated with a sprite sheet
to be used with BitmapAnimation.
動畫!
None
But!
好啦, 我知道你們㊢寫程式的都都很厲害..
我是美術設計師, 只會畫圖以及用 Flash 拉拉時間軸 做動畫,㊢寫些簡單的 gotoAndPlay( )
工具包?!
Zoë A stand alone tool for exporting SWF animations as
EaselJS sprite sheets that can be used in Canvas and CSS.
CreateJS toolkits
改得動嗎?!
匯出檔案大小?!
效能?!
我沒㈲㊒有評估過所㈲㊒有的 javascript libs..
我只知道, ㊢寫的出來來的東西, 才㈲㊒有所謂的效能可以調校
瀏覽器相容性?!
其實我不不是很在乎.. XD
工商服務 photo by North Carolina Digital Heritage Center
- Senior art designer - Mobile app developer 尋找..
None
750+ attendees in 2013
750+ attendees in 2013
450 tickets sold out in 4 mins
WebConf Taiwan 2014
Will be held in Jan 2014
850+ in 2014, hopefully.
All about web development
fun with us :)
Q & A
Contact ✓ Website ✓ Blog ✓ Facebook ✓ Twitter ✓
Email ✓ Mobile http://www.eddie.com.tw http://blog.eddie.com.tw https://www.facebook.com/eddiekao https://twitter.com/eddiekao
[email protected]
+886-928-617-687