This week I had the chance to play around with the first preview release of Adobe Edge. Edge allows web designers and developers to create web standards based animation without doing any coding whatsoever. Reminiscent of the way in which Flash helped to open the world of web animation to designers from non-technical backgrounds, Edge stands poised to lower the barrier to entry into HTML5, CSS3 and Javascript animations. In an environment that has seen Flash become somewhat of a pariah, embracing the open web is a logical way forward for Adobe. While it’s still very early in development, Adobe has managed to do some impressive things with Edge, and releasing it this early demonstrates that they are serious about incorporating user feedback into future iterations. Now, let’s get under the hood…
The interface borrows heavily from the Flash UI. So Flash users will be up and running in no time with Edge. There are five main panels: Tools, Properties, Elements, Stage and Timeline.
Elements are added to the stage either by creating them from the tools panel, or by import (SVG, PNG, JPG, GIF). For now the tool set is limited to text, rectangle and rounded rectangle but that will certainly expand as the product develops.
Animation within the UI is done using keyframes and tweens that are graphically represented on the timeline. Unlike Flash however, tweens are generated automatically between two keyframes, and the concept of “blank” frames is removed entirely. You can also select and modify the length of all the tweens for one element simultaneously, something that I found myself using constantly. Layers have changed as well, with each element in the animation becoming its own layer, so no ability to create empty layers and group elements at all. The result is a greatly simplified and streamlined experience. Think of it as Flash lite. We’ll see how this handles the increasing complexity of successive releases, but for now it works quite well. Within a few hours I was able create an animation that would have otherwise taken much, much longer had I coded it by hand. In this respect, Edge is already on the right track.
The animation is rendered using JSON, the JQuery javascript library and CSS3. Despite being billed as an HTML5 tool, Edge doesn’t generate HTML5 code at all. That means no SVG or Canvas (you can import SVG, however). According to Adobe support for HTML5 animations will be included in future releases.
One of the major drawbacks in this release is that Edge outputs non-semantic HTML. For example, there is no way to assign <p> or <h1> tags from within the UI. All elements are wrapped in meaningless <div> tags, to be manipulated externally via Javascript. This poses a number of problems in terms of accessibility, browser rendering, validation and SEO. According to Adobe, they are aware of the problem, but chose to sacrifice semantics in order to get this version out quickly and accumulate feedback. We’ll be following closely, as this is certainly a deal-breaker in its current form.
Another important feature that didn’t make the cut is interactivity. Currently there is no way to add links or other interactive elements to your animations without modifying the Edge-generated code externally. Again, this being only a limited preview, we can certainly expect to see this functionality added as development continues.
Since Edge uses the latest CSS3 animations, only newer Webkit browsers and mobile devices can render the output. This means no IE support below version 9, making its use impractical for most production scenarios today. That being said, this puts Adobe in a much better position moving forward, as more and more people adopt standards friendly browsers.
Despite the drawbacks, Adobe Edge is an important first step towards a future of cross-compatible, standards based web development. It will be interesting to see how Edge will be incorporated into the Adobe family; whether it will be released as a stand-alone or simply amalgamated into future products. And let’s not forget about poor old Flash. What impact with this have on Flash in the long term? Is this a signal that Adobe is ready to transition away from one of their core products, or perhaps narrow Flash’s focus into an area where it can maintain its competitive advantage, like gaming, for example? In any case, there’s no question that Edge has the potential to be a game-changer.
With the introduction of Edge, Adobe is taking a huge step outside its comfort zone and embracing a vision of the future of the web that many people have been advocating for quite some time. Let’s hope that they continue moving in this direction.
