Still only in prototype form, Edge is an HTML5 animation tool that makes it easy for web developers and designers to create animations and transitions without having to slug through line after line of HTML5 code. It is also the beginning of the end for Flash, says many experts.
Edge was demoed during the Adobe MAX 2010 keynote address by Adobe CTO Kevin Lynch and is described by Adobe Fellow Mark Anders in a video on Adobe TV as an example of some of the concepts Adobe is looking at bringing into an actual tool sometime in the future. While it is relatively simple to create an animation with HTML5, it can be difficult to choreograph the movement and transformation of various elements of an animation so everything moves where you want it when you want it. It is the choreographing these various elements that Edge focuses on.
The Edge user interface will be familiar to Flash developers with a Stage window displaying the layout of the HTML5 page and a timeline window underneath showing the modifications to various elements over time. To the right of the stage is a Layers panel showing to identify DOM elements. Selecting a layer will display that layer’s properties in the property explorer, which also supports the new CSS transformations in 2D and 3D. The Flash similarities also extend to the use of “Actions” to manage groups of transitions and “Symbols” to group objects.
The Edge prototype uses the Webkit rendering engine to preview animations. Like Dreamweaver, Edge offers a source code editing mode so, like Dreamweaver, it’s probably important to have some knowledge of coding to verify that the generated code is clean.