Adobe Edge and the future of Web Interactivity

Animating towards a "resting point"

One of the new projects from Adobe Labs I’m really excited about is Adobe’s interactive Animation tool for the web called Edge. It’s already in it’s 6th Preview Release, which means that although it’s not a fully developed product, it is a solid tool for building web animations that are compatible will all devices.

It uses web standards like HTML5, JavaScript and jQuery to allow you to build animations that can be controlled through JavaScript. If you’re familiar with CSS and or Flash, then Edge will be extremely easy to pickup. As a matter of fact, it’s a great tool for visualizing how CSS works. When you create elements in Edge, they are DOM elements with properties like position, background color, borders, etc.

Animating with the Pin

I had an opportunity to meet with the Edge engineers during the last Adobe Max Conference and I found out that one of the exciting things about Edge is the way it reimagines the workflow for building web animations…making it easier and quicker to do an animation.

When I create animations, I start by visualizing a “resting point” for my animation. My animations elements will move towards that resting point, stay on screen for a few seconds and then animate out of that resting point.

It’s easy to design the resting point or keyframe for that animation, but in something like Flash, it’s challenging to animate to that point and then away from that point. The pin changes this by letting you complete a layout and then pinning or locking down the position of the elements in that layout…and then easily animating towards or away from that position. It’s one of those things that takes a bit of an adjustment to understand, but once you’ve mastered it, keyframes and other animation methods seem outdated.

Another exciting Edge feature is the addition of symbols so that elements can be reused in animations. Symbols can be exported and imported into a new document through this new releases’ new .eglib format. Edge can also be scripted through JavaScript or jQuery so you don’t have to learn a new language to build interactivity. The new code editor allows you to quickly access any of the code in the timeline or attached to elements. You can also bring in custom fonts from a library like Google Web Fonts easily and even create custom preloaders or posters to be displayed in browsers without support for modern standards.

To give it a try, make sure you check out my course on Edge First Look PR6 on the Lynda.com Online Training Library.

Leave a Reply

Your email address will not be published. Required fields are marked *