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

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

HISTORIK
Flash vs HTML
1996 FutureSplash köps upp av Macromedia 1996 Lärde mig koda HTML

1997 HTML 4.0, “Cougar”

HISTORIK
Flash vs HTML
2000 Jag gjorde min första Flashanimation 1998 XHTML 1.0

1999 HTML 4.01

HISTORIK
Flash vs HTML
2000 Actionscript 1 och Flash 5 2001 XHTML 1.1

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

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

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

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

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…

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

HISTORIK
Flash vs HTML
2011 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 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

NUTID
Canvas 2D Context i Internet Explorer

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

OPTIMISTEN
Det ﬁnns hopp om Canvas

Polyﬁlls täcker några behov Adobe Flash Professional CS6
Vi är programmerare! Dynamiska pixlar

Webbfonter Logiskt vyträd

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

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

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

EASELJS
Baserat på Display List i Flash

Display list och DisplayListObjects

DOM-element

Mouse events på objekt, även onClick och onPress

Touch support

SOUNDJS
API för att arbeta med ljud tillsammans med Canvas

PRELOADJS
Ett API för att hantera inladdning av data

ZOË
Exporterar SWF-ﬁler som EaselJS sprite sheets

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

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

TACK!
Patric Jonsson
Interactive Developer

@ﬂashpatric
ﬂashpatric@gmail.com

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

Recommandé

Recommandé

Contenu connexe

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

Similaire à Från Flash till Canvas - en förkärlek till svarta hål (20)

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

Notes de l'éditeur