Adobe during its annual developer’s conference has previewed an IDE for HTML5 animation. The IDE, codenamed Edge, uses the WebKit rendering engine to preview animations and like Dreamweaver, offers a source code editing mode.
The Edge UI follows the same principles as the other Adobe tools, so it will be familiar to Flash developers. It features a Stage window displaying the layout of the page and a timeline window underneath showing the modifications to the various elements over time. To the right of the Stage is a Layers panel for DOM elements. Selecting a layer will display that layer’s properties in the property explorer and supports CSS transformations for 2D and 3D. There are other Flash similarities like the use of Actions, Symbols, etc.
Under the hood, Edge uses jQuery and CSS to manage transitions:
// Action executed on a specific event , e.g. button is clicked $.Edge.symbol.get(‘#pageHolder’).showContent(‘coffe’);
For the demoed example, Edge also seems to be using jQuery UI and the jQuery Easing plugin.
For more information, AdobeTV features a video [Flash] with Mark Anderson demonstrating the IDE prototype.
It is still unclear how far Adobe is aiming to take this prototype and if it will soon be demonstrating more core-HTML5 technologies like <canvas> and <video>.