First Look: Adobe Edge makes HTML5 dance
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.
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.
Not quite Flash, but it’s getting there
Creating animations in Edge is simple but it takes some getting used to. First you must import “symbols” and position them on the “stage.” These are terms borrowed from Flash, but in this context, a symbol is a GIF, JPEG, PNG, or SVG graphic and the stage is the active window. You can also create symbols directly in Edge, though in this preview version that’s limited to rectangular boxes and text.
Once you’ve collected your symbols, you can maneuver a pair of “playback heads” on the animation timeline to specify the starting point and duration for any effects you want to apply. When you apply an effect to a symbol, Edge automatically fills in the keyframes to animate it for the duration you specify. If you change your mind, you can modify the effect’s duration, delete it, or move it up or down the timeline as you see fit, eliminating much of the repetitive trial and error of purely code-based animation techniques.
The animation tools offer a variety of effects to choose from. You can move symbols around the stage and have Edge animate their motion. You can rotate, scale, and skew them. You can also control their opacity, making them fade in and out.
Edge also supports the concept of “easings,” which are behaviors that can be applied to animation effects. For example, if you move a symbol across the stage, it can slide smoothly, or it can shuffle, wobble, or bounce. Easings in Edge inherit their names from the jQuery Easing plug-in, which means they have such less-than-helpful labels as easeOutSine, easeInCubic, and easeInOutExpo.
Getting the hang of the tools isn’t difficult, but working within Edge can be awkward. The overall UI feels slow and crash prone. Animations play back much more smoothly in a browser than they do in the Edge environment, where they look jerky and seem to play at a low frame rate.
Note, too, that many of Edge’s effects rely on CSS3 properties that are only available in newer browsers. None of my test animations played properly on Firefox 3.0 or Internet Explorer 7, while all of them worked on Chrome 12, Firefox 5, and IE9. Some of Adobe’s own demo files played differently in Firefox than in Chrome. WebKit-based browsers seem to work best for now, but you must expect inconsistent behaviors as long as support for HTML5 and CSS3 varies across browsers.
Not quite Dreamweaver, either
In addition to creating new animations, Adobe says you can use Edge to add animation effects to existing Web pages. In practice this proved difficult, however, because Edge’s HTML parser is extremely unforgiving. I tried opening a number of HTML pages, including some from my own past projects and some saved from the Web, but mostly to no avail. Either Edge wouldn’t recognize the objects on the page as symbols, or it could see them but couldn’t apply transformations to them. Or if the page were sufficiently complex, it would merely freeze or crash with an error. To give you an idea, even working with Google’s home page gave Edge trouble.
I tried to figure out what was tripping up Edge. I dove into my files, converting older pages to HTML5, stripping out tables, removing CSS positioning, and dropping any unnecessary styles. Nothing seemed to help. Even after I’d pared down one page to little more than a stack of images on a white background that validated as HTML5, Edge still couldn’t do anything with it. Then I added ID properties to all of the image elements, and suddenly everything worked! That was odd, since Edge had also worked on another page where none of the elements had IDs.
I’m reminded of the early days of Web IDEs such as Dreamweaver and GoLive. They claimed to make building Web pages as easy as drag and drop, too—and they tended to disappoint. It seems parsing and manipulating complex HTML documents with visual tools is more challenging than it sounds.
Standards-based but proprietary
That means there’s no reliable way to add interactivity to an Edge project, either. Unlike Flash Professional, you won’t be using Edge to build games. You’re limited strictly to timeline-based animations—in fact, there isn’t even a way to make an animation loop continuously.
A valiant first attempt
The Adobe Edge Preview is billed as a product of Adobe Labs, and that’s apt. At this stage, everything about it feels experimental (and not always effective). Still, I know of no other tool that can do what Edge can, and the fact that even Adobe struggles to do it successfully is testament to the scope of the problem Edge is trying to tackle.