Flash Is Dead, Long Live Flash!

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

Flash +Well structured and extendable ﬁle format (SWF) +Great authoring tools (Flash IDE, OpenOfﬁce, libMing) -Runtime sucks on non-windows-systems -Runtime would suck on iP‘s -Accesibility & Semantics

FLASH RUNTIME MUST DIE!

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>

Skip Intro & Open the Website

Gordon Flash & Friends sitting in the DOM 100% JavaScript (no Flash fallbacks :)) ~3100 lines of code (~15kB Gzipped) Customizable (SVG renderer by default)

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, autoplay: false }); ... movie.goTo(10).play(); ... movie.rewind().next(); ... movie.prev().stop();

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

"HTML5" WebWorkers SVG Canvas

Compression

inﬂate.js by Masanao Izumo 32kb compressed data ~150ms (V8)

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

Shapes (DeﬁneShape[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 (DeﬁneButton[2], DeﬁneButtonCxform)

UP, DOWN, OVER, HIT

Morphing (DeﬁneMorphShape[2])

Not implemented yet SWF just deﬁnes Start- & End-Shape Transition & Transformation done by the RT Great solution in RaphaëlJS

Sprites (MovieClips) (DeﬁneSprite)

Sound (DeﬁneSound, DeﬁneButtonSound, SoundStreamHead[2], SoundStreamBlock)

Video (DeﬁneVideoStream, 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){ ... }, place: function(character){ ... }, remove: function(depth){ ... } }; var movie = new Gordon.Movie("your.swf", { ... renderer: CustomWebGLRenderer });

Thanks. schneider@jancona.com | @tobeytailor

Flash Is Dead, Long Live Flash!

by Ryan Corradini on Apr 27, 2010

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 49

Statistics

Flash Is Dead, Long Live Flash! Presentation Transcript

http://www.slideshare.net	48
http://www.brice.net	1