Adobe Edge free preview makes Web animations simple

The Flash-versus-HTML war is mostly hype.

HTML5, CSS3, and JavaScript can’t accomplish everything Flash can do today, and at their current rate of development, they’ll take a long time to catch up (while Flash remains a moving target).

Still, HTML5’s capabilities are rich enough that many developers have wondered aloud whether Web standards will soon be able to replace Flash for some multimedia applications — particularly in light of Apple’s refusal to allow Flash on iOS.

Clever Web developers have been producing impressive demos ever since the first HTML5-compliant browsers arrived. The problem: It isn’t easy. There are few tools available that give artists and designers the freedom to arrange HTML elements visually, and what tools do exist are generally oriented toward page layout, rather than multimedia. Producing something comparable to even the simplest Flash banner ad can require pages of handwritten JavaScript code.

Who better to fill that vacancy than Adobe? The company has long viewed Flash and HTML as complementary technologies, rather than rivals. In Flash Professional, Adobe already has a mature model of how a Web multimedia design tool should look and feel. Adobe Edge, a new product that’s available now as a time-limited free download, extends that model to allow you to develop animated content in pure HTML, CSS, and JavaScript. As a preview release, it’s still rough around the edges, but it shows a lot of promise.

Taking the programming out of JavaScript

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.

All of Edge’s animation effects are achieved using jQuery and its jQuery Easing plug-in. If you are a Web developer and have worked with these JavaScript libraries before, chances are you’re already capable of writing code that can accomplish anything you could do with Edge. On the other hand, if you don’t know much about JavaScript programming — and especially if you don’t want to know — Edge makes it possible to get satisfying results with minimal code wrangling.

Perhaps more importantly, Edge aims to take some of the pain out of JavaScript-based animation by allowing animators to prototype their sequences visually, using a timeline-based UI that will be familiar to anyone who has used other digital animation tools (such as Flash). This capability alone is handy enough that even experienced JavaScript coders may want to incorporate Edge into their workflows.

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.

Adobe Edge can compose animations using nothing more than Web graphics, CSS, and JavaScript, but you’ll need a modern, HTML5-compliant browser to play them back properly.

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.

Standards-based but proprietary

Edge outputs its animation sequences as a combination of CSS and JavaScript. Although Adobe describes Edge as an HTML5 tool, there really isn’t much HTML involved. When creating new animations, images and other symbols are loaded and positioned entirely using JavaScript, which is called from a virtually empty HTML file. If you’re working with an existing page, your own HTML remains untouched, except for links added to load the Edge files.

For machine-generated code, Edge’s output is surprisingly legible, but Adobe cautions you not to try to edit it by hand. In fact, Adobe seems to want you to concentrate solely on visuals and ignore the code altogether. Edge offers no source code view like you have in Dreamweaver, and there’s no way to add custom behaviors or properties to elements using CSS or JavaScript.

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.

Orchestration and playback of animation sequences is handled by two Adobe proprietary JavaScript libraries, which together add about 60KB to your pages. Adobe grants you a license to distribute these libraries with your projects, but only in compressed, unmodified form.

The Edge Preview also drops its own copies of jQuery 1.4.2 and jQuery Easing 1.3 into your project folder. It creates its own directory for this, so it won’t overwrite any of your current files, but it’s also not smart enough to know what JavaScript libraries you may be using already. If you’re not careful, you can end up with a page that tries to load multiple versions of jQuery or other conflicting libraries.

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.

Even once it matures, however, Edge’s approach won’t be for everyone. Some developers will object to using Adobe’s proprietary JavaScript libraries, while others will prefer to have more direct control over animations at the code level. Edge is probably too bulky a tool if all you want is to dress up corporate Web pages with fancy effects. On the other hand, it could be an effective way to deliver banner ads, infographics, how-to demos, and other canned animations without the need for browser plug-ins — provided, that is, Adobe can provide a richer tool set and overcome some of Edge’s current performance problems.