First look: Adobe Edge makes HTML5 dance

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

Page 2 of 3

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.

As near as I can tell, Edge likes clean, orderly, well-structured code, without a lot of extraneous elements and not too much CSS or JavaScript getting in the way. When you feed it real-world code, however, it's a crap shoot. You'll know when it's struggling because it will get sluggish and may crash. If you succeed at adding animations to a complex page, at least with this preview version, count yourself lucky.

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.

| 1 2 3 Page 2
From CIO: 8 Free Online Courses to Grow Your Tech Skills
View Comments
Join the discussion
Be the first to comment on this article. Our Commenting Policies