From ActionScript to Javascript

Past entries

Notice: The demos shown below may not work depending on your web browser. If your browser doesn't handle HTML5 tags, you should consider upgrading.
It is also possible that some canvas features are not supported, which could lead to displaying glitches.

Today I would like to show you what I've been working on lately.

In an older article, I was talking about HTML5 not being able to replace Flash, due to Javascript limitations. Indeed, the canvas tag is a very powerful tool, but it is still harder to user than good old Flash applications. Dart could be the answer to these problems, thanks to its "cleaner" coding style. Unfortunately, Dart is still at its early steps, so Javascript may still have some future ahead.

For these reasons, and because I really enjoy using the new canvas tag, I've started writing a library that would enable me (and maybe other developers) to write canvas animations just like they would with ActionScript. This allows to separate actual displaying code from animating.

If you have already tried ActionScript, you should know that it is really easy to make nice animations with few lines of code. In order to have a similar coding style, I wrote my own library, and here is the first demo :

Rotating rectangle

[popup=rectangle]Rectangle demo[/popup]
Click on the image to try this demo

This demo is the simplest one. I made it only to show you how easy it is to make such things with my library. Here's the code :

// Rotating rectangle demo :
function rectangleDemo(){
	// Creating a new stage
	var rectangleStage = new Stage('rectangleDemo');
	
	// Creating the rectangle
	var rectangle = new Sprite();
	rectangle.graphics.lineStyle(0x000000,3);
	rectangle.graphics.fillRectangle(-50,-50,100,100,0xFF33CC);
	
	// Adding it to the center of the stage
	rectangle.x = rectangleStage.stageWidth / 2;
	rectangle.y = rectangleStage.stageHeight / 2;
	rectangleStage.addChild(rectangle);
	
	// Rotating it at every frame
	rectangleStage.addEventListener(Events.ENTER_FRAME,function(){
		rectangle.rotation++;
	});
	
	// Adding a textfield to the center of the rectangle
	var tf = new TextField();
	tf.text = "www.remvst.com";
	tf.align = "center";
	tf.rotation = 45;
	rectangle.addChild(tf);
}

As you can see, there's not much code needed. All canvas-related code is handled by the library.

This example is so simple that it should not require an external library, but if you check the examples below, you'll see that my library becomes very handful.

Complex planets rotations

[popup=planets]Planets demo[/popup]
Click on the image to try this demo

Realtime rendering text effect

[popup=text]Text demo[/popup]
Click on the image to try this demo

Simple snake game

[popup=snake]Snake demo[/popup]
Click on the image to try this demo

Drawing

[popup=draw]Drawing demo[/popup]
Click on the image to try this demo

Realtime rendering Koch's snowflake

[popup=koch]Koch demo[/popup]
Click on the image to try this demo

Realtime rendering Mandelbrot set

[popup=mandelbrot]Mandel demo[/popup]
Click on the image to try this demo

Sparks on mouse click

[popup=sparks]Sparks demo[/popup]
Click on the image to try this demo

As you can see in these demos, this library is not only for rendering animations. It can also render static images. I may implement new features such as black-and-white images in the future.

Using this library

This is only the beginning of my work. This library should not be used for other productions yet. Though, as far as I continue to develop it, it should be usable by other developers.

If you are interested, feel free to contact me.

< Fruit Killer (HTML5 game)
Snowfall Javascript effect >