Justin James takes the recently released Adobe Labs Edge beta out for a spin. He used Edge to create HTML5 animations. Here's how his test run went.
An accepted piece of common wisdom right now is that HTML5 has a lot of application-like functionality that will largely displace Silverlight and Flash in the Web application world. Adobe has finally responded to this pressure, by developing a new tool called "Edge" which allows the creation of HTML5 animations in it. Adobe Labs recently released a free preview of Edge, and I gave it a spin to see what it is about.Firing up Edge gives us a fairly Spartan UI, as you can see in Figure A. So many of the buttons and widgets that you see in a Flash or Silverlight editor are not there. This reflects the fact that Edge is limited to HTML5's animations' capabilities, and that it is in a preview state right now. The capabilities that are there are well thought out, and they work.
Figure A: Adobe Edge, ready to go.
Edge supports rectangles, rounded rectangles, text, and image objects. You can create a lines, circle or eclipse using the rectangles, but it would have been a nice touch if there was a tool built-in to automatically create those shapes. I did not see any way to add vertices to shapes.
Figure B: IE9 show "trails" of the text as it scaled down
Figure C: Firefox 5 didn't get the font right at all!
Figure D: The text as displayed in the Edge UI, and by Chrome; Chrome was the only major browser to handle the animation correctly.
Now, all of that said, Edge is easy to use. The lack of possibilities beyond basic animations is both a strength and a weakness. The tool is easier to use than the alternatives. When I learned Flash (back in the Flash 4 days), the tools were very complicated, even then. It took a lot of practice to figure them out. In Edge, you just set a point in the timeline, create the object, then click the keyframe icon next to a property to add a keyframe for it on the timeline, and set the value for the property at that point. It took me a few minutes to figure out the basic functionality without doing a walkthough or tutorial. That's not bad for animation software. At the same time, user interaction, audio, or any kind of programming (pulling data for the animation from an external source, randomization, etc.) is off limits, at least in this preview.
Figure E: A busy timeline with a number of keyframes on it.
I think that Edge has a lot of promise. I certainly like the idea of working with a tool that does not require a browser plugin (especially to reach iPhone and iPad users), and it is nice to use an animation tool that doesn't have an intimidating number of buttons and windows. If Adobe can work out the technical issues and get a little bit of additional functionality (such as making it easy to do circles and other shapes), Edge will be a fantastic tool to use when it hits Version 1.