From Flash to Canvas  a penchant for black holes        @flashpatric
THIS PRESENTATION            Canvas 2D context                  History                   TodayHow a display list will mak...
WHAT’S CANVAS?!  <canvas id=”canvas”></canvas> A part of the HTML5 standard        Dynamic bitmap API’s for drawing and us...
ADVANTAGES                      From a Flash developers point of viewLow learning curve                       Powerful alo...
HISTORY                                  Flash vs HTML                            FutureSplash    1995   HTML 3.2 draft, I...
TODAY                   HTML5 Canvas 2D market penetrationCanvas basic support                          Text API for Canva...
TODAY                             Canvas 2D Context in Internet ExplorerIE8 and below is missing support for Canvas       ...
DISADVANTAGES                 From a Flash developers point of viewPolyfills is needed for older browsers   There is no edi...
THE OPTIMIST                       But there’s hope for CanvasPolyfills cover some needs           Adobe Flash Professional...
WHAT A DISPLAY LIST IS”A hierarchic list with graphical objects      described with its properties”
WHAT A DISPLAY LIST ISDisplay Object                            Different objects and propertiesFamily based – parents and...
THE TOOLS
CREATEJSA suite of Javascript libraries & tools for building     rich, interactive experiences with HTML5
EASELJS          Based on the Flash display list        Display list and display list objects                  DOM-element...
TWEENJSA Javascript library for tweening and animating HTML5                 and Javascript properties
SOUNDJS  A Javascript library that provides a simple API, andpowerful features to make working with audio a breeze
PRELOADJSA Javascript library that lets you manage and co-ordinate                   the loading of assets
ZOË  A stand alone tool for exporting SWF animations asEaselJS sprite sheets that can be used in Canvas and CSS
DEMO!
Adobe Flash Professional CS6         Toolkit for CreateJS                  Nested animations                  Sounds      ...
DEMO!
Founder of CREATEJS                            Grant Skinner                                  gskinner.comRecognized speak...
THANKS!    Patric JonssonInteractive Developer      @flashpatric flashpatric@gmail.com
Upcoming SlideShare
Loading in...5
×

From Flash to Canvas - a penchant for black holes

1,382

Published on

This session will cover what HTML5 developers can benefit from knowing its way around in the world of Flash and ActionScript. The tools that could be used for a better Canvas experience and foremost how the display list will ease your burden.

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,382
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

From Flash to Canvas - a penchant for black holes

  1. 1. From Flash to Canvas a penchant for black holes @flashpatric
  2. 2. THIS PRESENTATION Canvas 2D context History TodayHow a display list will make your life easier Tools for a better Canvas experience Demo
  3. 3. WHAT’S CANVAS?! <canvas id=”canvas”></canvas> A part of the HTML5 standard Dynamic bitmap API’s for drawing and using text
  4. 4. ADVANTAGES From a Flash developers point of viewLow learning curve Powerful along with other new functionsVery good performance in new browsers Semantics Offline & StorageImage manipulation down to pixel level Device accessLots of proven JS-libraries ConnectivityPretty high market penetration Audio & video 3D graphics & effects3D context – WebGL Performance & IntegrationGPU acceleration CSS3
  5. 5. HISTORY Flash vs HTML FutureSplash 1995 HTML 3.2 draft, Internet Explorer Macromedia 1996 I Learned HTML 1998 HTML 4.01 draftMy first Flash applikation, Actionscript 1 2000 Actionscript 2 2003 Firefox 2004 WHATWG Adobe 2005 Actionscript 3 2006 2007 HTMLWG, death of XHTML Adobe AIR 2008 Google Chrome Mobile Flash Player, Scepticism 2009 HTML5 Adobe AIR for Android & iOS 2010 IE9Adobe AIR for iOS, Mobile Flash Player 2011 Shifting focus, comunication fail
  6. 6. TODAY HTML5 Canvas 2D market penetrationCanvas basic support Text API for Canvas71.17% 70.56%Opera Mini has partial support for Canvas Opera Mini is missing support for Text APICSS Canvas Drawing Full Screen API35.56% (Chrome, Safari, iOS Safari, Android 0%browser) Partial support in Firefox, Chrome och Safari
  7. 7. TODAY Canvas 2D Context in Internet ExplorerIE8 and below is missing support for Canvas <!DOCTYPE html> <html>Polyfills can be used for VML in IE7 and IE8 <head> <meta charset="utf-8">Explorercanvas.js <title>Dive Into HTML5 Canvas</title> <!--[if lt IE 9]>Everything is not supported, there’s limitations! <script src="excanvas.js"></script> - Only linear gradients <![endif]--> - Patterns must repeat in both directions </head> - Clipping paths is not supported <body> ... </body> - Non-uniform scaling does not scale outlines correctly </html> - Really bad performance
  8. 8. DISADVANTAGES From a Flash developers point of viewPolyfills is needed for older browsers There is no editor for Canvas yetNo timeline or API for animations Drawn objects is only pixelsBad text rendering No display list/scene graph
  9. 9. THE OPTIMIST But there’s hope for CanvasPolyfills cover some needs Adobe Flash Professional CS6We’re programmers! Dynamic pixelsWeb fonts Logic display list
  10. 10. WHAT A DISPLAY LIST IS”A hierarchic list with graphical objects described with its properties”
  11. 11. WHAT A DISPLAY LIST ISDisplay Object Different objects and propertiesFamily based – parents and children Stage x&yInherits from an abstract class Bitmap alphaRenders in relation to its parent Shape scaleX & scaleYIts properties determines the rendering Text Etc..
  12. 12. THE TOOLS
  13. 13. CREATEJSA suite of Javascript libraries & tools for building rich, interactive experiences with HTML5
  14. 14. EASELJS Based on the Flash display list Display list and display list objects DOM-elementsMouse events on objects, even onClick and onPress Touch support
  15. 15. TWEENJSA Javascript library for tweening and animating HTML5 and Javascript properties
  16. 16. SOUNDJS A Javascript library that provides a simple API, andpowerful features to make working with audio a breeze
  17. 17. PRELOADJSA Javascript library that lets you manage and co-ordinate the loading of assets
  18. 18. ZOË A stand alone tool for exporting SWF animations asEaselJS sprite sheets that can be used in Canvas and CSS
  19. 19. DEMO!
  20. 20. Adobe Flash Professional CS6 Toolkit for CreateJS Nested animations Sounds Dynamic texts Vector objects Armature Shape morphs
  21. 21. DEMO!
  22. 22. Founder of CREATEJS Grant Skinner gskinner.comRecognized speaker, leader and innovator within interactive media Gtween RegExr CreateJS EaselGL
  23. 23. THANKS! Patric JonssonInteractive Developer @flashpatric flashpatric@gmail.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×