Spent a few hours this week playing with Adobe’s HTML5 development tool, Edge, and  rather than posting a 140 character synopsis on Twitter, I thought I would jot down my first impressions to help the team in any way I could. Keep in mind the tool is still not even a pre-beta, it’s just a way for Adobe to get the product in front of people’s eyes sooner rather than later, get their feedback and tweak the features list accordingly as they continue to build it. It is not feature complete by any means, and you can go here an give it a go yourselves:
http://labs.adobe.com/technologies/edge/

UI/UX

I found it really easy to jump in, load in the example files that are linked from the Welcome Screen, see how they were made and then I was doing it myself within 5 minutes. That is about 700,000x faster than it took me to learn Flash back in the day. That’s a testament to the clean UI which feels more like AfterEffects or Premiere than Flash for sure.  I found myself trying to maximize space with the pallets and that was not simple. For example, I tried to put ‘Elements’ under ‘Properties’ because otherwise much of the Properties is dead space on my 24” monitor. This is not really feasible currently – and the way pallets snap together and/or collapse and become tabs is funky.  Something I’d like to see in the layers portion of timeline, is clicking a div (layer name) and the entire layer highlight (like Flash), and even better, when you drill down into properties that are being animated, have that whole line highlighted to increase speed of finding things. Would also like have the option of an adjustable gradient in the Theme like AE does. I’m not a fan of flat themed UIs.

KEYFRAMES

I found setting Keyframes a little strange at first because I’m too used to Flash. My instinct was to right-click in the timeline and look for an ‘Add Keyframe’ option in the context menu, or perhaps just hit F6, but then I watched a few fantastic videos from Adobe’s Mark Anders (http://tv.adobe.com/watch/adc-presents/preview-of-the-edge-prototype-tool-for-html5-/)
and it became clear why adding Keyframes was done this way – there are too many CSS properties to animate and we need to help the timeline out a little. And also the little AE like diamonds were a dead give away – still don’t know why some are half-yellow.  I do like the marker very much. It adds essentially an arbitrary new starting point in an animation, but I would really prefer just hitting an F key for this because on a big timeline you’d have to scroll far to see where it is.

ANIMATING

This is perhaps the biggest strength. It’s really easy to start animating things in Edge. You have access to all kinds of easing and copy/pasting and editing your animations within the timeline itself. It is really intuitive and easy. You just place an element on the stage, add a keyframe, then you can move the timeline around, expand/contract, copy and paste as inverse for quick reverses. Anybody can grasp this tool easily.  Don’t like a sequence or keyframe, just delete it.  The toggle for setting keyframes automatically will likely cause many ctrl+z around the design world, so maybe Adobe should make this a little more obvious what it does.

DOM

I found the DOM tree and duplicate DOM values in the timeline a little odd at first too, but that also becomes clear that a really big HTML file would be far too big to stick in the timeline and show you all of it, so in the timeline you just see what you’re animating. I definitely like the AE/Premiere like way to scrunch up the timeline with the slider to see all of it and wish Flash had that too.  I really like that you can basically load any html file into the app, and see it rendered in the embedded Webkit stage, so it is a lot of fun to just take random web pages and inject animations so quickly.

WISHLIST

Of course the #1 thing I would want is interactivity and I’m sure that is coming since it was in the 2010 Max sneak peek (and greyed out in the menus). I would also love the ability to add interactivity via Actionscript or Javascript. Possibly by exporting a swc from Flash or Flex and importing that into Edge.  Perhaps it’s in the pipeline for Flash to export animation to JSON notation similar to how it currently has an ‘Export Motion as XML’.  What’s clear is there is huge potential to kind of merge Flash with this tool or just give it some of Flash’s stellar capabilities. For the timeline, I would like if it were easier to distinguish what properties are being animated more easily. They are currently color coded, matching the timeline layer it comes from, but I would like to set all my Opacity tweens to orange, all my scales to blue, all my movement to  red etc…
I also would like to see more HTML5 features such as named sections vs. generic DIVs (for semantic reasons), and the ability to build and store templates to take advantage of HTML5’s strengths. For example,  <section id=”Address”>.
In it’s current state it’s kind of hard to tell how big filesizes really are and what CPU demands these animations might take, and also how that would differ across multiple screens and browsers.  With Flash it’s pretty easy to just look at that binary and see exactly how big it is.  As it is now, I guess you add up the javascript, includes, assets file sizes and viola. But I do not know how the browser will compresses the assets so maybe some kind of ballpark number and/or an emulator would be a good fit.

CONCLUSION

I’m really interested to see how this product will evolve. How will interactivity will be scripted, what Adobe products will get round-trip editing first (Dreamweaver, Flash, Photoshop, InDesign)? Perhaps we will see the ability to add video and other rich content? Perhaps we could specify Canvas vs. SVG. Will this become a rich application building tool, or more of fast and drastically easier way to add some Flash-like bling to interactive content. It does not really make sense for say an enterprise template – although if we can export and save these as templates of sorts, you could add animations to dynamically built html files. It feels a little more for one-offs, components of HTML5 pages and applications (for now), and of course it is primed to be the new defacto banner ad creation tool that Flash has been for 10+ years. I’m also just curious to see people push the envelope with this – at some point some poor sap is bound to spend a year making a two hour feature film with it.