SlideShare a Scribd company logo
1 of 89
Download to read offline
CreateJS
從 Flash 到 JavaScript
I’m a Ruby guy
≈ 4 years
but also a Flash guy
≈ 8 years
目前狀狀態
80% iOS app,20% Ruby / Rails
CreateJS
從 Flash 到 JavaScript
在開始之前..
武林林㆗㊥中,
曾流流傳著許多的 Flash 殺殺手..
Flash 真的死了了嗎?
可能吧 :)
Flash Play != Flash
如果你曾經是個 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 是 真.大神神㊢寫的!
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>
哈囉,世界!
哈囉,世界
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.
動畫!
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
尋找..
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
eddie@digik.com.tw
+886-928-617-687

More Related Content

Similar to CreateJS - from Flash to Javascript

The Glass Class Lecture 5: Prototyping with Processing
The Glass Class Lecture 5: Prototyping with ProcessingThe Glass Class Lecture 5: Prototyping with Processing
The Glass Class Lecture 5: Prototyping with Processing
Mark Billinghurst
 
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
Simon Willison
 

Similar to CreateJS - from Flash to Javascript (20)

HTML5 Gaming
HTML5 GamingHTML5 Gaming
HTML5 Gaming
 
An introduction to the create js suite
An introduction to the create js suiteAn introduction to the create js suite
An introduction to the create js suite
 
Haxe: What Makes It Cool
Haxe: What Makes It CoolHaxe: What Makes It Cool
Haxe: What Makes It Cool
 
The Glass Class Lecture 5: Prototyping with Processing
The Glass Class Lecture 5: Prototyping with ProcessingThe Glass Class Lecture 5: Prototyping with Processing
The Glass Class Lecture 5: Prototyping with Processing
 
From Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holesFrom Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holes
 
JavaFX introduction
JavaFX introductionJavaFX introduction
JavaFX introduction
 
Marcelo Camargo - Let's dive into Babel: how everything works
Marcelo Camargo - Let's dive into Babel: how everything worksMarcelo Camargo - Let's dive into Babel: how everything works
Marcelo Camargo - Let's dive into Babel: how everything works
 
Svcc Building Rich Applications with Groovy's SwingBuilder
Svcc Building Rich Applications with Groovy's SwingBuilderSvcc Building Rich Applications with Groovy's SwingBuilder
Svcc Building Rich Applications with Groovy's SwingBuilder
 
Scripting with Java FX - Cédric Tabin - December 2007
Scripting with Java FX - Cédric Tabin - December 2007Scripting with Java FX - Cédric Tabin - December 2007
Scripting with Java FX - Cédric Tabin - December 2007
 
Bringing classical OOP into JavaScript
Bringing classical OOP into JavaScriptBringing classical OOP into JavaScript
Bringing classical OOP into JavaScript
 
As Triage Code Camp
As Triage Code CampAs Triage Code Camp
As Triage Code Camp
 
Intro to JavaFX & Widget FX
Intro to JavaFX & Widget FXIntro to JavaFX & Widget FX
Intro to JavaFX & Widget FX
 
EuRuKo JRuby Talk 2008
EuRuKo JRuby Talk 2008EuRuKo JRuby Talk 2008
EuRuKo JRuby Talk 2008
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
Java fx
Java fxJava fx
Java fx
 
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
 
Java Fx Overview Tech Tour
Java Fx Overview Tech TourJava Fx Overview Tech Tour
Java Fx Overview Tech Tour
 
Starting with Scala : Frontier Developer's Meetup December 2010
Starting with Scala : Frontier Developer's Meetup December 2010Starting with Scala : Frontier Developer's Meetup December 2010
Starting with Scala : Frontier Developer's Meetup December 2010
 
Programming with JavaFX
Programming with JavaFXProgramming with JavaFX
Programming with JavaFX
 
Declarative and standards-based web application development with the Ample SDK
Declarative and standards-based web application development with the Ample SDKDeclarative and standards-based web application development with the Ample SDK
Declarative and standards-based web application development with the Ample SDK
 

More from Eddie Kao (18)

Let's Learn Ruby - Basic
Let's Learn Ruby - BasicLet's Learn Ruby - Basic
Let's Learn Ruby - Basic
 
Vim
VimVim
Vim
 
from Ruby to Objective-C
from Ruby to Objective-Cfrom Ruby to Objective-C
from Ruby to Objective-C
 
Code Reading
Code ReadingCode Reading
Code Reading
 
There is something about Event
There is something about EventThere is something about Event
There is something about Event
 
Flash Ecosystem and Open Source
Flash Ecosystem and Open SourceFlash Ecosystem and Open Source
Flash Ecosystem and Open Source
 
Happy Programming with CoffeeScript
Happy Programming with CoffeeScriptHappy Programming with CoffeeScript
Happy Programming with CoffeeScript
 
Ruby without rails
Ruby without railsRuby without rails
Ruby without rails
 
CoffeeScript-Ruby-Tuesday
CoffeeScript-Ruby-TuesdayCoffeeScript-Ruby-Tuesday
CoffeeScript-Ruby-Tuesday
 
CoffeeScript
CoffeeScriptCoffeeScript
CoffeeScript
 
API Design
API DesignAPI Design
API Design
 
測試
測試測試
測試
 
3rd AS Study Group
3rd AS Study Group3rd AS Study Group
3rd AS Study Group
 
iOS Game Development with Cocos2d
iOS Game Development with Cocos2diOS Game Development with Cocos2d
iOS Game Development with Cocos2d
 
AS3讀書會(行前準備)
AS3讀書會(行前準備)AS3讀書會(行前準備)
AS3讀書會(行前準備)
 
Misunderstanding about flash
Misunderstanding about flashMisunderstanding about flash
Misunderstanding about flash
 
Refactoring in AS3
Refactoring in AS3Refactoring in AS3
Refactoring in AS3
 
AS3 Better Practices
AS3 Better PracticesAS3 Better Practices
AS3 Better Practices
 

Recently uploaded

Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Recently uploaded (20)

Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 

CreateJS - from Flash to Javascript