Embed Size (px)
DESCRIPTION
In Swedish only!! Denna presentation tar upp hur du som HTML5 utvecklare kan dra nytta av att veta hur Flash och Actionscript är uppbyggt. Verktygen man kan använda för en bättre Canvasupplevelse och framför allt hur en Display List kan göra livet lättare för dig.
Citation preview
Från Flash till Canvas
@flashpatric
en förkärlek till svarta hål
DENNA FÖRELÄSNINGENCanvas 2D context
HistorikNutid
Hur ett vyträd gör livet lättare för digVerktyg för en bättre Canvasupplevelse
Demonstration
VAD CANVAS ÄR
En del av HTML5 standarden
Dynamisk bitmap
Egna API:er för att rita och skriva text
<canvas id=”canvas” width=”300” height=”150”></canvas>
FÖRDELARNAUr ett perspektiv som flashutvecklare
Det är lätt att lära sig
Mycket bra prestanda i nyare webbläsare
Bildmanipulation på pixelnivå
Det finns många väl beprövade JS-bibliotek
Relativt hög marknadspenetration
3D context – WebGL
GPU accelererat
Kraftfullt tillsammans med andra nya funktionerSemanticsOffline & StorageDevice accessConnectivityAudio & video3D graphics & effectsPerformance & IntegrationCSS3
HISTORIKFlash vs HTML
FutureSplash, blivande Flash, frågade
Adobe om de ville köpa företaget
HTML 3.2 draft
Microsoft släpper Internet Explorer
1995 1995
Flash vs HTML
HISTORIK
FutureSplash köps upp av Macromedia Lärde mig koda HTML
HTML 4.0, “Cougar”
1996 1996
1997
HISTORIK
Jag gjorde min första Flashanimation
Flash vs HTML2000 XHTML 1.0
HTML 4.01
1998
1999
HISTORIK
Actionscript 1 och Flash 5 XHTML 1.1
Flash vs HTML2000 2001
HISTORIK
Actionscript 2 släpptes i samband
med MX 2004 och Flash Player 7
Firefox föds
Flash vs HTML2003 2003
HISTORIK
Macromedia köps upp av Adobe WHATWG grundades av folk från
Apple, Mozilla och Opera.
Flash vs HTML2005 2004
HISTORIK
Actionscript 3 släpps. W3C grundar HTMLWG
Accepterar ett tidigare krav att släppa
XHTML
Flash vs HTML2006 2007
HISTORIK
Adobe AIR introduceras för desktop Google Chrome ser dagens ljus
Flash vs HTML2008 2008
HISTORIK
Adobe Flash Player för mobila enheter
Adobe uttrycker sin skepsis mot HTML5
W3C tar WHATWG:s förslag om
HTML5 som grund till en ny standard
Flash vs HTML2009 2009
Nja…
HISTORIK
Adobe släpper AIR för Android och iOS
men stoppas av Apples nya
användaravtal
Microsoft implementerar viss HTML5-
funktionalitet i IE9
Flash vs HTML
“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).”
2010 2010
HISTORIK
Apples användaravtal ändas igen och
Adobe AIR släpps på nytt av Adobe för
iOS
Adobe Flash Player för mobila enheter
läggs ner
Adobe skiftar fokus och förflyttar en stor
del av resurserna från Flash-teamet till
HTML5
Adobe gör en megablunder i sin
kommunikation
Flash vs HTML2011 2011
NUTID
Canvas basic support
71.17%
Opera Mini har delvis support för Canvas
HTML5 Canvas 2D marknadspenetration idag
Canvas Text API
70.56%
Opera Mini saknar support för Canvas Text API
CSS Canvas Drawing
35.56% (Chrome, Safari, iOS Safari, Android
browser)
Full Screen API
0%
Firefox, Chrome och Safari har delvis support
NUTID
IE8 och nedåt saknar support för Canvas
Kan använda polyfills för VML i IE7 och IE8
Explorercanvas.js
Allt stöds inte, det finns begränsningar!
- Bara linjära gradienter- Mönster måste repetera i båda riktningarna- Urklippsbanor stöds ej- Oenhetlig skalning skalar ej konturlinjer korrekt- Dålig prestanda
Canvas 2D Context i 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>
NACKDELARNAUr ett perspektiv som flashutvecklare
Polyfills behövs för äldre webbläsare
Inget animations API/tidslinje
Dålig textrendering
Det finns ingen ”Canvaseditor” ännu
Det som ritas är bara pixlar
Inget vyträd
Webbfonter
Vi är programmerare!
Polyfills täcker några behov Adobe Flash Professional CS6
Dynamiska pixlar
Logiskt vyträd
OPTIMISTENDet finns hopp om Canvas
VAD ETT VYTRÄD ÄR”En hierarkisk lista med grafiska objekt som
beskrivs med sina egenskaper”
VAD ETT VYTRÄD ÄRDisplay ObjektFamiljen – förälder och barn
Ärver från en abstrakt klass
Rendering sker i förhållande till föräldern
Dess egenskaper bestämmer hur de renderas
Olika objekt och egenskaperStage
Bitmap
Shape
Text
x & y
alpha
scaleX & scaleY
Etc..
CREATEJSEn uppsättning Javascript-bibliotekInteraktiva upplevelser och spel
Integration i Flash Professional CS6
EASELJSBaserat på Display List i Flash
Display list och DisplayListObjects
DOM-element
Mouse 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-filer som EaselJS sprite sheets
Demonstration!
Adobe Flash Professional CS6Toolkit for CreateJS
Nestlade animationerArmatureLjudVektorobjektShape morphningarDynamisk text
Demonstration!
Grant Skinnergskinner.com
Erkänd talare, ledare och innovatör inom interaktiv media
GtweenRegExr
CreateJSEaselGL
Grundaren av CREATEJS
