Tag animation

First Look at Adobe Edge


On Monday, Adobe opened up their beta trial of Adobe Edge, their latest tool for creating animations for the web. Being that they are getting hammered on all sides about Flash, instead Edge uses HTML5/CSS/JavaScript as it animation engine. HTML based animation has gotten dramatically better, my test animation ran surprisingly well across browsers and mobile devices. Whether this is Adobe’s little white flag on the end of Flash is yet to be seen but for now we options.

At first glance Edge seems closer in structure to After Effects then to Flash which could be a nod to where Adobe is heading or a way to separate the apps, again we’ll have to wait and see. The application is laid out in four sections: Properties, Timeline, Elements, and the editor window, which is Webkit based. The basic premise application is the simple, add items to a stage and then animate them via keyframes along a timeline. There are no interactions or ability to add scripts with this version of the application. Nor can you create new objects/shapes outside of rectangles, so all your assets will need to be created externally.

The timeline offers auto-keyframing and each attribute can be animated separately. Edge supports the standard set of easing which can be applied individually or to a group via multi-select. Each object/layer is a different color and their attribute list can be contracted/expanded to maximize work space. Attribute values are displayed both in the properties panel and inline within the timeline. Similar to After Effects, you can filter the timeline by typing within the timeline’s search field. Another nice AE style feature is the ability to scale the timeline and manipulate your existing keyframes in bulk.

Since the main editor is Webkit based text is true HTML text as are the CSS styles connected to it. Adobe’s handling of object positioning within the stage has a few quirks. The biggest being an object’s Zero Point being based on where it was initially introduced to the stage and not to top-left or other standard. This make is difficult to quickly create animations or layouts based on numerical coordinates from either external applications (Fireworks) or from object-to-object. For now you’ll need a PNG/JPG to create your gradients. I’m not sure if this is due to the complicated CSS to support gradients between browsers or just something missing from this release. There’s also a few glitches revolving around scaling images but text and divs work as expected.

Code wise, Adobe hides most of the magic in pre-minimized JavaScript files with the external CSS file only defining the initial elements. As long as you keep the stage and associate includes untouched you can edit the rest of the page at will. Which will only help Adobe gain support of this among larger web shops. Despite this flexibility HTML based animations still lack the self-contained nature of Flash’s SWF, which means to view my sample animation you’ll need to click to a page outside of WordPress’s CMS.

Overall, I think this is a great example of where I think web content creation apps need to go. Live HTML in the editor means there is no guessing on how things will look when it hits a browser. I hope they follow this thinking with the next version of Fireworks allowing less web savvy designers to get a better feel for what how their designs will really look outside the false perfection of the current design tools present.

Though Edge is only in its first beta release it’s pretty solid app and could easily be used to create complex animations for websites, banners and other strongholds of Flash. You can view the my test animation I created for this review. Future versions promise support for increased support SVG and the Canvas tag which will only make this more powerful tool for web animators. Will HTML5 really be the death of Flash? If so, Edge is a smart bet for Adobe to keep relevant in this new world.

Alma

Though you kinda know what’s going to happen the way the story unfolds is wonderful.  It also reminds me of a doll shop around the corner, very creepy and always empty. Thanks Bee.

Logorama – more then Oscar worthy

I saw this a few months back, loved it. Last night I happened to flip to the Oscars and caught the animated short category and saw that this was not only nominated but won.  As good as it was I never would have thought it was politically correct enough or wouldn’t be sued to oblivion by all the brand owners of the logos used in the film.  Created by the H5 group out of France, including directors François Alaux & Herve de Crecy.  During their thank you speech they mentioned it too 6 years to make this 6 minute masterpiece.  Followed by the hope to return in 36 years with a full length film.

This is one to be watched multiple times just to soak in all the nuances.  Truly an impressive animation with an excess of personality and sass.

official site

91 Centimeters

A beautiful short film about a man coping with the repercussions of being hit by a meteor.  I love all the details and the aged moody feeling.

Honda Insight – Light Brite

Honda created the worlds largest LED display from the headlights of their new hybrid car, the Insight. As if this wasn’t enough to catch your eye, they worked with Vimeo to integrate the video with the page it’s on.  See the full video on Vimeo or watch the embedded version below.

Links:
Honda Insight – Let It Shine
Making of Let It Shine