First look: Adobe Edge makes HTML5 dance

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

Page 3 of 3

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.

This article, "First look: Adobe Edge makes HTML5 dance," was originally published at Follow the latest news in software development, languages and standards, and HTML at For the latest business technology news, follow on Twitter.

| 1 2 3 Page 3
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