

Converting Flash to HTML5 (StrongBad Demo) - chaosmachine
http://smokescreen.us/demos/sb45demo.html

======
simonw
I just de-minified the source code and this thing is a seriously impressive
piece of work. It reads the SWF binary in JavaScript, decodes it (including
extracting embedded JPEGs, sound files etc) and then renders the same content
using dynamically generated SVG - if you fire up the Web Inspector in Chrome
while it's running you can actually see the different SVG properties changing
as it runs.

To pull that off, the JavaScript includes a base64 decoder, unzipping code, a
ton of byte manipulation stuff for dealing with the SWF format and a full-
blown ActionScript bytecode interpreter!

I've posted the de-minified version as a Gist if anyone wants a look:
<http://gist.github.com/418177> \- for educational purposes only since the
code hasn't officially been released yet.

------
chaosmachine
Unlike Google's Pacman game, these guys aren't using Flash for sound. It's all
HTML5.

Their site is here: <http://smokescreen.us/>

------
twism
I may get downvotted for this but anyways...

Why give out the source? Why not turn this into a service? I know that there
are a few ad agencies out there that would pay to see some of their
investments run on the iPhone OS. Or content providers guarantee their
sponsors' flash ads get impressions on iPhone/iPad.

~~~
mtigas
This looks a lot like Gordon (<http://github.com/tobeytailor/gordon>) — a JS
implementation of Flash. In which case, the point is that _you don’t need a
service_ to convert your files — your SWF files would work as-is.

Ideally — provided JS performance catches up — you simply re-tool your
templates to use the JS runtime (rather than embed tags) to run your SWF file.

In fact, looking at the source of <http://smokescreen.us/demos/lyrisdemo.html>
it’s conceivable that you could use Flash if available, but fallback to
Smokescreen/Gordon otherwise (likely testing for HTML5 support first). That
link is also a great example of how easy it would be for an ad agency to
continue to use their existing resources for Flashless, HTML5-ready devices.

Is there any relation between the Smokescreen and Gordon projects? I haven’t
heard of the latter in a while.

------
jsz0
For this demo CPU usage was about double the native Flash plug-in on Safari
4.0.5. Probably good enough for a good chunk of Flash content on the web?

~~~
dutchflyboy
Well, don't forget this is while reading and converting a swf in javascript
commands. It's a lot faster when you don't have the abstraction layer. So for
most things, yeah, javascript+canvas is more than enough.

------
watty
"running sbemail45.swf" - wait... this runs off of the SWF and not source?

Definitely slow with weird audio blips but very impressive so far.

~~~
samps
Yes! In fact, if you view source, you can see that there's just a call "new
Smokescreen(url, element, width, height, name, params)" which loads the SWF
and renders it. (Much like Gordon, mentioned in another comment.)

------
sown
It's not perfect on my imac+ff system.

There are always easter eggs in these strong bad emails. At the end, after the
line printer sheet comes down, click on the lower light switch and the easter
egg appears. To make it go away, you're supposed to click on the easter egg
but on mine, it just makes everything disappear and the music loops
indefinitely.

I also notice Strongbad's "mouth hole" sort of didn't look right, either, like
there was this nested circle of some kind.

All in and all, though, pretty good. :)

------
naner
This crashes my chromium tab on Linux every time I try to load it. :/

~~~
mortenjorck
Works on Safari 4.0.4 for Mac. Actually indistinguishable from the plugin, as
far as I could tell.

------
tlrobinson
How is Smokescreen different than Gordon?
<http://wiki.github.com/tobeytailor/gordon/>

~~~
thristian
Well, Gordon only supports Flash 1 and 2; most actual Flash on the Internet
probably uses _some_ features introduced in the following eight versions. I
can't find any specs on which Flash versions Smokescreen supports, but I would
bet that StrongBad Emails aren't old enough to work in Flash 1 or 2.

------
delackner
What is the room for optimization? About one second per frame on my ipad
defeats the whole point

~~~
Malic
That bad? Wow, I hope the rumors of much faster JavaScript in Mobile Safari
for iPhone OS 4.0 are true.

------
armandososa
Wow! It worked amazingly well on my old macbook/firefox. Actually, it worked
better than flash, which drops the aby audio longer that 30seconds.

------
MikeTLive
slow and silent on my iphone3gs. otherwise well done.

