Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

From Flash to Canvas - a penchant for black holes


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
  • Be the first to comment

  • Be the first to like this

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