1.CreateJS Flash JavaScript

2. Im a Ruby guy 4 years 3. but also a Flash guy 8 years 4. 80% iOS app,20% Ruby / Rails 5. CreateJS Flash JavaScript 6. .. 7. , Flash .. 8. Flash ? 9. :) 10. Flash Play != Flash 11. Flash Flash ... 12. HTML5 ? 13. HTML5 Canvas ?! 14. Grant Skinnerphoto by Andy Polainehttp://gskinner.com/ 15. http://www.createjs.com 16. EaselJS..provides a full,hierarchical display list,a core interactionmodel,and helper classes to make working with the HTML5Canvas element much easier. 17. TweenJSA simple but powerful tweening / animation library forJavascript.Part of the CreateJS suite of libraries. 18. 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. 19. PreloadJS..makes preloading assets & getting aggregate progress eventseasier in JavaScript.It uses XHR2 when available,and falls backto tag-based loading when not. 20. ? 21. CreateJS ! 22. Flash-like API 23. ! 24. ? 25. MIT 26. Flash == Commercial software 27. Flash != Not Open 28. 29. .. CDN .. 30. ! 31. 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(); 32. !"Stage" "addChild"..?! 33. .. :) 34. 35. 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(); 36. 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(); 37. 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(); 38. "Graphics""Shape"..?! 39. ! 40. !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();} 41. Classes in EaselJS 42. 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. 43. 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. 44. Flasher ,.. 45. ContainerA nestable display container,which lets you aggregate displayobjects and manipulate them as a group. 46. 47. TextRenders a single line of text to the stage. 48. BitmapDraws an image,video or canvas to the canvas according to itsdisplay properties. 49. ShapeRenders a Graphics object within the context of the display list. 50. GraphicsProvides an easy to use API for drawing vector data.Can beused with Shape,or completely stand alone. 51. FilterThe base lter class that other lters (ex.BoxBlurFilter,ColorMatrixFilter,etc) extend. 52. TickerProvides a pausable centralized tick manager for ticking Stageinstances or other time based code. 53. RectangleRepresents a rectangle as dened by the points (x,y) and (x+width,y+height). 54. SpriteSheetEncapsulates all the data associated with a sprite sheet to beused with BitmapAnimation. 55. ! 56. But! 57. .. 58. , Flash , gotoAndPlay( ) 59. ?! 60. ZoA stand alone tool for exporting SWF animations as EaselJSsprite sheets that can be used in Canvas and CSS. 61. CreateJS toolkits 62. ?! 63. ?! 64. ?! 65. javascript libs.. 66. ,, 67. ?! 68. .. XD 69. photo by North Carolina Digital Heritage Center 70. -Senior art designer-Mobile app developer.. 71. 750+ attendees in 2013 72. 750+ attendees in 2013 73. 450 tickets sold out in 4 mins 74. WebConf Taiwan 2014 75. Will be held in Jan 2014 76. 850+ in 2014,hopefully. 77. All about web development 78. fun with us :) 79. Q & A 80. 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