Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Flash is dead,
        long live Flash!
                         OR

                 Indroducing Gordon:
An open source F...
Flash
 +Well structured and extendable file format (SWF)
+Great authoring tools (Flash IDE, OpenOffice, libMing)

       -Ru...
FLASH
RUNTIME
MUST DIE!
FLASH
RUNTIME
MUST DIE!
000000   465753034F000000   7800055F00000FA0
            000010   00000C01004302FF   FFFFBF0023000000
            000020  ...
Skip Intro & Open the Website
Gordon

  Flash & Friends sitting in the DOM
 100% JavaScript (no Flash fallbacks :))
 ~3100 lines of code (~15kB Gzipped)...
Browser Support
SWF 1: Complete

SWF 2: Partial(no embedded sound)

           SWF 3: 70%
var movie = new   Gordon.Movie("your.swf", {
    id:           "stage",
    width:        500,
    height:       400,
    ...
var xhr = new XMLHttpRequest();
xhr.open("GET", url, false);
xhr.overrideMimeType("text/plain;charset=x-user-defined");

....
<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMB...
"HTML5"


WebWorkers

   SVG

  Canvas
Compression
inflate.js by Masanao Izumo
32kb compressed data ~150ms (V8)
Gordon‘s Zlib implentation
32kb compressed data ~15ms (V8)
Shapes
(DefineShape[2,3,4])
Images
(DefineBits, JPEGTables, DefineBitsJPEG2|3|4, DefineBitsLossless[2], )
Embedded JPG, PNG, GIF

Seperated JPG-Tables and Pixel-Data

         Alpha JPG & BMP
Fonts & Text
(DefineFont[2,3,3], DefineFontInfo[2], DefineFontName, DefineText[2], DefineEditText)
Embeded SVG Fonts in WebKit (Opera?)

    Inline Glyph-Shapes in Firefox

     Web Font(ODT) Data-URL
Buttons
(DefineButton[2], DefineButtonCxform)
UP, DOWN, OVER, HIT
Morphing
 (DefineMorphShape[2])
Not implemented yet
   SWF just defines Start- & End-Shape
Transition & Transformation done by the RT
       Great solution...
Sprites (MovieClips)
       (DefineSprite)
Sound
(DefineSound, DefineButtonSound, SoundStreamHead[2], SoundStreamBlock)
Video
(DefineVideoStream, VideoFrame)
SWF3 Action Model
(play(), stop(), nextFrame(), prevFrame(), goToFrame(), waitForFrame(), getURL())
SWF4 Action Model
       (doAction)
1+x*3



 ActionPush "x"
ActionGetVariable
 ActionPush "3"
 ActionMultiply
 ActionPush "1"
   ActionAdd
SWF9 Action Model
       (doABC)
CustomWebGLRenderer = function(options){

      ...

};
CustomWebGLRenderer.prototype = {
    define: function(obj){ ... }...
Thanks.
schneider@jancona.com | @tobeytailor
Upcoming SlideShare
Loading in …5
×

Flash Is Dead, Long Live Flash!

6,191 views

Published on

Original presentation by Tobias Schneider (Twitter: @tobeytailor), on Gordon, his JavaScript implementation of a Flash player.

Originally presented on Day 1 of JSConf 2010; more info here in case you missed it: http://palagpat-coding.blogspot.com/2010/04/in-case-you-missed-it-jsconfus-2010-day.html

Published in: Technology
  • Be the first to comment

Flash Is Dead, Long Live Flash!

  1. 1. Flash is dead, long live Flash! OR Indroducing Gordon: An open source Flash runtime written in pure JavaScript
  2. 2. Flash +Well structured and extendable file format (SWF) +Great authoring tools (Flash IDE, OpenOffice, libMing) -Runtime sucks on non-windows-systems -Runtime would suck on iP‘s -Accesibility & Semantics
  3. 3. FLASH RUNTIME MUST DIE!
  4. 4. FLASH RUNTIME MUST DIE!
  5. 5. 000000 465753034F000000 7800055F00000FA0 000010 00000C01004302FF FFFFBF0023000000 000020 010070FB49970D0C 7D50000114000000 000030 000125C9920D21ED 488765303B6DE1D8 000040 B400008606060100 01000040000000 <?xml version="1.0"?> <swf version="6" compressed="1"> <Header framerate="16384" frames="1"> <size> <Rectangle left="0" right="11900" top="0" bottom="16840"/> </size> <tags> <SetBackgroundColor> <color> <Color red="255" green="255" blue="255"/> </color> </SetBackgroundColor> <ShowFrame/> <End/> </tags> </Header> </swf>
  6. 6. Skip Intro & Open the Website
  7. 7. Gordon Flash & Friends sitting in the DOM 100% JavaScript (no Flash fallbacks :)) ~3100 lines of code (~15kB Gzipped) Customizable (SVG renderer by default)
  8. 8. Browser Support
  9. 9. SWF 1: Complete SWF 2: Partial(no embedded sound) SWF 3: 70%
  10. 10. var movie = new Gordon.Movie("your.swf", { id: "stage", width: 500, height: 400, autoplay: false }); ... movie.goTo(10).play(); ... movie.rewind().next(); ... movie.prev().stop();
  11. 11. var xhr = new XMLHttpRequest(); xhr.open("GET", url, false); xhr.overrideMimeType("text/plain;charset=x-user-defined"); ... xhr.responseText.charCodeAt(23) & 0xff;
  12. 12. <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0 vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />
  13. 13. "HTML5" WebWorkers SVG Canvas
  14. 14. Compression
  15. 15. inflate.js by Masanao Izumo 32kb compressed data ~150ms (V8)
  16. 16. Gordon‘s Zlib implentation 32kb compressed data ~15ms (V8)
  17. 17. Shapes (DefineShape[2,3,4])
  18. 18. Images (DefineBits, JPEGTables, DefineBitsJPEG2|3|4, DefineBitsLossless[2], )
  19. 19. Embedded JPG, PNG, GIF Seperated JPG-Tables and Pixel-Data Alpha JPG & BMP
  20. 20. Fonts & Text (DefineFont[2,3,3], DefineFontInfo[2], DefineFontName, DefineText[2], DefineEditText)
  21. 21. Embeded SVG Fonts in WebKit (Opera?) Inline Glyph-Shapes in Firefox Web Font(ODT) Data-URL
  22. 22. Buttons (DefineButton[2], DefineButtonCxform)
  23. 23. UP, DOWN, OVER, HIT
  24. 24. Morphing (DefineMorphShape[2])
  25. 25. Not implemented yet SWF just defines Start- & End-Shape Transition & Transformation done by the RT Great solution in RaphaëlJS
  26. 26. Sprites (MovieClips) (DefineSprite)
  27. 27. Sound (DefineSound, DefineButtonSound, SoundStreamHead[2], SoundStreamBlock)
  28. 28. Video (DefineVideoStream, VideoFrame)
  29. 29. SWF3 Action Model (play(), stop(), nextFrame(), prevFrame(), goToFrame(), waitForFrame(), getURL())
  30. 30. SWF4 Action Model (doAction)
  31. 31. 1+x*3 ActionPush "x" ActionGetVariable ActionPush "3" ActionMultiply ActionPush "1" ActionAdd
  32. 32. SWF9 Action Model (doABC)
  33. 33. CustomWebGLRenderer = function(options){ ... }; CustomWebGLRenderer.prototype = { define: function(obj){ ... }, place: function(character){ ... }, remove: function(depth){ ... } }; var movie = new Gordon.Movie("your.swf", { ... renderer: CustomWebGLRenderer });
  34. 34. Thanks. schneider@jancona.com | @tobeytailor

×