Adobe’s new web design tool Edge lets you build Flash-style animations by adjusting the attributes of elements in an HTML file. The results are rendered using HTML5, JavaScript and CSS. This means modern browsers, including Safari on iOS, can display the results without the need for Flash Player. Edge is at the first stage of a public preview phase and is free to download. Adobe plans to update the preview regularly and turn it into a commercial product in 2012.

This initial preview version’s capabilities are firmly focused on animation. It doesn’t bother with anything more than that at present. When a file is opened, Edge looks for <div> elements and shows each one as a layer in the timeline across the bottom of the window.

External image files (SVG, JPG, PNG and GIF) can be placed on the stage – Edge links them into the HTML file. However, whole PSDs can’t be imported, so neither can specific layers to bring in assets from a wireframe designed in Photoshop, as recent versions of Flash can.

A text tool is provided to directly add type to the page, without having to open the page in another tool. The only drawing tool adds rectangles on the stage, but the Properties panel offers options, including optional rounding of each corner by different amounts. Edge generates the CSS for object and text styles.

Animations are built in Edge by interacting with the stage, timeline and Properties panel, just like in Flash

Animations plotted out with the timeline and by adjusting object properties are built to play back using the jQuery JavaScript library, but coding knowledge isn’t needed to assemble and animate assets within Edge.

Objects’ durations on the stage are represented by coloured bars, and adjusted by dragging a bar or its ends. Keyframes that change an object’s attributes are shown as diamonds, like in Flash. Really, there’s nothing here that won’t be abundantly clear to anyone who has animated in Flash. Properties can also be manipulated on the canvas and in the Properties panel, which work as in any Creative Suite application.

Styling and animating

To save time, easing, bouncing and rotation effects are quickly added in the Properties panel, where basic parameters can be adjusted. The timeline could do with a visual indication of where such effects are added, if only to help distinguish between elements at a glance. However, clicking a disclosure triangle next to a layer in the timeline reveals additional rows that succinctly show which attributes are being animated, with each on its own row.

Information that needs to persist each time a page is opened gets stored in an adjacent project file. That includes markers added to the timeline to help understand its structure, visibility of each element on the stage, and which ones are locked to avoid inadvertent changes. There’s no way to group layers into folders to make the vertical structure clearer, though, so complex files can appear daunting.

At this stage, Edge’s heavy focus on styling and animating content – and in lieu of a robust workflow that scales to the construction of multi-page sites – means it’s best suited to the creation of self-contained animations, such as banner ads, at present.

In a future build, Edge will gain features to add interactivity, and without having to take code into another editor. Thankfully, it works directly on HTML files, so it sits comfortably alongside other tools in that respect because there’s no step to create output – it’s worked on in place. In contrast, Hype works on its own project format and lacks HTML import. That goes strongly in Edge’s favour.Macworld’s buying advice

Edge has basic animation down pat, but it needs to scale up to cope with building large, animated sites. That depends on interactivity features, due as the public preview progresses. Try it out to prototype ideas, but jQuery knowledge is needed to put the results to good use.