Adobe Edge beta brings Flash-style design to HTML5

For all the talk of how HTML5 will be the future of the Web, and how, in particular, it will replace Flash for rich interactive and animated content, the reality is that the technology is out of reach for a lot of the designers and animators currently using Flash. While HTML5 developers are working directly with JavaScript, SVG, CSS, and other technologies, Flash designers enjoy a high-level environment with timelines, drawing tools, easy control of animation effects, and more. With Edge, released in beta Sunday, Adobe is striving to bring that same ease of use to HTML5 development.

The user interface will be familiar to anyone who’s used Flash or After Effects; a timeline allowing scrubbing and jumping to any point in an animation, properties panels to adjust objects, and a panel to show the actual animation. Behind the scenes, Edge uses standard HTML5. Scripting is provided by a combination of jQuery and Adobe’s own scripts, and animation and styling uses both scripts and CSS. Pages produced by Edge encode the actual animations using a convenient JSON format. Edge itself embeds the WebKit rendering engine—the same one used in Apple’s Safari browser and Google’s Chrome—to actually display the animations.

This first beta is rudimentary, supporting little beyond animations of HTML and SVG content. Adobe plans to add further features during the public preview period, including interactivity, richer graphics, and more flexible drawing within Edge itself. The company plans to release version one of the product some time in 2012.

Even the finished product is unlikely to challenge Flash in the short term. Adobe’s position is that, at least for now, the two technologies can coexist: Flash remains stronger at producing games, handling streaming media, and producing data-driven visualizations; HTML5 is better suited to interactive Web pages and advertising. It’s these latter categories, and especially advertising, that Adobe is concentrating on with version one. Though Flash has wide reach on the desktop, it’s still a rare beast on smartphones, so delivering ads on those platforms—both on the Web and through ad networks like Apple’s iAds—requires the use of HTML5.

The ad focus may diminish Edge’s usefulness on the desktop. Though the software produces animations that work in modern desktop browsers—Chrome, Firefox, Safari, and Internet Explorer 9—and the mobile browsers found in Android, iOS, webOS and on the BlackBerry Playbook, support on the still widespread older desktop browsers isn’t a feature of version one. Adobe representatives weren’t sure what kind of backwards compatibility support would be added, if any—if the feedback during the beta is that people don’t care, because they only want to use Edge with smartphone platforms, then such support may not materialize.

The transition from Flash to HTML5 still poses challenges to Adobe. If Flash dies under HTML5’s attack then Adobe will undoubtedly suffer. However, if Adobe can focus on producing high quality creative tools—rather than software platforms—it should be able to weather this transition and become as important to the Web’s future as it has been to its past.