There is sometimes significant rancor within the web development community as we transition from Flash to HTML5/JS for our audio-visual and interactive web content.

Let’s look at what went into a real-world game of Cut The Rope. While it was implemented as a promotional tool for the Windows 8 Store and IE9, ZengaLabs reports that it does work reasonably well on all HTML5-friendly desktop browsers.

First, we have the libraries. They chose jQuery 1.7, plus the FancyBox and the jQuery Easing plugins. To this, they added SoundManager 2 and Modernizr 2.0.6. These weighed in at just under 62KB.

Of course, no website is complete without tracking (Google Analytics in this case), as well as Facebook and Twitter integration, but those libraries are typically hosted remotely and are outside of our control.

This leaves us with a 69.7KB minified JavaScript file, ctr.js. This file contains significant swaths that look like

a.lineTo(32.7,183.4);
a.bezierCurveTo(31.8,176.3,31,168.9,30.3,161.3);

and

$("#resultStar3").removeClass("starEmpty").addClass("star");

What of the HTML? At a scant 4KB, it is largely boilerplate. Of particular interest is this snippet:

// html5 audio is unreliable in many browsers so its only enabled by default on
// IE9 or greater. You can force html5 audio by setting the querystring:
// http://www.cuttherope.ie/?html5audio=true
soundManager.useHTML5Audio = (isIE9OrGreater() || ZeptoLab.ctr.forceHTML5Audio);
soundManager.preferFlash = !soundManager.useHTML5Audio;
 
// initialize the game
ZeptoLab.ctr.run();

Note that we’re still resorting to browser-specific hard hacks. This is an understandable trade-off, though falling back to Flash doesn’t work if you also want to function in mobile environments. Our AV content is still forcing us to produce multiple formats.

It is also interesting to see the game effectively self-enclosed inside of a single object following a Java-like naming convention. This not only exhibits best practices, but also encloses it within a closure, making it harder for the code to be attacked.

The developers also reported another concern. Since the code can easily run before all of the required image and audio assets are loaded and the full game weighs in at 6MB, they needed a loader (much like what you have seen in traditional Flash environments). Happily, they released this original code as PxLoader under an MIT license.

Additional overhead is spent tracking the frame-rate to caution the user when performance suffers.

So what lessons can be drawn from this?

For the most part, once ActionScript developers become familiar with JavaScript development, the code they eventually produce will be fairly straightforward. Libraries abstract out most browser incompatibilities, although concurrent Flash and HTML5 development is still a fact of life unless you can be sure your users are on Internet Explorer 9+, Firefox 4+, Safari 5+, Opera 10+ or Chrome 10+.

It is unfortunate that patents on media formats are actually encumbering innovation among the people who would use them. Effectively, all media must be encoded in a minimum of 4 versions: traditional Flash, Chrome, Safari and MPEG. This is a drain on developer time and resources.

Finally, modern browsers do offer sufficient performance to implement complex interactive content natively within JavaScript. Plugins are no longer required to get work done.

Unless you develop in-house sites for companies that have standardized on a very modern browser, you’re stuck developing sites for IE8 and even IE7. (Heaven help you if you’re still developing for IE6).

How then do you access some of the powerful features of ECMAScript or the contextual tags of HTML5 without having to write layer upon layer of fallbacks?

Your fellow JavaScript developers have produced shims to emulate most of this functionality, even in environments where Chrome Frame isn’t viable.

The html5shiv project is still under active development. It not only adds support for HTML5 contextual tags, it sets their default styling and makes them print in IE8 and below. Naturally, their canvas element is not going to have the behaviors you see in other browsers, but at least you can get away with a single set of markup and fewer CSS rules.

The es5-shim project is also under active development. It alters prototypes of native objects, so I wouldn’t combine it with prototype.js. This library also has the benefit of being well documented – including what does and does not differ from the specification. Heed the cautions from Kris Kowal, its author, though:

“As closely as possible to ES5″ is not very close. Many of these shims are intended only to allow code to be written to ES5 without causing run-time errors in older engines. In many cases, this means that these shims cause many ES5 methods to silently fail. Decide carefully whether this is what you want.

There are lots of grid libraries out there. Naturally, this means we need to reinvent the wheel. With HTML5, we have a fantastic new tool called the CANVAS tag which frees us from the limitations of CSS.

The canvas tag is beautifully documented and supported on most modern browsers. Further, aside from IE 6-8, the vast majority of the browsers support the element as it is defined, which means we don’t need wrapping libraries to deal with browser quirks.

Using all of these libraries as baselines, there are a few essential pieces of functionality:
We must be dimension agnostic. Whether our space is 480px or 2560px wide, it should work well
We must support any number of columns
We must support n-wide columns
We must support arbitrary gutter sizes
We must get results consistent with those other libraries

To that end, I present the grid() function. It returns an object with an array of offsets, as well as plenty of other information that facilitates writing still more content to the canvas (or advanced features like simulating sub-columns). It has no library dependencies, although it currently does not gracefully handle older browsers.

Basic usage is simple:

result = AB.grid(canvas, 16, 20);

This one line takes the canvas element specified in the first parameter and divides it into 16 columns separated by 20 pixel gutters. The function returns an object that looks like this:

{
   cols: 16,
   element: canvas#tutorial,
   gutter: 20,
   offsets: [0, 60, 120, ..., 900],
   width: 40
}

You can also pass arrays:

result = AB.grid(canvas, [1, 3, 1], 10);

This divides the element into a 20% panel on the left and right and 60% in the middle. Now our response looks like this:

{
   cols: 3,
   element: canvas#tutorial,
   gutter: 20,
   offsets: [0, 194, 756],
   width: 186
}

Let’s go changing the colors:

result = AB.grid(canvas, [1, 4], 10, { foreground: '#CCC', background: '#EEE' });

Need to pad the outer margins as well?

result = AB.grid(canvas, [1, 4], 10, { includeOuter: true });

Maybe we just want to simulate the arithmetic, without drawing anything?

result = AB.grid(canvas.width, [1, 4], 10);

This would also work:

result = AB.grid(canvas, [1, 4], 10, { overrideWidth: canvas.width });

Now you’re probably saying that this is all well and good, but why bother when we are already using a CSS layout library for the site in general? Aside from making it easier to construct graphs, we can also use this to generate perfectly sized images within the client.

The following three lines will create an image tag from a canvas and do it faster than the human eye can detect:

var img = document.createElement('img');
img.setAttribute('src', canvas.toDataURL());
document.getElementsByTagName('body')[0].appendChild(img);

You could almost as easily assign it as a background image (here I am finally employing jQuery):

$('body').css('background', 'url(' + canvas.toDataURL() + ')');

Note that you must wrap the image data in the strings url( and ) for this to work.

Check out the code on GitHub.

We all knew this was coming, but google has thrown themselves into the Flash / HTML5 fray with a fun new beta tool.  Google Swiffy

Basically, it’s a tool that automatically converts SWF to HTML5 by creating an SVG animation.

http://www.google.com/doubleclick/studio/swiffy/

And now for the bad news

It’s free to use, but it’s on a closed source license which makes it a bit  of a problem for a lot of users.

Have a Flash SWF File? convert it to HTML5 with Google Swiffy:

(Via Hacker News)

Alright,  So you’ve spent 3.4 billion dollars to acquire a massive software development firm only to discover that their flagship product; Flash.  Is about to go the way of the dodo in favor of HTML5.  What’s an Adobe to do?

One answer they’ve presented is Wallaby: a standalone tool to compile FLA files into html5.

From a business perspective, this is awesome.  It allows you to continue using the awesome FLA authoring toolkit Adobe sells while shell leveraging the power of modern browsers.  Lets face it, the era of flash as a runtime is over, the era of needing powerful easy to use authoring environment for rich web media is only going to increase over the next few years.