A Hands-On Look at Adobe Edge
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.
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.