Test Driving Adobe Edge – Easily Create Flash Like Animations with HTML5

August 2, 2011 Resources, Tutorials

Yesterday, Adobe released the first public beta version of Edge. This is essentially Adobe’s answer to all of the controversy around Flash and device support. With Edge, you can easily create Flash like animations with a simple tool. I took Edge for a test drive and create some sample animations, which I am fully releasing to the community so you can learn as well.

What is Edge?

Straight from Adobe, “AdobeĀ® Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3.” You can download Adobe Edge directly from their website. Edge has a few OS requirements such a Vista+ or OSX 10.6+. The full requirements are available on their download site.

Adobe promises frequent updates to Edge. At the time of writing this post, only Preview 1 was released. You can keep up with Edge’s updates via their Twitter or Facebook accounts.

Thoughts on Edge

I picked up Adobe Edge very quickly. I had used Adobe After Effects a few times before, mainly just playing around with it, and I felt that Edge’s UI was very similar to it. If you are at all familiar with After Effects, you should feel very comfortable with Edge’s UI. If you have never used After Effects before, Edge’s UI is pretty simple, and it shouldn’t take long to get use to.

I’m assuming that it is a bug with the preview version, but on my version (running on Windows 7) I couldn’t see any of the elements on the stage. All I could see what the element’s bounding box when I selected it via the selection tool, or by clicking on the element in the timeline/elements folder. This, of course, made it pretty hard to judge my animations. The only way I could see the elements after creation and animating was previewing the stage in a browser.

I was easily able to create animations using Edge, and it took no time at all. Edge uses a combination of jQuery, custom JavaScript and CSS3 to do the animations, however JavaScript is required to run them at all (at least for all of my examples.) Edge will write all of the required files that you need to run the animation. You can then take the animation and plug it in wherever you want, usually with no conflicts to your other elements on your site.

Animations

I created a few animations with Edge to test its capabilities. The first three were very quick animations that took less than a few minutes each. The sun rising/setting animation took a little longer, but still only took about 15 minutes total. This quick animation time was even with the bug I mentioned above where I couldn’t see the elements on the stage.

You can view the animations below, as well as download the source for all of the animations.

Comments