Från Flash till Canvas - en förkärlek till svarta hål

Från Flash till Canvas en förkärlek till svarta hål @ﬂashpatric

DENNA FÖRELÄSNINGEN Canvas 2D context Historik Nutid Hur ett vyträd gör livet lättare för dig Verktyg för en bättre Canvasupplevelse Demonstration

VAD CANVAS ÄR<canvas id=”canvas” width=”300” height=”150”></canvas> En del av HTML5 standarden Dynamisk bitmap Egna API:er för att rita och skriva text

FÖRDELARNA Ur ett perspektiv som flashutvecklareDet är lätt att lära sig Kraftfullt tillsammans med andra nya funktionerMycket bra prestanda i nyare webbläsare Semantics Offline & StorageBildmanipulation på pixelnivå Device accessDet finns många väl beprövade JS-bibliotek ConnectivityRelativt hög marknadspenetration Audio & video 3D graphics & effects3D context – WebGL Performance & IntegrationGPU accelererat CSS3

HISTORIK Flash vs HTML1995 FutureSplash, blivande Flash, frågade 1995 HTML 3.2 draft Adobe om de ville köpa företaget Microsoft släpper Internet Explorer

HISTORIK Flash vs HTML1996 FutureSplash köps upp av Macromedia 1996 Lärde mig koda HTML 1997 HTML 4.0, “Cougar”

HISTORIK Flash vs HTML2000 Jag gjorde min första Flashanimation 1998 XHTML 1.0 1999 HTML 4.01

HISTORIK Flash vs HTML2000 Actionscript 1 och Flash 5 2001 XHTML 1.1

HISTORIK Flash vs HTML2003 Actionscript 2 släpptes i samband 2003 Firefox föds med MX 2004 och Flash Player 7

HISTORIK Flash vs HTML2005 Macromedia köps upp av Adobe 2004 WHATWG grundades av folk från Apple, Mozilla och Opera.

HISTORIK Flash vs HTML2006 Actionscript 3 släpps. 2007 W3C grundar HTMLWG Accepterar ett tidigare krav att släppa XHTML

HISTORIK Flash vs HTML2008 Adobe AIR introduceras för desktop 2008 Google Chrome ser dagens ljus

HISTORIK Flash vs HTML2009 Adobe Flash Player för mobila enheter 2009 W3C tar WHATWG:s förslag om Adobe uttrycker sin skepsis mot HTML5 HTML5 som grund till en ny standard Nja…

HISTORIK Flash vs HTML2010 Adobe släpper AIR för Android och iOS 2010 Microsoft implementerar viss HTML5- men stoppas av Apples nya funktionalitet i IE9 användaravtal “3.3.1 — Applications may only use Documented APIs in the manner prescribed by Apple and must not use or call any private APIs. Applications must be originally written in Objective-C, C, C++, or JavaScript as executed by the iPhone OS WebKit engine, and only code written in C, C++, and Objective-C may compile and directly link against the Documented APIs (e.g., Applications that link to Documented APIs through an intermediary translation or compatibility layer or tool are prohibited).”

HISTORIK Flash vs HTML2011 Apples användaravtal ändas igen och 2011 Adobe skiftar fokus och förﬂyttar en stor Adobe AIR släpps på nytt av Adobe för del av resurserna från Flash-teamet till iOS HTML5 Adobe Flash Player för mobila enheter Adobe gör en megablunder i sin läggs ner kommunikation

NUTID HTML5 Canvas 2D marknadspenetration idagCanvas basic support Canvas Text API71.17% 70.56%Opera Mini har delvis support för Canvas Opera Mini saknar support för Canvas Text APICSS Canvas Drawing Full Screen API35.56% (Chrome, Safari, iOS Safari, Android 0%browser) Firefox, Chrome och Safari har delvis support

NUTID Canvas 2D Context i Internet ExplorerIE8 och nedåt saknar support för Canvas <!DOCTYPE html> <html>Kan använda polyﬁlls för VML i IE7 och IE8 <head> <meta charset="utf-8">Explorercanvas.js <title>Dive Into HTML5 Canvas</title>  - Mönster måste repetera i båda riktningarna </head> - Urklippsbanor stöds ej <body> ... </body> - Oenhetlig skalning skalar ej konturlinjer korrekt </html> - Dålig prestanda

NACKDELARNA Ur ett perspektiv som flashutvecklarePolyfills behövs för äldre webbläsare Det finns ingen ”Canvaseditor” ännuInget animations API/tidslinje Det som ritas är bara pixlarDålig textrendering Inget vyträd

OPTIMISTEN Det ﬁnns hopp om CanvasPolyﬁlls täcker några behov Adobe Flash Professional CS6Vi är programmerare! Dynamiska pixlarWebbfonter Logiskt vyträd

VAD ETT VYTRÄD ÄR”En hierarkisk lista med grafiska objekt som beskrivs med sina egenskaper”

VAD ETT VYTRÄD ÄRDisplay Objekt Olika objekt och egenskaperFamiljen – förälder och barn Stage x&yÄrver från en abstrakt klass Bitmap alphaRendering sker i förhållande till Shape scaleX & scaleYföräldern Text Etc..Dess egenskaper bestämmer hur derenderas

CREATEJS En uppsättning Javascript-bibliotek Interaktiva upplevelser och spelIntegration i Flash Professional CS6

EASELJS Baserat på Display List i Flash Display list och DisplayListObjects DOM-elementMouse events på objekt, även onClick och onPress Touch support

TWEENJSTween- och easing API

SOUNDJSAPI för att arbeta med ljud tillsammans med Canvas

PRELOADJSEtt API för att hantera inladdning av data

ZOËExporterar SWF-ﬁler som EaselJS sprite sheets

Demonstration!

Adobe Flash Professional CS6 Toolkit for CreateJS Nestlade animationer Armature Ljud Vektorobjekt Shape morphningar Dynamisk text

Demonstration!

Grundaren av CREATEJS Grant Skinner gskinner.comErkänd talare, ledare och innovatör inom interaktiv media Gtween RegExr CreateJS EaselGL

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

http://www.flashguru.se	2212
http://flashpatric.com	86
http://www.lat55.se	43
http://flashguru.se	42
http://lat55.local	10
http://lanyrd.com	5

Från Flash till Canvas - en förkärlek till svarta hål

by Patric Lanhed

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 2,398

Statistics