First look: Adobe Edge makes HTML5 dance

Adobe's JavaScript-based animation tool is rough around the edges, but shows incredible promise

The Flash-versus-HTML war is mostly hype. HTML5, CSS3, and JavaScript can't accomplish everything Flash can do today, and at their current rate of development, they'll take a long time to catch up (while Flash remains a moving target). Still, HTML5's capabilities are rich enough that many developers have wondered aloud whether Web standards will soon be able to replace Flash for some multimedia applications -- particularly in light of Apple's refusal to allow Flash on iOS.

Clever Web developers have been producing impressive demos ever since the first HTML5-compliant browsers arrived. The problem: It isn't easy. There are few tools available that give artists and designers the freedom to arrange HTML elements visually, and what tools do exist are generally oriented toward page layout, rather than multimedia. Producing something comparable to even the simplest Flash banner ad can require pages of handwritten JavaScript code.

[ Also on InfoWorld: "11 hard truths about HTML5." | Read Neil McAllister's Fatal Exception blog and get software development news and insights from InfoWorld's Developer World newsletter. ]

Who better to fill that vacancy than Adobe? The company has long viewed Flash and HTML as complementary technologies, rather than rivals. In Flash Professional, Adobe already has a mature model of how a Web multimedia design tool should look and feel. Adobe Edge, a new product that's available now as a time-limited free download, extends that model to allow you to develop animated content in pure HTML, CSS, and JavaScript. As a preview release, it's still rough around the edges, but it shows a lot of promise.

Taking the programming out of JavaScript
The Edge Preview's UI resembles that of other products in the Adobe Creative Suite product line, only much more limited. Adobe says the focus of the preview is on the animation engine, and tools for composing animations are essentially all you get.

All of Edge's animation effects are achieved using jQuery and its jQuery Easing plug-in. If you are a Web developer and have worked with these JavaScript libraries before, chances are you're already capable of writing code that can accomplish anything you could do with Edge. On the other hand, if you don't know much about JavaScript programming -- and especially if you don't want to know -- Edge makes it possible to get satisfying results with minimal code wrangling.

Perhaps more importantly, Edge aims to take some of the pain out of JavaScript-based animation by allowing animators to prototype their sequences visually, using a timeline-based UI that will be familiar to anyone who has used other digital animation tools (such as Flash). This capability alone is handy enough that even experienced JavaScript coders may want to incorporate Edge into their workflows.

Someday maybe. For now, Edge is pretty raw. It feels buggy, and it lacks the full set of features that one expects of a professional development tool. Still, Adobe has posted an impressive gallery of demos that showcase the kinds of banners, movies, and infographics that can be built with even this early version of the product.

33TC-adobe-edge.jpg
Adobe Edge can compose animations using nothing more than Web graphics, CSS, and JavaScript, but you'll need a modern, HTML5-compliant browser to play them back properly.
1 2 3 Page
Mobile Security Insider: iOS vs. Android vs. BlackBerry vs. Windows Phone
Join the discussion
Be the first to comment on this article. Our Commenting Policies