From Flash to Canvas - a penchant for black holes
Upcoming SlideShare
Loading in...5
×
 

From Flash to Canvas - a penchant for black holes

on

  • 1,374 views

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 ...

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.

Statistics

Views

Total Views
1,374
Views on SlideShare
1,225
Embed Views
149

Actions

Likes
0
Downloads
7
Comments
0

4 Embeds 149

http://flashpatric.com 145
http://www.linkedin.com 2
http://localhost 1
https://twitter.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

From Flash to Canvas - a penchant for black holes From Flash to Canvas - a penchant for black holes Presentation Transcript

  • From Flash to Canvas a penchant for black holes @flashpatric
  • 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 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
  • 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
  • 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>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
  • 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
  • THE OPTIMIST But there’s hope for CanvasPolyfills 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
  • DEMO!
  • Adobe Flash Professional CS6 Toolkit for CreateJS Nested animations Sounds Dynamic texts Vector objects Armature Shape morphs
  • DEMO!
  • Founder of CREATEJS Grant Skinner gskinner.comRecognized speaker, leader and innovator within interactive media Gtween RegExr CreateJS EaselGL
  • THANKS! Patric JonssonInteractive Developer @flashpatric flashpatric@gmail.com