CreateJS - from Flash to Javascript
Upcoming SlideShare
Loading in...5
×
 

CreateJS - from Flash to Javascript

on

  • 1,034 views

 

Statistics

Views

Total Views
1,034
Views on SlideShare
1,034
Embed Views
0

Actions

Likes
9
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CreateJS - from Flash to Javascript CreateJS - from Flash to Javascript Presentation Transcript

  • 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 Skinnerphoto by Andy Polainehttp://gskinner.com/
  • http://www.createjs.com
  • EaselJS..provides a full,hierarchical display list,a core interactionmodel,and helper classes to make working with the HTML5Canvas element much easier.
  • TweenJSA simple but powerful tweening / animation library forJavascript.Part of the CreateJS suite of libraries.
  • SoundJSA Javascript library for working with Audio.Features a simpleinterface as the front end to multiple audio APIs via a pluginmodel.Currently supports HTML5 Audio & Flash.
  • PreloadJS..makes preloading assets & getting aggregate progress eventseasier in JavaScript.It uses XHR2 when available,and falls backto 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
  • DisplayObjectAbstract base class for all display elements in EaselJS.Exposesall of the display properties (ex.x,y,rotation,scaleX,scaleY,skewX,skewY,alpha,shadow,etc) that are common to alldisplay objects.
  • StageThe root level display container for display elements.Each timetick() is called on Stage,it will update and render the displaylist to its associated canvas.
  • 親愛的 Flasher 們,㈲㊒有種回家、熟悉的感動了了嗎..
  • ContainerA nestable display container,which lets you aggregate displayobjects and manipulate them as a group.
  • ㆒㈠㊀一層包㆒㈠㊀一層
  • TextRenders a single line of text to the stage.
  • BitmapDraws an image,video or canvas to the canvas according to itsdisplay properties.
  • ShapeRenders a Graphics object within the context of the display list.
  • GraphicsProvides an easy to use API for drawing vector data.Can beused with Shape,or completely stand alone.
  • FilterThe base filter class that other filters (ex.BoxBlurFilter,ColorMatrixFilter,etc) extend.
  • TickerProvides a pausable centralized tick manager for ticking Stageinstances or other time based code.
  • RectangleRepresents a rectangle as defined by the points (x,y) and (x+width,y+height).
  • SpriteSheetEncapsulates all the data associated with a sprite sheet to beused with BitmapAnimation.
  • 動畫!
  • But!
  • 好啦,我知道你們㊢寫程式的都都很厲害..
  • 我是美術設計師,只會畫圖以及用 Flash 拉拉時間軸做動畫,㊢寫些簡單的 gotoAndPlay( )
  • 工具包?!
  • ZoëA stand alone tool for exporting SWF animations as EaselJSsprite 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✓ Mobilehttp://www.eddie.com.twhttp://blog.eddie.com.twhttps://www.facebook.com/eddiekaohttps://twitter.com/eddiekaoeddie@digik.com.tw+886-928-617-687