Wednesday, January 13th, 2010

Gordon: Flash Runtime Implemented in Javascript

Category: Flash, JavaScript

>This was quite a surprise! Tobias Schneider has built a Flash runtime that works right in the browser. It’s implemented in pure Javascript and HTML5, and the whole thing is open source, MIT-licensed, and hosted on GitHub.

See Gordon in action (demos hosted by Paul Irish).

It works like a charm in recent versions of Firefox, Chrome, and Safari (and, yes, iPhone Safari, though the “blue” demo runs at tedious pace on my 3G). To install it yourself, use “git clone git://github.com/tobeytailor/gordon.git”. I found the demos don’t work from a file:/// URI due to the script dependency system, so point your web server at the root and point your browser at demos/.

There’s not yet any docs, so it’s not clear how broadly compatible Gordon is or where it’s headed. But if nothing else, it makes a bold statement about the maturity of open web technologies.

  1. <body onload="new Gordon.Movie('trip.swf', {id: 'stage', width: 500, height: 400})">
  2.     <div id="stage"></div>
  3.   </body>

Gordon

(Update: After much twitter love, someone finally figured out the name. How did we miss it?!!)

Flash Gordon: Saviour?

Update 2: There’s a SWF tag support table and a browser support table. (thanks @tuxified)

Related Content:

Posted by Michael Mahemoff at 3:38 pm
25 Comments

++++-
4.8 rating from 81 votes

25 Comments »

Comments feed TrackBack URI

It’s funny! Apple is defeated!

Or… Apple’s strong commitment towards “open web standards” influenced people (in this case Tobias Schneider) to “Think Different” and bring Flash to the iPhone, without wreaking the Developer’s agreement.

So –maybe, I do not know the details– another complain against the iPhone is dethroned.

Comment by lmasanti — January 13, 2010

It’s pretty slow on my iPhone though. Neat, but slow. Doubt that it could really be sped up … especially with more complex flash files.

Comment by fredclown — January 13, 2010

Ironically, there are strong voices in the flash community currently asking for support for javascript in flash next to actionscript (see http://thebackbutton.com/blog/93/flash-11-should-be-a-switch-to-javascript/ ).

But maybe the really smart thing to do for adobe would be to realize the value of the flash platform is in the design tools and the flex API, not the plugin. What if they built the design tools so you could deploy to pure javascript, like gwt? It seems to me that’s a strategy that could give them long-term survival, if they play it right.

Comment by Joeri — January 13, 2010

It doesn’t burn my lap or melt my macbook’s case!

Flash is so dead.

Comment by Ajaxerex — January 13, 2010

Had a feeling 2010 was going to be a great year for Javascript. This is briljant.

Comment by Jadet — January 13, 2010

@Joeri
Late to the party, you are. You don’t give Adobe enough credit.
http://blogs.adobe.com/jnack/2009/10/sneak_peek_ai_fl_dw_canvas.html

The planned canvas implementation will probably be faster than this.

Comment by jhiswin — January 13, 2010

Doesn’t seem to run quakeflash yet (alchemy compiled c libs on iphone would be sweet), but an incredible project nonetheless.
@Joeri – yes!
In addition to this project, to complete the picture we need the opposite – a javascript vm implemented in actionscript, since the only fast vm on IE is flash.

Comment by rdza — January 13, 2010

@jhiswin: interesting, but still not the full deployment of flex apps (or components!) to javascript that I’m looking for.

@rdza: if you’re going to rely on plugins to get IE to behave, you might as well use chrome frame.

Comment by Joeri — January 14, 2010

First demo, blue.html runs very slow on my 1st gen iPhone. The tiger looks fine but zooming is also slow. The funky car runs fine.
This is a very nice piece of coding but as far as real life goes I don’t think it’s going to happen. Wett at least it will take some time for the mobile cpus to be fast enough.
I’m waiting for an AS3 implementation of Canvas so I can load in the canvas a flash that loads the same canvas and see what happens :D

Comment by cosmincimpoi — January 14, 2010

Should be interesting to see if/how performance improves when v4 of the iPhone OS ships, with all the latest Safari enhancements.

Comment by Amtiskaw — January 14, 2010

Flex gets compiled to .swf -> Is this working for Flex too ?

Comment by Rusco — January 14, 2010

I have downloaded the source files. it works fine with swf files provided with the demo but it does not work for me with my own swf…
has somebody else made the test ?
How is managed the sound provided by the swf file ?

Comment by fvisticot — January 14, 2010

This is really neat! I gotta think some of the performance issues can be attributed to the Flash spec or at least having to emulate it. Perhaps better performance would come from a spec designed for canvas.

Which makes me wonder… has anyone seen any work being done on an IDE similar to Adobe Flash but in a Web App and for Canvas?

Comment by mcsnolte — January 14, 2010

The project is really impressive but I see it more as an experimental project.. It won’t replace the Flash Player..

Some people are complaining that it doesn’t run their SWF files.. That’s because Gordon only supports the basic drawing commands: SWF tag support. Try exporting the swf as the oldest version possible and make sure that no AS is required.

If you want to do some simple vector animations (and don’t want to use Flash) why don’t you just use SVG animation? Using the canvas is almost the same as using an animated GIF…

I do (and also like) more HTML/CSS/JavaScript development than Flash but for really complex projects with many developers using a language that has AS3/Haxe/Java/C# features is way better than using JavaScript, just think about GWT and try to understand why they choose Java over JavaScript…

Things can coexist, it’s a good thing that Flash, Silverlight, Unity3D, exists.. It’s always pushing the web further and it’s a good thing that JavaScript is trying to catch up.

Comment by millermedeiros — January 14, 2010

More people need to get involved. This clearly has potential. I’m surprised to see that such an interesting project hasn’t been forked yet.

@cosmincimpoi:
Optimization seems to not have been considered in the creation of the code. For example, the tiger example uses CPU even when idling. If more people with reasonable skills got interested and helped improve the code, this will be usable, even if it’s only for very simple use cases.

@millermedeiros:
The problem isn’t due to lack of feature support. Try it yourself: create a very simple flash movie (just a shape).
Strangely, it will work if you inject the shape directly into one of the original flash files.
When I get the time, I’m going to investigate the code to see if I can find out why this is. Some other people should also do so.
Your argument for language makes no sense. AS3 is based on ECMAScript. GWT compiles to Javascript.

Comment by jhiswin — January 14, 2010

Nevermind, millermedeiros was right.
Note for other people trying to load their own swf files:
Target Flash Player 1 and uncheck XMP metadata

Comment by jhiswin — January 14, 2010

I’m more and more surprised by the possibilities of the web technologies nowadays, especially JavaScript. I however have a question about this project : could it work with SVGWeb ? ;)

Comment by fabienmenager — January 14, 2010

@Joeri – its not enough just to get IE to behave anymore – it needs to perform, and while chrome frame rules, its penetration leaves something to be desired, unlike flash10′s 95%. The answer to IE is a chrome frame that gets executed by the flash vm, ala svgweb – a fast path with no plugin download.

Comment by rdza — January 14, 2010

Woah this is really awesome!

I guess I’ll try using it with http://code.google.com/p/freemovie-js/ which is a SWF compiler that I ported to JS a bit ago.

Comment by antimatter15 — January 14, 2010

millermedeiros,

I do (and also like) more HTML/CSS/JavaScript development than Flash but for really complex projects with many developers using a language that has AS3/Haxe/Java/C# features is way better than using JavaScript just think about GWT and try to understand why they choose Java over JavaScript…

It’s really more a matter of preference than “better”. GWT is really the worst example you could have chosen, as it demonstrates perfectly that it’s a matter of preference, not functionality unavailable to Javascript: GWT produces Javascript code, as jhiswin said. If you prefer the Java “way of doing things” over Javascript, go ahead and use GWT. But unless you’re sending applets over the wire, we’ll both be producing Javascript one way or another.

I personally prefer the Javascript language. I like its simplicity and power. I like its syntax. I like it’s OO model. I like that it’s the “native” language of the web. And I can do just as much with it as anyone can do in GWT.

The same argument holds for Haxe.

C# and AS3 are a little different in that you can deploy them in Silverlight and Flash runtimes, respectively. Otherwise the argument above applies to C# and AS3 as well: they’re all capable, it’s a matter of what you prefer to write. But ultimately the time is coming where those runtime environments’ advantages are going to be pretty minimal. The only real advantages they have are performance—where Javascript is rapidly gaining, thanks to the efforts of Apple, Google and Mozilla—and API—where Javascript is also rapidly gaining, thanks to the efforts of the HTML5 standards process.

And those runtime environments have some pretty serious drawbacks too. Microsoft is sort of new in this space, but Adobe (and Macromedia) have had years to fix the accessibility, stability and resource overuse problems with Flash. The HTML/CSS/Javascript world is far ahead on this point, and getting better.

There are only really a handful of good reasons to use Flash (or, to a much lesser extent, Silverlight) in a new web app today:

1. Improved API access in Javascript is inconsistent across platforms.
2. Performance for an increasingly narrowing set of functionality.
3. Flexible audio/video playback without much fuss.

#1 is being mostly resolved as we speak, and may be a non-issue within a year or two. #2 is being resolved as we speak, and will be a non-issue within a year or two. #3 is the albatross around the open web’s neck. (Apple needs to get over themselves and support OGG.)

For better or worse, IE 9 is coming down the line with a Javascript engine that performs well, some CSS 3 support, and probably canvas. This will almost definitely be the nail in the coffin of IE 6-7, driving a deluge of “killer apps” that will promote all but the corporate sector to upgrade to modern browsers.

In short, a time where client-side language choice is only a matter of preference is basically visible on the horizon.

So write Java if you like. But don’t fool yourself into thinking you’re getting a leg up on Javascript.

Comment by eyelidlessness — January 15, 2010

it’s a cool experiment, but in its current stage it’s *extremely* limited and not useful for anything. when was the last time you saw anything built for flash player 1? even the barely-useful flash lite 1.0 is the equivalent of flash player 4. the way people are retweeting this you’d think it was the second coming or something ;)

Comment by bunnyhero — January 15, 2010

bunnyhero,

That’s because people get excited about proofs of concept because… they prove concepts. It’s an example of what can be done, and a lens on what more can be built upon it.

Comment by eyelidlessness — January 15, 2010

@bunnyhero:
The code looks to be a quick proof of concept hack. And it’s already able to render animations directly from flash files.
A lot of the flash online can be used with this script (recompiled).
And it’s still a big deal. A lot of flash is just animations made by designers, as there’s really no alternative tools.
The supported SWF tags looks like features of up to flash 10 have been implemented, but the script is choking on the produced output. It should be easily fixable. Looks like paulirish figured some of it out. Anyone want to contact him and see what he knows?

Comment by jhiswin — January 16, 2010

@eyelidlessness, I don’t use GWT or any other language to output JS code.. I was just trying to explain that some features of the other languages are useful when you have a big project with many developers (think about Google Wave..) it’s not that you can’t do those things using plain JavaScript, but that using Haxe/Java or other similar language can help… (Haxe features)

this post explain my point of view about Flash vs. Web Standards: Sympathy for the Devil. I think that every Flash hater should read it.

PS: just because your site is made with HTML+JS doesn’t mean that it is more accessible than a Flash website…

Comment by millermedeiros — January 27, 2010

I am using CS 3 and using action script 3.0 in my .swf file and using the gordon.js file in my index.html file as mentioned in example:

Replace me

var movie = new Gordon.Movie(“Chatbot.swf”, {id: “your_stage”, width: 480, height: 320});

but it is not working though on my ipad.

Please help me regarding this issue.

Comment by imrankhanbscs — November 3, 2010

Leave a comment

You must be logged in to post a comment.