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.
Från Flash till Canvas - en förkärlek till svarta hål
1. Från Flash till Canvas en förkärlek till svarta hål
@flashpatric
2. 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
3. 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
4. FÖRDELARNA
Ur ett perspektiv som flashutvecklare
Det är lätt att lära sig Kraftfullt tillsammans med andra nya funktioner
Mycket bra prestanda i nyare webbläsare Semantics
Offline & Storage
Bildmanipulation på pixelnivå
Device access
Det finns många väl beprövade JS-bibliotek Connectivity
Relativt hög marknadspenetration Audio & video
3D graphics & effects
3D context – WebGL
Performance & Integration
GPU accelererat CSS3
5. HISTORIK
Flash vs HTML
1995 FutureSplash, blivande Flash, frågade 1995 HTML 3.2 draft
Adobe om de ville köpa företaget Microsoft släpper Internet Explorer
6. HISTORIK
Flash vs HTML
1996 FutureSplash köps upp av Macromedia 1996 Lärde mig koda HTML
1997 HTML 4.0, “Cougar”
7. HISTORIK
Flash vs HTML
2000 Jag gjorde min första Flashanimation 1998 XHTML 1.0
1999 HTML 4.01
8. HISTORIK
Flash vs HTML
2000 Actionscript 1 och Flash 5 2001 XHTML 1.1
9. HISTORIK
Flash vs HTML
2003 Actionscript 2 släpptes i samband 2003 Firefox föds
med MX 2004 och Flash Player 7
10. HISTORIK
Flash vs HTML
2005 Macromedia köps upp av Adobe 2004 WHATWG grundades av folk från
Apple, Mozilla och Opera.
11. HISTORIK
Flash vs HTML
2006 Actionscript 3 släpps. 2007 W3C grundar HTMLWG
Accepterar ett tidigare krav att släppa
XHTML
12. HISTORIK
Flash vs HTML
2008 Adobe AIR introduceras för desktop 2008 Google Chrome ser dagens ljus
13. HISTORIK
Flash vs HTML
2009 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…
14. HISTORIK
Flash vs HTML
2010 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).”
15. HISTORIK
Flash vs HTML
2011 Apples användaravtal ändas igen och 2011 Adobe skiftar fokus och förflyttar 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
16. NUTID
HTML5 Canvas 2D marknadspenetration idag
Canvas basic support Canvas Text API
71.17% 70.56%
Opera Mini har delvis support för Canvas Opera Mini saknar support för Canvas Text API
CSS Canvas Drawing Full Screen API
35.56% (Chrome, Safari, iOS Safari, Android 0%
browser) Firefox, Chrome och Safari har delvis support
17. NUTID
Canvas 2D Context i Internet Explorer
IE8 och nedåt saknar support för Canvas <!DOCTYPE html>
<html>
Kan använda polyfills för VML i IE7 och IE8 <head>
<meta charset="utf-8">
Explorercanvas.js <title>Dive Into HTML5 Canvas</title>
<!--[if lt IE 9]>
Allt stöds inte, det finns begränsningar!
<script src="excanvas.js"></script>
- Bara linjära gradienter <![endif]-->
- 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
18. NACKDELARNA
Ur ett perspektiv som flashutvecklare
Polyfills behövs för äldre webbläsare Det finns ingen ”Canvaseditor” ännu
Inget animations API/tidslinje Det som ritas är bara pixlar
Dålig textrendering Inget vyträd
19. OPTIMISTEN
Det finns hopp om Canvas
Polyfills täcker några behov Adobe Flash Professional CS6
Vi är programmerare! Dynamiska pixlar
Webbfonter Logiskt vyträd
20. VAD ETT VYTRÄD ÄR
”En hierarkisk lista med grafiska objekt som
beskrivs med sina egenskaper”
21. VAD ETT VYTRÄD ÄR
Display Objekt Olika objekt och egenskaper
Familjen – förälder och barn Stage x&y
Ärver från en abstrakt klass Bitmap alpha
Rendering sker i förhållande till Shape scaleX & scaleY
föräldern
Text Etc..
Dess egenskaper bestämmer hur de
renderas
22. CREATEJS
En uppsättning Javascript-bibliotek
Interaktiva upplevelser och spel
Integration i Flash Professional CS6
23. EASELJS
Baserat på Display List i Flash
Display list och DisplayListObjects
DOM-element
Mouse events på objekt, även onClick och onPress
Touch support
Denna f&#xF6;rel&#xE4;sning tar bara upp den del som t&#xE4;cks upp av Canvas 2D context och visar hur du som HTML5 utvecklare kan dra nytta av att veta hur Flash och Actionscript &#xE4;r uppbyggt, verktygen man kan anv&#xE4;nda f&#xF6;r en b&#xE4;ttre Canvasupplevelse.\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Flash: Adobe sa nej tack.\nHTML: HTML3.2 var den f&#xF6;rsta versionen som standardiserades och publicerades som en rekomendation av W3C\n
Flash: Adobe sa nej tack.\nHTML: HTML3.2 var den f&#xF6;rsta versionen som standardiserades och publicerades som en rekomendation av W3C\n
Flash: Adobe sa nej tack.\nHTML: HTML3.2 var den f&#xF6;rsta versionen som standardiserades och publicerades som en rekomendation av W3C\n
Flash: Adobe sa nej tack.\nHTML: HTML3.2 var den f&#xF6;rsta versionen som standardiserades och publicerades som en rekomendation av W3C\n
Flash: Adobe sa nej tack.\nHTML: HTML3.2 var den f&#xF6;rsta versionen som standardiserades och publicerades som en rekomendation av W3C\n
Flash: Adobe sa nej tack.\nHTML: HTML3.2 var den f&#xF6;rsta versionen som standardiserades och publicerades som en rekomendation av W3C\n
Flash: Adobe sa nej tack.\nHTML: HTML3.2 var den f&#xF6;rsta versionen som standardiserades och publicerades som en rekomendation av W3C\n
Flash: Adobe sa nej tack.\nHTML: HTML3.2 var den f&#xF6;rsta versionen som standardiserades och publicerades som en rekomendation av W3C\n
Flash: Adobe sa nej tack.\nHTML: HTML3.2 var den f&#xF6;rsta versionen som standardiserades och publicerades som en rekomendation av W3C\n
Macromedia som d&#xF6;pte om produkten till Flash\nHTML 4.0 f&#xF6;resl&#xE5;s som standard f&#xF6;rst 1998\n
Macromedia som d&#xF6;pte om produkten till Flash\nHTML 4.0 f&#xF6;resl&#xE5;s som standard f&#xF6;rst 1998\n
Macromedia som d&#xF6;pte om produkten till Flash\nHTML 4.0 f&#xF6;resl&#xE5;s som standard f&#xF6;rst 1998\n
Macromedia som d&#xF6;pte om produkten till Flash\nHTML 4.0 f&#xF6;resl&#xE5;s som standard f&#xF6;rst 1998\n
Macromedia som d&#xF6;pte om produkten till Flash\nHTML 4.0 f&#xF6;resl&#xE5;s som standard f&#xF6;rst 1998\n
Macromedia som d&#xF6;pte om produkten till Flash\nHTML 4.0 f&#xF6;resl&#xE5;s som standard f&#xF6;rst 1998\n
Macromedia som d&#xF6;pte om produkten till Flash\nHTML 4.0 f&#xF6;resl&#xE5;s som standard f&#xF6;rst 1998\n
Macromedia som d&#xF6;pte om produkten till Flash\nHTML 4.0 f&#xF6;resl&#xE5;s som standard f&#xF6;rst 1998\n
Macromedia som d&#xF6;pte om produkten till Flash\nHTML 4.0 f&#xF6;resl&#xE5;s som standard f&#xF6;rst 1998\n
Flash: F&#xF6;r f&#xF6;rsta g&#xE5;ngen kallas skriptspr&#xE5;ket ActionScript, tidigare har det bara g&#xE5;tt under ben&#xE4;mningen Actions. I Flash 5 tillhandah&#xF6;ll spr&#xE5;ket mycket mer funktionalitet och punktsyntax. Man kunde utf&#xF6;ra enklare OOP i likhet med vad man kunde g&#xF6;ra i JavaScript\n
Flash: F&#xF6;r f&#xF6;rsta g&#xE5;ngen kallas skriptspr&#xE5;ket ActionScript, tidigare har det bara g&#xE5;tt under ben&#xE4;mningen Actions. I Flash 5 tillhandah&#xF6;ll spr&#xE5;ket mycket mer funktionalitet och punktsyntax. Man kunde utf&#xF6;ra enklare OOP i likhet med vad man kunde g&#xF6;ra i JavaScript\n
Flash: F&#xF6;r f&#xF6;rsta g&#xE5;ngen kallas skriptspr&#xE5;ket ActionScript, tidigare har det bara g&#xE5;tt under ben&#xE4;mningen Actions. I Flash 5 tillhandah&#xF6;ll spr&#xE5;ket mycket mer funktionalitet och punktsyntax. Man kunde utf&#xF6;ra enklare OOP i likhet med vad man kunde g&#xF6;ra i JavaScript\n
Flash: F&#xF6;r f&#xF6;rsta g&#xE5;ngen kallas skriptspr&#xE5;ket ActionScript, tidigare har det bara g&#xE5;tt under ben&#xE4;mningen Actions. I Flash 5 tillhandah&#xF6;ll spr&#xE5;ket mycket mer funktionalitet och punktsyntax. Man kunde utf&#xF6;ra enklare OOP i likhet med vad man kunde g&#xF6;ra i JavaScript\n
Flash: F&#xF6;r f&#xF6;rsta g&#xE5;ngen kallas skriptspr&#xE5;ket ActionScript, tidigare har det bara g&#xE5;tt under ben&#xE4;mningen Actions. I Flash 5 tillhandah&#xF6;ll spr&#xE5;ket mycket mer funktionalitet och punktsyntax. Man kunde utf&#xF6;ra enklare OOP i likhet med vad man kunde g&#xF6;ra i JavaScript\n
Flash: F&#xF6;r f&#xF6;rsta g&#xE5;ngen kallas skriptspr&#xE5;ket ActionScript, tidigare har det bara g&#xE5;tt under ben&#xE4;mningen Actions. I Flash 5 tillhandah&#xF6;ll spr&#xE5;ket mycket mer funktionalitet och punktsyntax. Man kunde utf&#xF6;ra enklare OOP i likhet med vad man kunde g&#xF6;ra i JavaScript\n
Flash: F&#xF6;r f&#xF6;rsta g&#xE5;ngen kallas skriptspr&#xE5;ket ActionScript, tidigare har det bara g&#xE5;tt under ben&#xE4;mningen Actions. I Flash 5 tillhandah&#xF6;ll spr&#xE5;ket mycket mer funktionalitet och punktsyntax. Man kunde utf&#xF6;ra enklare OOP i likhet med vad man kunde g&#xF6;ra i JavaScript\n
Flash: F&#xF6;r f&#xF6;rsta g&#xE5;ngen kallas skriptspr&#xE5;ket ActionScript, tidigare har det bara g&#xE5;tt under ben&#xE4;mningen Actions. I Flash 5 tillhandah&#xF6;ll spr&#xE5;ket mycket mer funktionalitet och punktsyntax. Man kunde utf&#xF6;ra enklare OOP i likhet med vad man kunde g&#xF6;ra i JavaScript\n
Flash: F&#xF6;r f&#xF6;rsta g&#xE5;ngen kallas skriptspr&#xE5;ket ActionScript, tidigare har det bara g&#xE5;tt under ben&#xE4;mningen Actions. I Flash 5 tillhandah&#xF6;ll spr&#xE5;ket mycket mer funktionalitet och punktsyntax. Man kunde utf&#xF6;ra enklare OOP i likhet med vad man kunde g&#xF6;ra i JavaScript\n
Flash: F&#xF6;r f&#xF6;rsta g&#xE5;ngen kallas skriptspr&#xE5;ket ActionScript, tidigare har det bara g&#xE5;tt under ben&#xE4;mningen Actions. I Flash 5 tillhandah&#xF6;ll spr&#xE5;ket mycket mer funktionalitet och punktsyntax. Man kunde utf&#xF6;ra enklare OOP i likhet med vad man kunde g&#xF6;ra i JavaScript\n
Flash: F&#xF6;r f&#xF6;rsta g&#xE5;ngen kallas skriptspr&#xE5;ket ActionScript, tidigare har det bara g&#xE5;tt under ben&#xE4;mningen Actions. I Flash 5 tillhandah&#xF6;ll spr&#xE5;ket mycket mer funktionalitet och punktsyntax. Man kunde utf&#xF6;ra enklare OOP i likhet med vad man kunde g&#xF6;ra i JavaScript\n
Flash: F&#xF6;r f&#xF6;rsta g&#xE5;ngen kallas skriptspr&#xE5;ket ActionScript, tidigare har det bara g&#xE5;tt under ben&#xE4;mningen Actions. I Flash 5 tillhandah&#xF6;ll spr&#xE5;ket mycket mer funktionalitet och punktsyntax. Man kunde utf&#xF6;ra enklare OOP i likhet med vad man kunde g&#xF6;ra i JavaScript\n
Flash: F&#xF6;r f&#xF6;rsta g&#xE5;ngen kallas skriptspr&#xE5;ket ActionScript, tidigare har det bara g&#xE5;tt under ben&#xE4;mningen Actions. I Flash 5 tillhandah&#xF6;ll spr&#xE5;ket mycket mer funktionalitet och punktsyntax. Man kunde utf&#xF6;ra enklare OOP i likhet med vad man kunde g&#xF6;ra i JavaScript\n
Flash: F&#xF6;r f&#xF6;rsta g&#xE5;ngen kallas skriptspr&#xE5;ket ActionScript, tidigare har det bara g&#xE5;tt under ben&#xE4;mningen Actions. I Flash 5 tillhandah&#xF6;ll spr&#xE5;ket mycket mer funktionalitet och punktsyntax. Man kunde utf&#xF6;ra enklare OOP i likhet med vad man kunde g&#xF6;ra i JavaScript\n
En simulering av&#xA0;F&#xF6;reningsbankens s&#xE4;kerhetsdosa\n
En simulering av&#xA0;F&#xF6;reningsbankens s&#xE4;kerhetsdosa\n
En simulering av&#xA0;F&#xF6;reningsbankens s&#xE4;kerhetsdosa\n
En simulering av&#xA0;F&#xF6;reningsbankens s&#xE4;kerhetsdosa\n
En simulering av&#xA0;F&#xF6;reningsbankens s&#xE4;kerhetsdosa\n
En simulering av&#xA0;F&#xF6;reningsbankens s&#xE4;kerhetsdosa\n
\n
\n
\n
\n
\n
\n
HTML: Web Hypertext Application Technology Working Group\nN&#xE5;gon representant fr&#xE5;n Microsoft ville inte vara med\n
HTML: Web Hypertext Application Technology Working Group\nN&#xE5;gon representant fr&#xE5;n Microsoft ville inte vara med\n
HTML: Web Hypertext Application Technology Working Group\nN&#xE5;gon representant fr&#xE5;n Microsoft ville inte vara med\n
HTML: Web Hypertext Application Technology Working Group\nN&#xE5;gon representant fr&#xE5;n Microsoft ville inte vara med\n
HTML: Web Hypertext Application Technology Working Group\nN&#xE5;gon representant fr&#xE5;n Microsoft ville inte vara med\n
HTML: Web Hypertext Application Technology Working Group\nN&#xE5;gon representant fr&#xE5;n Microsoft ville inte vara med\n
HTML: Web Hypertext Application Technology Working Group\nN&#xE5;gon representant fr&#xE5;n Microsoft ville inte vara med\n
HTML: Web Hypertext Application Technology Working Group\nN&#xE5;gon representant fr&#xE5;n Microsoft ville inte vara med\n
HTML: Web Hypertext Application Technology Working Group\nN&#xE5;gon representant fr&#xE5;n Microsoft ville inte vara med\n