Adobe Edge Preview 1

HTML5 needs development tools. It's a powerful way of building next-generation web applications, but the new JavaScript APIs are complex, making it difficult to write code that works well and looks good in the browser. We need tools to help us build new web sites and applications that take advantage of HTML5 features — tools that also take advantage of powerful JavaScript libraries like JQuery.

That's where the first preview release of Adobe's new Edge HTML5 design tool comes in. Initially designed to produce HTML5 animations (more features are promised in future preview releases), it takes the familiar timeline animation model used in tools like Adobe's Flash and Microsoft's Blend and uses it to deliver HTML animations. Built on top of JQuery, with its own additional JavaScript libraries, Edge is intended to simplify creating HTML5 animations using JavaScript and CSS.

An animation in the Edge editor

The resulting animation running in Chrome

Edge is currently a free download from the Adobe Labs site (registration required), and is a quick and easy installation.

There's a lot that's familiar in the Edge user interface, and if you've used Flash, you're going to find Edge very easy to use. Like current generations of Flash design tools, there's a visual design stage where you can drop in visual elements. You can choose initial and final placements for elements, and apply transforms that change shapes by rotating, skewing and scaling. You can also apply transition effects, much like PowerPoint. Edge comes with a large library of transitions, which it calls Easings. These can be used to bring images in and out of the animation.

We found Edge easy to use, and were able to build and test our first HTML5 animation in a matter of minutes. If you've used Flash Professional in the past you shouldn't have too much of a learning curve, as many Flash skills transfer directly to Edge. Images need to be treated as objects, with their own animations and transitions. Once you've placed keyframes on-screen, you can apply transitions and transforms using the timeline. Elements can be in any web-friendly image format, although we'd suggest using SVG if you're planning on using complex transforms as SVG's vector image format produces smoother renderings. Once completed, animations are saved as JavaScript and CSS, with an HTML stub that can be added to existing HTML pages. Data is stored in JSON format, so you can use server-side tools like gzip compression to improve performance.

There's no JavaScript editor at this point, so you're limited to the tools Adobe provides. That does limit Edge to providing basic animations with little or no interactivity, as there's no event support yet. Lake of interactivity leaves the first preview of Edge as something of a curiosity. Until Adobe adds support for events, Edge will be limited to being used as a tool for making HTML5 banner adverts for platforms that don't support Flash, but do have HTML5 support, like Apple's iOS. Designers and developers with bigger ideas will need to wait for later releases — which, according to Adobe's FAQ and message board responses, will additional features such as motion paths and animation loops.

Edit animations using familiar timelines and transitions

One thing to remember is that Edge isn't Flash. Flash has had more than a decade of development, and can take advantage of its own run time. Instead, Edge is a tool that builds on a set of developing standards and that has to work with browsers that are implementing those standards in different ways and at different rates. You're not going to be able to use Edge to do the same things as Flash for a long time, if ever.

HTML5 designers need tools like Edge to get the most out of the next generation web. There's a lot of promise here, even if this first preview only delivers basic animation features with no interactivity. We're looking forward to further Previews, and to see just what Adobe does to continue simplifying the more complicated parts of HTML5 development.

Simon Bisson