Welcome to Adobe Edge

DZone 's Guide to

Welcome to Adobe Edge

· Web Dev Zone ·
Free Resource

This morning, Adobe released a preview of Adobe Edge, the first Adobe tool dedicated to HTML5 and CSS3 animations. As the web standards are evolving to enable interactive animations, Adobe Edge lets you choreograph graphical assets on the screen. Motion designers who are used to After Effects or Flash Pro can create advanced animations in few seconds thanks to Edge. You can directly work on the timeline to manipulate your keyframes and add prebuilt easing effects on your transitions. It’s not even an alpha release, it’s a “Preview 1″, that’s why a lot of features are still missing. That said, you can have fun playing with the position of your assets, the scale property or the opacity. When you’re ready, Edge exports an HTML document and leverages the latest features of the HTML5 standard, CSS3 animations and the jQuery library.

I really appreciate the timeline approach. I used to be a Flash motion designer (a long long time ago) before focusing on Rich Internet Applications. That’s why I understood the Edge UI in a few minutes and produced this animation in less than 10 minutes during my lunch break (click on the picture to launch the animation). Test the animation on your smartphones too!

I also want to introduce a new website: the expressive web. Still in beta, this project is a great showcase of the most creative features of HTML5 and CSS3.

It’s good to see that Adobe is committed to providing first-class software for web animators. Now they can also target the latest generation of browsers leveraging the power of HTML5 and CSS3. Hopefully, we’ll see more and more web banners and websites using HTML5 thanks to Adobe Edge. It’s a great opportunity for web animators and HTML designers. But now let’s go back to another source of fun: Enterprise RIAs and Flex…


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}