Three HTML5 animation tools: Adobe Edge, Sencha Animator, Tumult Hype

Adobe Edge (Preview 3)

The newest entry to this class of applications is Adobe's much-anticipated Edge. Well, new in the sense that it's not officially released yet. The first alpha (Preview 1) came out in August 2011; currently, users can download Preview 3.

Edge has an interesting provenance, given that it's made by the same company that has driven the very technology that HTML5 is trying to replace: Flash. Because of this heritage, you would expect Adobe to spend a lot of time making sure Edge is a top-of-the-line animation tool. And so far, it definitely seems to be on track. Even in this early iteration, Edge is an extremely powerful application.

The interface for Edge is fairly typical for animation tools. Properties, Timeline, Stage, and Element panes are all there, much like the tools found in Animator. Unlike Animator, though, this workspace is customizable -- panes can be resized and undocked, and entire workspace configurations can be saved for later use based on user or project preferences.

This snazzy interface does quite a bit more than its competitors -- each object is color coded on the Timeline, for instance, a nice touch that I wished Animator or Hype had when I was lining up objects with their respective rows.

Also present is the capability to multi-select objects to group them together so that they can be affected in the same way. You can also copy a set of actions and paste them somewhere else in the Timeline. "Paste Inverted" is a particular favorite of mine, as it enables users to easily create "mirror" actions of an animation around a certain point in the timeline.

This is very much a developer's app, with pop-up windows that give you access to the actual JavaScript code for a given element's action. Adobe also has collaboration in mind with Edge: After the JQuery and HTML files are created, they can be edited by multiple users and, once saved back to the appropriate folder, Edge will note there's been a change and will incorporate the changes in the project. This is something that -- for now, anyway -- is beyond the capabilities of Hype and Animator.

Another cool Edge feature: Existing HTML pages can be imported and various elements converted to a form that Edge can manipulate.

All Edge projects are managed through a single file, which tracks all of the resource files for you and makes it easy to manage and upload the resource files to your web server. (This is also how Edge lets you edit individual files and integrates the changes into the project.) Such file management is useful, as Edge's output is JQuery-centric, with multiple JavaScript/CSS3 files that all need to be tracked.

Bottom line

Edge has a lot of power under its hood. Once this application is fully cooked, it could be the Cadillac of HTML5 animation tools.

That also means, however, that the learning curve on this app is steeper than the other applications covered in this roundup. Some help can be found in Adobe's strong library of training videos and Edge project examples, but even so, this is not exactly a tool for beginning animators. Experienced animators will find the wealth of powerful tools in Edge a real plus, and once the inevitable glitches of Edge's alpha status are polished out, those animators could be the customer base that appreciates Edge the most.

It's important to remember, too, that this is just an alpha version of Edge. When this version was reviewed, there were no glitches to be found, though that doesn't preclude their existence. It also means that the feature set seen in this version will not remain static -- there could be more or less features in the final version of Edge.