Category 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.

Weekly Recap: Kinetic Type, Hearses and Change

While neither V for Vendetta or this kinetic typography are new, this animation was new to me this week. You can check out 14 additional kinetic typography pieces based on popular movies at Inspired Mag. Rocky and Nick the Greek were also contenders for this hero spot.

Also typography related is The Big Web Show’s episode 18 where they speak with Roger Black, co-founder of Webtype, an online font foundry that also hosts the fonts for use in your CSS3 based designs. Besides having some really nice fonts, I love their browse options.

– – – – –

Google offers instant results because 2.5 seconds is too long for users to wait for results. It seems crazy that such a small amount of time would make a noticeable change in user behavior but Google has stats that prove it. Years ago it was based around the number of results to display based on the difference in milliseconds to return those results. Today (last week) Google added instant results to cut this number down even more. According to their blog post this could save the world 11 hours every second.

– – – – –

Earlier this month Twitter posted stats on third party app usage and it showed that by-and-far most users use the Twitter website and mobile site, followed by Twitter’s own branded apps. The third party apps are only used by a small (but active) percentage of their users. This could be why Seemic, who just announced the launch of Seesmic Desktop 2 (SD2), is focusing increasing their support for additional web services (RSS, YouTube, Zappos). Some of this support is through their new plug-in architecture. For a quick overview check out TechCrunch’s coverage of the announcement.

– – – – –

Big changes at Microsoft. Stephen Elop, President, Microsoft Business Division, has left the building to become CEO of Nokia. In an unrelated note, the Redmond campus celebrated the (manufacturing) release of Windows Phone 7 with some black humor, a hearse and a parade. And what parade would be complete without doing a scene from Thriller. Though I’ve been impressed with what I have seen of Windows Phone 7, it’s has a huge uphill battle to live up to the hype of this parade.

– – – – –

UX Magazine had an interesting editorial on converting the URL bar into a form of navigation/breadcrumb system.  There are some good concepts behind the potential use of the very static and possibly foreign component included in every browser. Some things needed for this concept to become a reality is out side of the browser’s control, though you can see signs that the browsers are starting to go in this direction.  For example, in Google’s Chrome browser has implemented a system that bolds the domain and grays out the rest of the URL info. Though somewhat random when it occurs, Chrome also boxes out a website when you’re entering your search/URL. To see it in action type “google.com anyTerm,” it does this for other sites as well, but not always and I’m not sure why or when.

– – – – –

Ending this weeks review with some fun. Take a bunch of animated GIF’s and synch them up with Girl Talk’s spliced samples and you have the making of an Internet Meme du jour…Cache Rules Everything Around Me by Evan Roth

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.