Apps

A preview of Adobe Edge: Trying out animations

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.

In Edge, you work with a timeline like you would in Flash or Silverlight, and add "keyframes." A Keyfame defines a point where you specify what an element should look like. If an element has a different appearance between two keyframes, the system automatically transitions its look as the timeline progresses. In Edge, you can set independent keyframes for every property of an element. For example, in one of my test animations, I had text that started out black with a font size of 24 px, but at the 0:15 mark was pure red. At the same time, I put a keyframe at 0:05 to have the font size be 36 px, and at the 0:15 keyframe the font size was 24 px again. The net effect was for the text to take fifteen seconds to transition from black to red, but five seconds to grow from 24 px to 36 px, and then ten seconds to shrink back down to 24 px.

The code generated by Edge is a basic, plain HTML file with a generated JavaScript file to handle the animations. A quick glance shows that the animation data is stored in JSON format, presumably to be parsed by the other referenced  JavaScript libraries. Unfortunately, the end results were not what I had hoped for. The animations felt jerky, especially when stretched out over a long timeline. Even worse, the results were not nearly what I expected. As you can see in Figure B, IE 9 left some artifacts of the text as it scaled down to a smaller size. Firefox 5 didn't even get the font right (Figure C)! Google Chrome was the only browser to correctly handle the animation and display for this simple test (Figure D). Needless to say, if a simple test like this provided such issues, I certainly would not be hanging my hat on Edge quite yet. And in fairness, it is a Preview, after all... and the first one at that.

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.

About

Justin James is the Lead Architect for Conigent.

2 comments
TexasJetter
TexasJetter

Do you think the animation results differing in IE9/ FireFox/ Chrome were due to Edge???s generation of JavaScript, or the browsers interpretation of HTML5? I know that some of the browsers handle JQuery animations differently, is this a similar thing? I guess what I am trying to get at here is did the display differences in the browser have anything to do with their level of support for HTML5.

Justin James
Justin James

I believe that the IE9 issue was most likely tied to how IE9 graphically renders things... basically, when scaling down, it was not repainting parts of the screen that were not directly affected by the new position/size. The Mozilla problems look like perhaps the styling provided by Edge was not explicit enough. I don't *think* that they reflect on the browsers' handling of HTML5, but I may be mistaken. J.Ja