from flash to canvas - a penchant for black holes
DESCRIPTION
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.TRANSCRIPT
a penchant for black holesFrom Flash to Canvas
@flashpatric
THIS PRESENTATIONCanvas 2D context
HistoryToday
How a display list will make your life easierTools for a better Canvas experience
Demo
WHAT’S CANVAS?!
A part of the HTML5 standard
Dynamic bitmap
API’s for drawing and using text
<canvas id=”canvas”></canvas>
ADVANTAGESFrom a Flash developers point of view
Low learning curve
Very good performance in new browsers
Image manipulation down to pixel level
Lots of proven JS-libraries
Pretty high market penetration
3D context – WebGL
GPU acceleration
Powerful along with other new functionsSemanticsOffline & StorageDevice accessConnectivityAudio & video3D graphics & effectsPerformance & IntegrationCSS3
HISTORYFlash vs HTML
1995FutureSplash HTML 3.2 draft, Internet Explorer1996Macromedia I Learned HTML19982000My first Flash applikation, Actionscript 1
HTML 4.01 draft
2003Actionscript 2 Firefox2004 WHATWG
Adobe 2005Actionscript 3 2006
2007 HTMLWG, death of XHTMLAdobe AIR 2008 Google Chrome
Mobile Flash Player, Scepticism 2009 HTML5Adobe AIR for Android & iOS 2010 IE9
Adobe AIR for iOS, Mobile Flash Player 2011 Shifting focus, comunication fail
TODAY
Canvas basic support
71.17%
Opera Mini has partial support for Canvas
HTML5 Canvas 2D market penetration
Text API for Canvas
70.56%
Opera Mini is missing support for Text API
CSS Canvas Drawing
35.56% (Chrome, Safari, iOS Safari, Android
browser)
Full Screen API
0%
Partial support in Firefox, Chrome och Safari
TODAY
IE8 and below is missing support for Canvas
Polyfills can be used for VML in IE7 and IE8
Explorercanvas.js
Everything is not supported, there’s limitations!
- Only linear gradients- Patterns must repeat in both directions- Clipping paths is not supported- Non-uniform scaling does not scale outlines correctly- Really bad performance
Canvas 2D Context in Internet Explorer
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Dive Into HTML5 Canvas</title> <!--[if lt IE 9]> <script src="excanvas.js"></script> <![endif]--></head><body> ... </body></html>
DISADVANTAGESFrom a Flash developers point of view
Polyfills is needed for older browsers
No timeline or API for animations
Bad text rendering
There is no editor for Canvas yet
Drawn objects is only pixels
No display list/scene graph
Adobe Flash Professional CS6
THE OPTIMISTBut there’s hope for Canvas
Polyfills cover some needs
We’re programmers!
Web fonts
Dynamic pixels
Logic display list
WHAT A DISPLAY LIST IS”A hierarchic list with graphical objects
described with its properties”
WHAT A DISPLAY LIST ISDisplay ObjectFamily based – parents and children
Inherits from an abstract class
Renders in relation to its parent
Its properties determines the rendering
Different objects and propertiesStage
Bitmap
Shape
Text
x & y
alpha
scaleX & scaleY
Etc..
THE TOOLS
CREATEJSA suite of Javascript libraries & tools for building
rich, interactive experiences with HTML5
EASELJSBased on the Flash display list
Display list and display list objects
DOM-elements
Mouse events on objects, even onClick and onPress
Touch support
TWEENJSA Javascript library for tweening and animating HTML5
and Javascript properties
SOUNDJSA Javascript library that provides a simple API, and
powerful 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 as
EaselJS sprite sheets that can be used in Canvas and CSS
DEMO!
Adobe Flash Professional CS6Toolkit for CreateJS
Nested animationsSoundsDynamic textsVector objectsArmatureShape morphs
DEMO!
Grant Skinnergskinner.com
Recognized speaker, leader and innovator within interactive media
GtweenRegExr
CreateJSEaselGL
Founder of CREATEJS
