Quick thoughts on Edge (Adobe's html5 keyframe animator) workflow & practicality

Edge[1] is Adobe's upcoming html5 version of Flash. I just finished giving the free alpha a shake.

It uses a timeline and keyframing similar to what you see in the Flash editor.

It spits out a list of keyframes as as js list, which is then translated by edge's js into the appropriate series & combination of jquery animations.

Some of the reviews are overly pessimistic because the editor starts blank and all you can add are boxes & text. But you can also load up existing html and work on that.

The workflow to get anything useful to happen is kind of annoying, since it won't handle templates properly and you need to inline your css.

  1. Inline your css
  2. Load up the desired template in a browser
  3. View & save source to strip the templating
  4. Load that html into Edge
  5. Create animations
  6. Dig out the animation js object and add it to your project

So that's pretty annoying for now! But the keyframe animation editor is a huge time saver compared to editing jquery animations by hand, so if you are using lots of them all in one place, the time savings might be worth it.

The biggest gain is going to be making slight tweaks to a complicated animation, since it's a nightmare to stretch, squeeze, and re-organize the timing of a long string of animations by hand.

A less common case which is also a huge win for Edge is if you're doing something like rotating, scaling, and moving all at once where the resulting coordinates are going to be non-obvious.

[1] http://labs.adobe.com/technologies/edge/