<table cellspacing="0" cellpadding="0" border="0" ><tr><td valign="top" style="font: inherit;"><h1><a href="http://www.webmonkey.com/2010/06/smokescreen-project-promises-flash-without-the-plug-in/" rel="bookmark" title="Permanent Link to Smokescreen Project Promises 
‘Flash Without the Plug-in’">Smokescreen Project Promises ‘Flash Without
 the Plug-in’</a></h1>

                    <div class="entryDescription">
                        <ul><li class="entryAuthor">
                                By <a href="http://www.webmonkey.com/author/snackfight/" title="Posts by 
Michael Calore">Michael Calore</a>                            </li><li class="entryEdit">
                                                            WebMonkey<br></li></ul>
                    </div>

                    
                        <p><a href="http://smokescreen.us/demos/sb45demo.html"><br></a>
</p><p>A new open source project converts Flash animations to 
JavaScript/HTML5 on the fly, allowing them to be viewed in any modern 
web browser without the use of a plug-in.</p>
<p>The new project is called <a href="http://smokescreen.us/">Smokescreen</a>,
 and it’s the creation of a programmer named Chris Smoak. Basically, 
Smoak’s code dissects the SWF binaries (the meat of any Flash animation)
 and re-renders all the elements as web standards-compliant code as the 
animation plays. If you’re producing Flash animations, you don’t need to
 futz with your code or redeploy any SWFs.</p>
<p>There are several demos on Smoak’s site. We like <a href="http://smokescreen.us/demos/sb45demo.html">this Strongbad example</a>
 the best.</p>
<p>Simon Willison, a programmer and blogger, has an excellent high-level
 technical description of the behind-the-scenes stuff <a href="http://simonwillison.net/2010/May/29/smokescreen/">on his website</a>:</p>
<blockquote><p>Smokescreen 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.</p></blockquote>
<p>Smoak says he will be releasing Smokescreen under an open-source 
license soon. For now, we have some pretty slick demos. It’s not 
perfect, but it’s a clear vision of what a Flash-free future would look 
like.</p>
<p>Obviously, this bit of code won’t work for Flash videos. But there 
are already <a href="http://www.webmonkey.com/2010/05/handy-guide-to-detecting-support-for-html5/">HTML5
 workarounds</a> for those. <a href="http://smokescreen.us/about/">Smoak
 says</a> his original goal was to build something that would let 
Flash-based banner ads play on the iPhone and iPad. As noble as those 
intentions are (cough), the possible use cases for Smokescreen extend 
beyond advertising.</p>
<p>Once optimized and streamlined, it could be used for games. Willison 
notes that news site infographics are a juicy target. It could also be 
used for rendering cartoon-like animations, such as the Strongbad 
episode in the demo. We’d love to see the classic <em>Sex Slave</em> 
series, originally built in Flash/Shockwave, reborn in HTML5.</p>
<p>There are concerns about how well Smokescreen will run on mobiles 
with slower, less-powerful processors. Again, we can expect to see 
improvements once the code is open sourced. Also, only the latest 
browsers are invited to the party for now — you’ll need Firefox 3.6, 
Chrome 5, Safari 4 or MobileSafari to experience the magic. It almost 
works in Opera 10.5x. IE8 is not supported, but Smoak says IE9 “looks 
promising.”</p></td></tr></table><br>