I’m very excited about a new tool that I’ve written this weekend called AS3Wrapper. It’s a Javascript library, compatible with IE and Firefox, that can pull the contents of the Flash virtual machine into Javascript.
The result is that the entire Flash API becomes accessible from regular script tags. Owing to the simlarities between the two languages, coding Flash in Javascript is actually incredibly natural, and what’s more, it also seems to have pretty nice performance!
A Simple Example
Here’s a simple example at work. I suggest you take a look at the source code to see how the Javascript is constructed.
You first have to create yourself a Flash player object:
var player = new
AS3Wrapper.Player("content",100,100,false);
This replaces the div in your html page with id ‘content’ to be a 100×100 Flash player instance. The false parameter prevents transparency. The player might take a few moments to load, so assign a callback to setup your Flash scene:
player.onload = function(){
// Do the meat of your Flash work here
}
Once the player has loaded, it’s javascript object will contain the complete class hierarchy of the internal Flash API. For example, player.flash.display.Sprite will be the constructor for the flash class flash.display.Sprite inside player ‘player’. Here’s a screenshot from Firebug:
To write Javascript for a particular player, use with. With blocks are also the equivalent of the ActionScript import statements. Apart from this, there is pretty much a direct correspondance between the two languages. For example:
with(playerInstance)
with(flash.display)
with(flash.net){
var image = new Loader();
image.load(new URLRequest(url));
addChild(image);
}
is the Javascript equivalent of
import flash.display.*;
import flash.net.*;
... {
var image:Loader = new Loader();
image.load(new URLRequest(url));
addChild(image);
}
Pretty similar, huh?
Some things to note: Javascript doesn’t have type annotations (obviously), and because IE doesn’t support getters and setters, I’ve created methods instead - getWidth() for getting a Flash ‘width’ property and setWidth(v) for setting it.
What next?
One impact of this might be that it opens up Flash programming to a wider audience. Even though Flash compilers are free, having the code right there in HTML eliminates the extra step of installing extra tools. What’s more, any code generated in this way is naturally open.
By using the Papervision3d module (see this example), you can now program quick-rendered 3d in Javascript. You can also use a Javascript console for interactive Flash programming and debugging. Maybe one day Flash grease-monkey scripts will exist? Who knows.
There are, of course, also many disadvantages: losing a richer programming environment, type checking and performance. But still, hopefully you’ll find playing with it a little bit of fun!
Download
You can download AS3Wrapper here.
