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

1. Flash is dead,
long live Flash!
OR
Indroducing Gordon:
An open source Flash runtime written in pure JavaScript

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. FLASH
RUNTIME
MUST DIE!

4. FLASH
RUNTIME
MUST DIE!

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. Skip Intro & Open the Website

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. Browser Support

9. SWF 1: Complete
SWF 2: Partial(no embedded sound)
SWF 3: 70%

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. var xhr = new XMLHttpRequest();
xhr.open("GET", url, false);
xhr.overrideMimeType("text/plain;charset=x-user-defined");
...
xhr.responseText.charCodeAt(23) & 0xff;

12. <img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

13. "HTML5"
WebWorkers
SVG
Canvas

14. Compression

15. inflate.js by Masanao Izumo
32kb compressed data ~150ms (V8)

16. Gordon‘s Zlib implentation
32kb compressed data ~15ms (V8)

17. Shapes
(DefineShape[2,3,4])

18. Images
(DefineBits, JPEGTables, DefineBitsJPEG2|3|4, DefineBitsLossless[2], )

19. Embedded JPG, PNG, GIF
Seperated JPG-Tables and Pixel-Data
Alpha JPG & BMP

20. Fonts & Text
(DefineFont[2,3,3], DefineFontInfo[2], DefineFontName, DefineText[2], DefineEditText)

21. Embeded SVG Fonts in WebKit (Opera?)
Inline Glyph-Shapes in Firefox
Web Font(ODT) Data-URL

22. Buttons
(DefineButton[2], DefineButtonCxform)

23. UP, DOWN, OVER, HIT

24. Morphing
(DefineMorphShape[2])

25. Not implemented yet
SWF just defines Start- & End-Shape
Transition & Transformation done by the RT
Great solution in RaphaëlJS

26. Sprites (MovieClips)
(DefineSprite)

27. Sound
(DefineSound, DefineButtonSound, SoundStreamHead[2], SoundStreamBlock)

28. Video
(DefineVideoStream, VideoFrame)

29. SWF3 Action Model
(play(), stop(), nextFrame(), prevFrame(), goToFrame(), waitForFrame(), getURL())

30. SWF4 Action Model
(doAction)

31. 1+x*3
ActionPush "x"
ActionGetVariable
ActionPush "3"
ActionMultiply
ActionPush "1"
ActionAdd

32. SWF9 Action Model
(doABC)

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. Thanks.
schneider@jancona.com | @tobeytailor