Adobe Edge preview provides Flash-like animations in native HTML5 and CSS

Adobe Edge preview was released this Monday, August 1st, 2011.

Upon first glance, Adobe Edge appears to have a simplified user interface. It looks like a Flash Professional interface with some shape drawing tools, with a combination of the timeline controls found in Adobe After Effects. Designer and developers can try it for 152 days by visiting the Edge download page.

At first a little skeptical of such a simple interface, one should realize that this new Edge technology is indeed a preview release and Adobe will add more features as time goes on.

The opinion may also change when it comes time to actually using and digging deeper into the Edge features. Taking a look at the image below, you'll notice there are controls for building text, simple shapes, colors, skewing the shapes, changing opacity, rotations,  and then an animation timeline at the bottom. On the right side, it shows all elements on the canvas separated into <div> tags, which of course are found commonly in HTML5.

This timeline appears very similar to the one in After Effects, so anyone using that program should immediately be familiar with how the keyframes work and how to move the objects across the screen. There are also 25 built-in easing effects for added animation effects.

Adobe Edge also allows importing of extra graphics in formats from Photoshop and Illustrator in SVG, PNG, JPG or GIF files. This is a good feature since it seems this preview release is somewhat short on the graphics drawing tools for now. It should be expected the Edge team will add more features as time goes along, though.

Users of Flash Professional should be able to figure out Edge and its possibilities within minutes. Though the developers used to using scripting languages might be slightly offput by the fact there is no panel for writing code directly within the program yet. Considering many use code (such as Acctionscript 3, Javascript or jQuery) to create more advanced animations it might take some getting used to adding this separately, outside the Edge interface.

This is possible, as the program allows a designer to save their project as an HTML file. It then automatically creates a corresponding folder including the files needed for animation such as the jQuery 1.4.2 file, jQuery easing file and others in native Javascript .min format to be edited by hand  in an external editor at will. This is a nice touch for now, and eventually a code editor may be included directly in the Edge interface in a panel.

Adobe Edge still needs many features added before it comes widely used, but for those wondering if it will be able crate Flash-equivalent animations and advertisements as seen previously, take a look at these preview samples from Adobe: one being a Flash-like animation of a roller coaster, and the other being a rich media ad like those found on many Web sites.

So far, this looks to replace the previous Adobe Wallaby technology that converted Flash to HTML5 elements and CSS. There is still much work done before Adobe Edge will have enough features added to completely replace all the advancements, custom components and plugins made for Flash over the years however, especially in advertising where there are many components built into Flash which provides analytics and more. For now, Edge is a Flash supplement and not a replacement.

Give it a try by downloading Edge here, and please share your thoughts and opinions below in the comments as it is encouraged.

Leave a comment