Matcha Design Blog

Adobe Edge Preview

Jason Brown - Tuesday, August 2, 2011

Adobe has released in Adobe Labs a preview to their new web motion and interaction design tool, Edge. Edge leverages existing and emerging web standards such as HTML5, CSS3, and JavaScript to accomplish its effects, allowing it to work on devices that don't support Flash, such as Apple's mobile devices. It's in early development, and many of the features haven't yet been implemented. Notably, the interaction side is quite lacking.

This early version focuses on "adding rich motion design to new or existing HTML projects." Anyone who's done timeline animation in Flash should have a fairly easy time figuring out Edge. The concepts of the interface are fairly similar. The timeline isn't split up into abstract layers however, but each property of each element has its own row on the timeline. This makes it very easy to animate different properties at overlapping times. The animation uses key frames, and allows the user to select an easing method from jQuery's easing library.

Again, many features, including some very basic ones, are yet to come in this preview. The toolbar contains only rectangle, rounded rectangle, and text, though images can be imported from the menu as well. Customization of the generated HTML is also not as robust as I'm sure it will be when the project is officially released. 

Overall Edge looks like it'll be a great way to visually create motion and interaction in HTML elements. At this point it's like judging a movie by its trailer though, as there's only a little bit there with promises of much more to come. Still, the features that have been implemented so far seem to work pretty well, and if they keep adding features with the same quality, it'll be a great alternative to Flash or manually programming jQuery animations.

Below is a rough sample animation created with Edge by our creative director, Chris Lo.

Below is a screenshot showing the Edge interface.

Finally, a screenshot to give you an idea of the different files used and generated by an Edge project.

About Matcha Design
Matcha Design is a full-service creative agency specializing in web design, print, identity, branding, interface design, video production, still photography and motion design. Using our passion for excellence, multi-cultural background, and award winning practices, we consistently provide high-quality, custom, innovative solutions to meet the diverse marketing needs of our clients. For more information, visit www.MatchaDesign.com.