From Flash to Canvas - a penchant for black holes
•
0 j'aime•1,259 vues
From Flash to Canvas discusses the advantages of using the HTML5 Canvas element over Adobe Flash for building interactive graphics. It provides a brief history of both technologies and their evolution. Today, Canvas has widespread browser support, though text rendering and some features lag behind Flash. Tools like CreateJS, EaselJS, TweenJS and PreloadJS help make Canvas development easier by providing a display list, animations, loading and other capabilities. The presentation demonstrates these tools with an example animation exported from Flash Professional to Canvas using the Zoe tool.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
Similaire à From Flash to Canvas - a penchant for black holes
Similaire à From Flash to Canvas - a penchant for black holes (20)
Dernier
Dernier (20)
From Flash to Canvas - a penchant for black holes
- 1. From Flash to Canvas a penchant for black holes @flashpatric
- 2. THIS PRESENTATION Canvas 2D context History Today How a display list will make your life easier Tools for a better Canvas experience Demo
- 3. WHAT’S CANVAS?! <canvas id=”canvas”></canvas> A part of the HTML5 standard Dynamic bitmap API’s for drawing and using text
- 4. ADVANTAGES From a Flash developers point of view Low learning curve Powerful along with other new functions Very good performance in new browsers Semantics Offline & Storage Image manipulation down to pixel level Device access Lots of proven JS-libraries Connectivity Pretty high market penetration Audio & video 3D graphics & effects 3D context – WebGL Performance & Integration GPU acceleration CSS3
- 5. HISTORY Flash vs HTML FutureSplash 1995 HTML 3.2 draft, Internet Explorer Macromedia 1996 I Learned HTML 1998 HTML 4.01 draft My 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 IE9 Adobe AIR for iOS, Mobile Flash Player 2011 Shifting focus, comunication fail
- 6. TODAY HTML5 Canvas 2D market penetration Canvas basic support Text API for Canvas 71.17% 70.56% Opera Mini has partial support for Canvas Opera Mini is missing support for Text API CSS Canvas Drawing Full Screen API 35.56% (Chrome, Safari, iOS Safari, Android 0% browser) Partial support in Firefox, Chrome och Safari
- 7. TODAY Canvas 2D Context in Internet Explorer IE8 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. DISADVANTAGES From a Flash developers point of view Polyfills is needed for older browsers There is no editor for Canvas yet No timeline or API for animations Drawn objects is only pixels Bad text rendering No display list/scene graph
- 9. THE OPTIMIST But there’s hope for Canvas Polyfills cover some needs Adobe Flash Professional CS6 We’re programmers! Dynamic pixels Web fonts Logic display list
- 10. WHAT A DISPLAY LIST IS ”A hierarchic list with graphical objects described with its properties”
- 11. WHAT A DISPLAY LIST IS Display Object Different objects and properties Family based – parents and children Stage x&y Inherits from an abstract class Bitmap alpha Renders in relation to its parent Shape scaleX & scaleY Its properties determines the rendering Text Etc..
- 12. THE TOOLS
- 13. CREATEJS A suite of Javascript libraries & tools for building rich, interactive experiences with HTML5
- 14. EASELJS Based on the Flash display list Display list and display list objects DOM-elements Mouse events on objects, even onClick and onPress Touch support
- 15. TWEENJS A Javascript library for tweening and animating HTML5 and Javascript properties
- 16. SOUNDJS A Javascript library that provides a simple API, and powerful features to make working with audio a breeze
- 17. PRELOADJS A Javascript library that lets you manage and co-ordinate the loading of assets
- 18. ZOË A stand alone tool for exporting SWF animations as EaselJS sprite sheets that can be used in Canvas and CSS
- 19. DEMO!
- 20. Adobe Flash Professional CS6 Toolkit for CreateJS Nested animations Sounds Dynamic texts Vector objects Armature Shape morphs
- 21. DEMO!
- 22. Founder of CREATEJS Grant Skinner gskinner.com Recognized speaker, leader and innovator within interactive media Gtween RegExr CreateJS EaselGL
- 23. THANKS! Patric Jonsson Interactive Developer @flashpatric flashpatric@gmail.com