• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
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

on

  • 3,165 views

In Swedish only!! ...

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.

Statistics

Views

Total Views
3,165
Views on SlideShare
756
Embed Views
2,409

Actions

Likes
0
Downloads
0
Comments
0

6 Embeds 2,409

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

Accessibility

Categories

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
  • \n
  • Denna föreläsning tar bara upp den del som täcks upp av Canvas 2D context och visar 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.\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örsta versionen som standardiserades och publicerades som en rekomendation av W3C\n
  • Flash: Adobe sa nej tack.\nHTML: HTML3.2 var den första versionen som standardiserades och publicerades som en rekomendation av W3C\n
  • Flash: Adobe sa nej tack.\nHTML: HTML3.2 var den första versionen som standardiserades och publicerades som en rekomendation av W3C\n
  • Flash: Adobe sa nej tack.\nHTML: HTML3.2 var den första versionen som standardiserades och publicerades som en rekomendation av W3C\n
  • Flash: Adobe sa nej tack.\nHTML: HTML3.2 var den första versionen som standardiserades och publicerades som en rekomendation av W3C\n
  • Flash: Adobe sa nej tack.\nHTML: HTML3.2 var den första versionen som standardiserades och publicerades som en rekomendation av W3C\n
  • Flash: Adobe sa nej tack.\nHTML: HTML3.2 var den första versionen som standardiserades och publicerades som en rekomendation av W3C\n
  • Flash: Adobe sa nej tack.\nHTML: HTML3.2 var den första versionen som standardiserades och publicerades som en rekomendation av W3C\n
  • Flash: Adobe sa nej tack.\nHTML: HTML3.2 var den första versionen som standardiserades och publicerades som en rekomendation av W3C\n
  • Macromedia som döpte om produkten till Flash\nHTML 4.0 föreslås som standard först 1998\n
  • Macromedia som döpte om produkten till Flash\nHTML 4.0 föreslås som standard först 1998\n
  • Macromedia som döpte om produkten till Flash\nHTML 4.0 föreslås som standard först 1998\n
  • Macromedia som döpte om produkten till Flash\nHTML 4.0 föreslås som standard först 1998\n
  • Macromedia som döpte om produkten till Flash\nHTML 4.0 föreslås som standard först 1998\n
  • Macromedia som döpte om produkten till Flash\nHTML 4.0 föreslås som standard först 1998\n
  • Macromedia som döpte om produkten till Flash\nHTML 4.0 föreslås som standard först 1998\n
  • Macromedia som döpte om produkten till Flash\nHTML 4.0 föreslås som standard först 1998\n
  • Macromedia som döpte om produkten till Flash\nHTML 4.0 föreslås som standard först 1998\n
  • Flash: För första gången kallas skriptspråket ActionScript, tidigare har det bara gått under benämningen Actions. I Flash 5 tillhandahöll språket mycket mer funktionalitet och punktsyntax. Man kunde utföra enklare OOP i likhet med vad man kunde göra i JavaScript\n
  • Flash: För första gången kallas skriptspråket ActionScript, tidigare har det bara gått under benämningen Actions. I Flash 5 tillhandahöll språket mycket mer funktionalitet och punktsyntax. Man kunde utföra enklare OOP i likhet med vad man kunde göra i JavaScript\n
  • Flash: För första gången kallas skriptspråket ActionScript, tidigare har det bara gått under benämningen Actions. I Flash 5 tillhandahöll språket mycket mer funktionalitet och punktsyntax. Man kunde utföra enklare OOP i likhet med vad man kunde göra i JavaScript\n
  • Flash: För första gången kallas skriptspråket ActionScript, tidigare har det bara gått under benämningen Actions. I Flash 5 tillhandahöll språket mycket mer funktionalitet och punktsyntax. Man kunde utföra enklare OOP i likhet med vad man kunde göra i JavaScript\n
  • Flash: För första gången kallas skriptspråket ActionScript, tidigare har det bara gått under benämningen Actions. I Flash 5 tillhandahöll språket mycket mer funktionalitet och punktsyntax. Man kunde utföra enklare OOP i likhet med vad man kunde göra i JavaScript\n
  • Flash: För första gången kallas skriptspråket ActionScript, tidigare har det bara gått under benämningen Actions. I Flash 5 tillhandahöll språket mycket mer funktionalitet och punktsyntax. Man kunde utföra enklare OOP i likhet med vad man kunde göra i JavaScript\n
  • Flash: För första gången kallas skriptspråket ActionScript, tidigare har det bara gått under benämningen Actions. I Flash 5 tillhandahöll språket mycket mer funktionalitet och punktsyntax. Man kunde utföra enklare OOP i likhet med vad man kunde göra i JavaScript\n
  • Flash: För första gången kallas skriptspråket ActionScript, tidigare har det bara gått under benämningen Actions. I Flash 5 tillhandahöll språket mycket mer funktionalitet och punktsyntax. Man kunde utföra enklare OOP i likhet med vad man kunde göra i JavaScript\n
  • Flash: För första gången kallas skriptspråket ActionScript, tidigare har det bara gått under benämningen Actions. I Flash 5 tillhandahöll språket mycket mer funktionalitet och punktsyntax. Man kunde utföra enklare OOP i likhet med vad man kunde göra i JavaScript\n
  • Flash: För första gången kallas skriptspråket ActionScript, tidigare har det bara gått under benämningen Actions. I Flash 5 tillhandahöll språket mycket mer funktionalitet och punktsyntax. Man kunde utföra enklare OOP i likhet med vad man kunde göra i JavaScript\n
  • Flash: För första gången kallas skriptspråket ActionScript, tidigare har det bara gått under benämningen Actions. I Flash 5 tillhandahöll språket mycket mer funktionalitet och punktsyntax. Man kunde utföra enklare OOP i likhet med vad man kunde göra i JavaScript\n
  • Flash: För första gången kallas skriptspråket ActionScript, tidigare har det bara gått under benämningen Actions. I Flash 5 tillhandahöll språket mycket mer funktionalitet och punktsyntax. Man kunde utföra enklare OOP i likhet med vad man kunde göra i JavaScript\n
  • Flash: För första gången kallas skriptspråket ActionScript, tidigare har det bara gått under benämningen Actions. I Flash 5 tillhandahöll språket mycket mer funktionalitet och punktsyntax. Man kunde utföra enklare OOP i likhet med vad man kunde göra i JavaScript\n
  • Flash: För första gången kallas skriptspråket ActionScript, tidigare har det bara gått under benämningen Actions. I Flash 5 tillhandahöll språket mycket mer funktionalitet och punktsyntax. Man kunde utföra enklare OOP i likhet med vad man kunde göra i JavaScript\n
  • En simulering av Föreningsbankens säkerhetsdosa\n
  • En simulering av Föreningsbankens säkerhetsdosa\n
  • En simulering av Föreningsbankens säkerhetsdosa\n
  • En simulering av Föreningsbankens säkerhetsdosa\n
  • En simulering av Föreningsbankens säkerhetsdosa\n
  • En simulering av Föreningsbankens säkerhetsdosa\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • HTML: Web Hypertext Application Technology Working Group\nNågon representant från Microsoft ville inte vara med\n
  • HTML: Web Hypertext Application Technology Working Group\nNågon representant från Microsoft ville inte vara med\n
  • HTML: Web Hypertext Application Technology Working Group\nNågon representant från Microsoft ville inte vara med\n
  • HTML: Web Hypertext Application Technology Working Group\nNågon representant från Microsoft ville inte vara med\n
  • HTML: Web Hypertext Application Technology Working Group\nNågon representant från Microsoft ville inte vara med\n
  • HTML: Web Hypertext Application Technology Working Group\nNågon representant från Microsoft ville inte vara med\n
  • HTML: Web Hypertext Application Technology Working Group\nNågon representant från Microsoft ville inte vara med\n
  • HTML: Web Hypertext Application Technology Working Group\nNågon representant från Microsoft ville inte vara med\n
  • HTML: Web Hypertext Application Technology Working Group\nNågon representant från Microsoft ville inte vara med\n
  • En omskrivning av språket \n
  • En omskrivning av språket \n
  • En omskrivning av språket \n
  • En omskrivning av språket \n
  • En omskrivning av språket \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
  • \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
  • \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
  • http://www.w3.org/People/Raggett/book4/ch02.html\nhttp://createjs.com/\n\n

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

  • Från Flash till Canvas en förkärlek till svarta hål @flashpatric
  • 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ö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
  • 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 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
  • 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 finns hopp om CanvasPolyfills 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-filer 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 @flashpatric flashpatric@gmail.com