As long time Adobe Flash Programmer and Animator, the past few years have been a little scary. The new emerging mobile market has largely decided to not support Flash. With everyone predicting the death of Flash the question is: how I and my peers create interactive animation?

Fortunately, Adobe is hard at work creating a new tool to deliver interactive animation that is both desktop and mobile compatible: Adobe Edge. Edge is a now in it's 6th beta release. It uses HTML5, CSS3 and JavaScript.

As an experiment, I took a very standard and simple flash banner and tried to recreate it in HTML5. The results are pretty impressive. The banners look pretty much identical.

I did notice some limitations with Edge.

Masking is handled via manipulating HTML divs. Divs have to be squares/rectangles of some sort. So, there is no complex amorphous masking.

Fonts are also an issue. There are only about 13 browser safe fonts. You can add additional fonts using something like Google web fonts or TypeKit. But this won't work with something like the Volkswagen Headline font. So, those have to be done as a graphic.

Looking at the over all file size and loading shows interesting results.

The HTML 5 banner loaded 7 js files and for some reason multiple times for a total of 385k! I imagine this is some kind of beta error and in the future it will only load these once each for about 201k. Still that doesn't include any graphics. In a world where we are forced to do banner ads in 40k or less, I'm not sure how this would work. Unless, these would be considered rich media, but that would substantially up the placement cost. Still it is comforting to know a great tool is on the way.

Here's a link to some more examples of Adobe Edge in action.

by derek mosher - flash developer/animator/designer - 06.14.2012