Adobe unveils Edge motion and interaction design tool

Today's Best Tech Deals

Picked by Macworld's Editors

Top Deals On Great Products

Picked by Techconnect's Editors

Adobe has unveiled Edge, a new motion and interaction design tool that lets creative pros build Flash-style animated Web content using HTML, JavaScript, and CSS. It is available now as a free public preview release from Adobe Labs.

Adobe is making this software available much earlier in the development process than usual—before it reaches beta—to accommodate user feedback to help shape the final product. Edge is planned for commercial release sometime next year.

Adobe Edge, designed to work in concert with the company’s existing professional design tools—Dreamweaver CS5.5, Flash Professional CS5.5, and Flash Builder 4.5 (as well as earlier versions)—is targeted to designers seeking an efficient way to use Web standards like HTML to create content featuring motion and transitions.

Designed as a fast and lightweight professional tool, Edge derives some of its inspiration from Flash Professional and After Effects, and Adobe envisions that users eventually will employ Edge as a faster and easier tool to accomplish some of the tasks they now do with Flash.

"HTML has become much more capable as a technology with the introduction of the new HTML 5 functionality so we're seeing people starting to use, or addressing use cases that were once reserved for Flash, with Web standards," said Devin Fernandez, product manager for Adobe Edge. "It's starting off in a simple manner with simple ad content, but we see that evolving and getting more capable over time...We see HTML 5 as a huge opportunity both through technology and as a business opportunity for Adobe."

The Adobe Edge workspace shows a rich ad animation in development using imported graphics and free form drawing tools.

Adobe Edge works natively with HTML. It lets users add motion to existing HTML documents without altering the design or CSS-based layout. Users can import standard Web graphics such as SVG, PNG, JPG, and GIF files and style them using CSS3. It also lets users create visually rich content from scratch with familiar drawing tools that produce HTML elements styled with CSS3.

The design stage (the workspace in Edge) uses WebKit to enable content design, preview, and manipulation. The timeline offers advanced techniques to boost productivity and precision in creating animations, and lets users define and customize motion applied to HTML elements, Adobe says.

"What I like about Edge is that it brings the timeline model familiar to many Flash authors to the new world of HTML 5 and JavaScript, while allowing HTML and JavaScript developers to do more complex things," commented Al Hilwa, an IDC analyst specializing in applications development software. "Not only can a kid use Edge for fun projects, but you can see how serious designers can use it to build motion applications with some significant complexity."

Content created with Edge is designed to work on browsers such as Safari, Chrome, and Firefox. Edge content can also be viewed on mobile devices running iOS, Android, BlackBerry Playbook, and HP webOS.

Adobe looks forward to feedback on the public preview and plans to update the software regularly to add new functionality. Users can sign up for email notifications to get the latest on new builds of the software.

Adobe Edge is immediately available worldwide for Mac and Windows via a free download on Adobe Labs. More information is available on Adobe’s website. On the Mac, you need to run OS X 10.6 or 10.7 to use Edge.

Adobe Edge is used to add motion to an existing HTML document.

Meetings and websites

In related news, Adobe is sponsoring a series of Expressive Web Tour HTML 5 Camps in various cities worldwide to support creatives who are interested in working with and learning more about HTML 5. Planned locations currently include San Francisco, Tokyo, New York, and London.

In addition, Adobe has launched a new website showcasing some of the newest and most expressive HTML5 and CSS3 features on the Web. The site, released in beta, was created using new HTML 5 and CSS3 features.

Note: When you purchase something after clicking links in our articles, we may earn a small commission. Read our affiliate link policy for more details.
At a Glance
  • Adobe Edge

Shop Tech Products at Amazon