From Flash to Canvas - a penchant for black holes

From Flash to Canvas a penchant for black holes @ﬂashpatric

THIS PRESENTATION Canvas 2D context History TodayHow a display list will make your life easier Tools for a better Canvas experience Demo

WHAT’S CANVAS?! <canvas id=”canvas”></canvas> A part of the HTML5 standard Dynamic bitmap API’s for drawing and using text

ADVANTAGES From a Flash developers point of viewLow learning curve Powerful along with other new functionsVery good performance in new browsers Semantics Ofﬂine & 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

HISTORY Flash vs HTML FutureSplash 1995 HTML 3.2 draft, Internet Explorer Macromedia 1996 I Learned HTML 1998 HTML 4.01 draftMy ﬁrst 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

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

TODAY Canvas 2D Context in Internet ExplorerIE8 and below is missing support for Canvas <!DOCTYPE html> <html>Polyﬁlls can be used for VML in IE7 and IE8 <head> <meta charset="utf-8">Explorercanvas.js <title>Dive Into HTML5 Canvas</title>  - 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

DISADVANTAGES From a Flash developers point of viewPolyﬁlls 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

THE OPTIMIST But there’s hope for CanvasPolyﬁlls cover some needs Adobe Flash Professional CS6We’re programmers! Dynamic pixelsWeb fonts Logic display list

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 children Stage x&yInherits from an abstract class Bitmap alphaRenders in relation to its parent Shape scaleX & scaleYIts properties determines the rendering Text Etc..

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-elementsMouse events on objects, even onClick and onPress Touch support

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

Adobe Flash Professional CS6 Toolkit for CreateJS Nested animations Sounds Dynamic texts Vector objects Armature Shape morphs

Founder of CREATEJS Grant Skinner gskinner.comRecognized speaker, leader and innovator within interactive media Gtween RegExr CreateJS EaselGL

THANKS! Patric JonssonInteractive Developer @ﬂashpatric ﬂashpatric@gmail.com

http://flashpatric.com	125
http://localhost	1
http://www.linkedin.com	1

From Flash to Canvas - a penchant for black holes

by Patric Lanhed

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 127

Statistics