Adobe : Edge HTML5 animation tool preview video

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 , (see below) 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, when it’s probably a good idea for users to have some knowledge of coding to verify that the generated code is clean.