Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

Smokescreen demo: a Flash player in JavaScript. Chris Smoak’s Smokescreen, “a Flash player written in JavaScript”, is an incredible piece of work. It runs entirely in the browser, reads in SWF binaries, unzips them (in native JS), extracts images and embedded audio and turns them in to base64 encoded data:uris, then stitches the vector graphics back together as animated SVG. Open up the Chrome Web Inspector while the demo is running and you can see the SVG changing in real time. Smokescreen even implements its own ActionScript bytecode interpreter. It’s stated intention is to allow Flash banner ads to execute on the iPad and iPhone, but there are plenty of other interesting applications (such as news site infographics). The company behind it have announced plans to open source it in the near future. My one concern is performance—the library is 175 KB and over 8,000 lines of JavaScript which might cause problems on low powered mobile devices.

9 comments

  1. I've posted a de-minified version (using TextMate's Bundles -> JavaScript -> Reformat Selection command) here: http://gist.github.com/418177

    For educational purposes only - the code has not yet been open sourced.

    Simon Willison - 29th May 2010 11:39 - #

  2. The one thing it can't do, and this is a big but, is load SWFs from across domain boundaries.

    Since writing rePublish, which also loads zips (epubs) in native JavaScript, i've increasingly been on a mission to get the browser developers to find a solution to cross-domain xhr.

    CORS is a theoretical solution, but imagine how difficult it would be to convince everyone that was hosting a SWF that you wanted to play to enable CORS!

    romeda@gmail.com - 29th May 2010 11:58 - #

  3. “It’s stated intention is to allow Flash banner ads to execute on the iPad and iPhone”

    Doh.

    “the library is 175 KB and over 8,000 lines of JavaScript which might cause problems on low powered mobile devices”

    Phew.

    Paul D. Waite - 29th May 2010 13:06 - #

  4. "My one concern is performance—the library is 175 KB and over 8,000 lines of JavaScript which might cause problems on low powered mobile devices."

    On of the most popular Javascript libraries, jQuery, is nearly the same size. As of this moment the base version (1.4.2) is 6240 lines of code at 160KB. That doesn't even include plugins or extensions or whatever folk call them. Nor does it include any code that actually preforms a noticable function. Which, admittedly, I never use for exactly these reasons :P So, in short, since people often (to my everlasting dismay...) use jQuery alongside other libraries, such as Prototype, I think the 175K of Javascript which actually does something useful is actually pretty decent. Especially since the Flash player plugin itself larger than that...

    Daniel Lanigan - 1st June 2010 19:57 - #

  5. jQuery is only 24kb if you use the production version. The 155kb version is uncompressed, for debugging.

    Dan - 1st June 2010 20:01 - #

  6. Using Packer (with variable renaming and 64bit encoding) it get's down to 105,177 -over 30% reduction in size. Using Gzip, it could easily get below 50K.

    Zachary Lym - 1st June 2010 22:05 - #

  7. Amazing work.

    Would it be possible to use Smokescreen to produce a one-off Javascript file from a given SWF? If it only takes the parts of the library that are needed for a given SWF then possibly the gzipped javascript would be smaller than the library and the SWF combined...

    Jos - 1st June 2010 22:20 - #

  8. The Homestar Runner used in the demo runs very slowly on my iPad. Since many recent Flash developers assume a framerate in excess of 30fps, this tool may require a lot of optimization to play Flash movies created by developers targeting fast desktop PCs.

    Robert M - 2nd June 2010 20:33 - #

  9. There's also Gordon, which has been around for a couple months now and has been open source from the start:

    http://github.com/tobeytailor/gordon

    Luigi Montanez - 5th June 2010 15:30 - #

Sign in with OpenID

Auto-HTML: Line breaks are preserved; URLs will be converted in to links.

Manual XHTML: Enter your own, valid XHTML. Allowed tags are a, p, blockquote, ul, ol, li, dl, dt, dd, em, strong, dfn, code, q, samp, kbd, var, cite, abbr, acronym, sub, sup, br, pre

A django site