∞ Adobe releases HTML5 Web Motion and Interaction Design Tool

Adobe on Monday released a new tool called Adobe Edge that will allow Web designers to bring animation to Web sites using HTML5, JavaScript and CSS.

[ad#Google Adsense 300x250 in story]“Our customers have said they are excited about what’s happening around HTML5, and we want to give them the tools they need,” Adobe’s Heidi Voltmer told The Loop.

Voltmer explained that Flash will continue to be focused on the top end content, while the company makes tools like this available for Web designers who need to input exciting elements in their Web sites.

Adobe Edge is being released to the public even before it hits the beta stage. Adobe said it wants to develop the software with the help of the people that will ultimately be using it.

Adobe’s Josh Hatwich said the interface for Edge will be very similar to After Effects and Flash Pro, so users will have some familiarity with it starting off.

“We wanted to make it approachable and familiar for people,” said Hatwich. “To take something that requires intimate knowledge of technology and allow people to harness it and take advantage of it.”

The first public release is limited in scope, but that’s a short term issue, while the team gets feedback from users.

“We focused preview one on animation, but we know that people will want more,” said Hatwich. “We are expecting to add a lot more functionality to the product.”

According to Adobe, Users can import standard web graphics like SVG, PNG, JPG and GIF files and style them using CSS3. The design stage utilizes WebKit to enable design, preview and manipulation of content.

Using the timeline in Edge, you can add motion to the assets, so you end up with a project that looks like it could have been built in Flash, but it’s built with HTML5 and CSS.

Content created with Edge is designed to work on modern browsers including those on Android, BlackBerry Playbook, iOS, HP webOS and other smartphone mobile devices. The content will also work with Firefox, Google Chrome, Safari and Internet Explorer 9.

Adobe Edge preview one is a free download, available from Adobe Labs. It comes in versions for Mac OS X and Windows 7.



  • http://twitter.com/Moeskido Moeskido

    The demos look good. If this isn’t more Flash bloatware, it’s a great step forward.

  • Vamsmack

    This is causing a bit of a stir online. The only thing that is HTML5 is the Doctype. CSS3 is mostly ignored at this early stage and none of the HTML5 elements are used(again aside from the doctype). 

    It’s a pain in that it currently uses a lot of DIV’s for animation instead of Canvas and SVG. All the animation appears to be done in JavaScript rather than CSS3 but Adobe have said in their forums that this will change as the product is further developed. 

    In saying that I do have hope for this. Any tool which can put animation using JS, CSS3 & HTML5 into the hands of a designer is a good thing. Designers will have a leg up here as well especially if they’re familiar with Flash or AfterEffects as it uses a similar set up with a time line and keyframes which makes picking it up and playing remarkably straight forward.