Thursday, December 8, 2011

Adobe Edge Preview 3 - REVIEW

Here at Bonozo we've been working on several exciting projects for the mobile markets and had the opportunity to give Adobe Edge Preview a shot.  

Out of the digital box, Adobe Edge is a pretty slick piece of software.  The interface is unobtrusive and you can almost immediately tell how they want you to use it.  Or so it would seem...

The Layout

Here it is folks...

"The Business End" - labeled appropriately so (by me and not by adobe) because this is where you see everything you're actually doing.  This is pretty standard, "put the most important thing in the middle".

Pros -
  • Scalable (also pretty standard)
  • You can zoom in and out pretty easily
  • The stuff off the screen is visible (so the stuff that is hanging outside of your canvas is partially transparent and darker... this is rad, and probably pretty standard.)
  • Dock it or not dude, it's all good... (docking capability - also standard) - But not standard is the way they do it... which is pretty slick.  It's not immediately obvious but it shows you an adorable graphical indicator of where it will be docked...  here's another picture:
  • Cute huh?
Cons -
  • Unfortunately you can't drag content from an explorer window into the "business end".  This is kinda frustrating, but hopefully will be something they implement in future releases
  • When moving elements around the rendering flips out sometimes, distorting the images and making things look a little funky.  May be a graphics card issue, but isn't so bad that it dramatically affects productivity, just makes it a little difficult sometimes to align elements.
  • Some images when manipulated get blurry.  Really blurry.  So if you're going to be scaling any images, you should make them larger than you would normally and scale them only between 0 and 100%.  This reduces the artifacts, but doesn't remove them.  The dithering on images scaled to <100% is still pretty bad, but isn't terrible.
  • The guides don't always align with the element.  So if you're manipulating your objects, it's best to do it when zoomed all the way out (fit the canvas to the preview window as close as you can) otherwise, the "gizmo" will be way off...
     The image on the left shows the gizmo as it should appear (constrained around the element).  The image on the right shows what happens when you use the vertical scroll bar to change the view in the "business end".  Scrolling down moves the gizmo.  To resolve this, zoom all the way out, and everything is fine.

  • Sometimes elements won't allow you to select them, unsure why this is.  Probably another thing to do with the gizmo being all wacked out at times.  (Gizmo being the blue box around the element...  sure there's a name for this that's not gizmo, but whatevs.)
  • The purple alignment guides flicker a lot and show up randomly when manipulating objects.  It's not immediately obvious what their purpose is, because of their flickering.
"Properties" - Change properties of the selected element(s).

Pros -
  • Works as expected.
Cons - 
  • No indication of key framed properties.  This is useful in other animating software.  Highlighting fields that are animated and whatnot or putting a red box around sliders that are keyframed.
  • Source: is not a property that you can change, it only shows you the elements source location.  This is only somewhat useful/relevant considering the fact that when you import an image or other resource it moves the resource to a location in the folder you've saved your .edge document.  So images go to //locationofyouredgedocument/images/ folder.  We'll talk more about that later.  Point is, you can't change the source of an individual element.
"Timeline" - Here is where you animate your elements.

Pros - 
  • Auto keyframe capabilities, 
  • Very clear readout.
  • Easy to see what properties are keyframed
  • Manually adding keys is pretty easy
Cons -
  • Haven't figured out how to add a property to the key frame.  Default key frame properties are "translate" x and y... this is problematic when you want to set a key for scale at 100% and then manually add a key for scale at 50%.  Maybe I'm just not understanding something, but it's not clear how to add "Scale" as a keyframable property without using the auto key frame functionality.  This isn't a huge deal, but it's somewhat inconvenient and unintuitive.
  • I also haven't figured out how to animate multiple items in the timeline but play their animations individually without having to add a bunch of start/stop actions.  This is annoying because if i want an event to play the animation on element A when i mouse over element B I have to make sure there are no items in my timeline that overlap one another and that I put start/stop at each appropriate beginning and end of the animation as well as manually reference the location in the timeline of each element I want played.  This also has caused problems when playing animations on elements in different points of the timeline for different mouseover events like animations playing on all the objects for a couple of frames.  Animation jittering/popping and all kinds of other wierd timeline associated artifacts.  This could be me not understanding something about the way the timeline works, but I couldn't figure it out.  IF i do THEN i will let you know.
  • This is largely due to the fact that animation is done on all elements all the time.  Because there is only one timeline.  I would think each element would be given it's own timeline, and you could link timelines together.  But that's just my opinion.  If there is a way to solve this that I'm just not seeing, please share! :)
  • Key frames are not set at the marker, but at the play head.  So it is unintuitive and feels backwards.  My animations were playing backward for a while until I read for the 9th time the information in the beginners guide about animation.
  • Deleting keyframes does not reset your properties to default.  You're not even given the option. So be sure to set a keyframe for things at the beginning of the timeline to be the default if you are just testing a bunch of stuff so that you don't have to manually reset the properties later if you decide to delete some keyframes... this worked in my case as a workaround to this perceived (not actual) problem.
"Elements" - List of all the items in your "Scene".
Pros -
  • Easy to read
  • Assigns a unique color tab to the individual elements (somewhat unique)
  • Hide/unhide capabilities (button)
  • lock/unlock capabilities (button)
  • Also the place where you open the actions script panel for the individual elements
Cons -
  • Currently there's no way to "group" elements... so it just dumps everything in the same panel.  Sometimes difficult to manage your project.  Makes naming your elements with a clear convention important. (it's always important to name things correctly, but in this case the names have to be readable, not just make sense individually, but as a whole).  Perhaps they will fix this in future releases.
  • Unable to edit multiple action scripts at the same time.  Click on any button after opening the action script window for an element and the action script window for the element goes away.  This is annoying. ((I also am not calling this action sript...  It's basically opens a window to edit the canvas HTML5 stuff and the Javascript associated with the action))  I don't know anything about "action script" as it refers to Flash.
  • Every element has a * by it... not sure why.  This is confusing because I feel like it's trying to tell me something about the element that is somewhat important.  Perhaps this will become clearer in future releases.
  • Scrolling through the elements is slow and clumsy at times.  
  • Moving things around is wicked slow if you have to move things around in a big list. (suggest moving to a visible part of the element list, then scrolling up or down, then moving it again if you need to.  This was much faster for me.)
  • Can't change the color associated with the element for some reason.
  • Can't lock or hide/unhide or unlock multiple elements from this list. (photoshop has the ability to slide your mouse over the icon in a row and it just does it).
  • Can't add elements in the element panel.  It just shows you the elements.
Overall Assessment 
despite all the current flaws, I have to say "I absolutely love it".  The application is really easy to use/learn and so far is a nice WYSYWYG for HTML5 developers to put together a quick thing to prototype ideas or to test some functionality.  I wouldn't however call it a development tool just yet, there's way too many problems.  For one, the classic problem that happens with all WYSYWYG tools is that the code generated is somewhat terribly formatted and is difficult to read.  LARGE patches of empty space in the documents generated.  No idea why, but it seems like when they save the document they could clean it up a bit.  It's a preview build, so there's a lot of time/room to grow in all the areas where the software has shortcomings.


The only REALLY BIG SHOW STOPPER bug I found was that when I saved my data after putting together a thing which took 10 hours to do, the software decided it was going to completely destroy my work.  The application said, "there was an error, please save your work and close the application"  Or something to that effect, and when that happened i should have ignored the warning and just closed the app... but I saved my work.  And was then dissapointed because the actions I had setup no longer worked.  Images were disappearing all over the place and I thought I was going to die.  So Lesson #1:

If the software tells you there was an error, and suggests you save your work, ignore it.  The software has no idea what it's talking about. INSTEAD: just close the application, because saving your work will destroy all of your progress.  And getting it back is outside of my level of skill with fixing/debugging javascript and HTML 5 at this point.  

The Good News:
     After taking 10 hours to learn the software, the crash occured.  This resulted in a loss of about 6 hours of work.  But I was able to completely reproduce the work (slightly better) in only 1 hour and 45 minutes.  So Lesson #2:

Design in another application and come at it with a clear plan of attack.  This will save you butt-loads of time and potential crashes.

I found that when I went in and did exactly what I wanted to do, I had no problems with the software at all.  I fully expect this to replace Flash for web and mobile app/game developers.  I do plan on purchasing this product and look forward to sharing our findings with you as we develop our projects!

Thank you for reading,
Don "The Rock" Smith
Creative Director - Bonozo LLC