One of the new projects from Adobe Labs I’m really excited about is Adobe’s interactive Animation tool for the web, Adobe 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.
Animating toward a resting point with the Pin tool
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, and makes animation work easier and quicker.
When I create animations, I start by visualizing a resting point for my animation. In other words, a point that my animation’s elements will move towards, rest at on-screen for a few seconds, and then animate out of.
It’s generally pretty easy to design an animation resting point, but using a software like Flash, it can be challenging to animate to that point and then away from that point. The Adobe Edge Pin tool changes this by letting you complete a layout, and then pin or lock down the position of the elements in that layout, which allows you to then easily animate towards or away from that pinned position. It’s one of those things that takes a bit of an adjustment in your thinking to understand, but once you’ve mastered it, using traditional un-pinned keyframes seems like an outdated process.
Five note-worthy new Adobe Edge features
There are many new and cool Adobe Edge features worth mentioning, but here are five that I find particularly note-worthy:
• With the release of Preview 6, Edge has included the addition of symbols that can be exported and imported into new documents through Edge’s new .eglib format and, accordingly, allow you to reuse elements in animations.
• A new Edge code editor allows you to quickly access any code in the timeline or attached to elements.
• You can now easily bring in custom fonts from an external library like Google Web Fonts.
• The Preloader stage makes it painless to create custom preloaders from animated Edge clip-art, image assets, and text to be displayed in browsers when a user is experiencing connection or download delays.
Ready to check out Edge?
If you’re ready to give Adobe Edge Preview 6 a try, make sure to check out my Edge First Look Preview 6 course on lynda.com to learn more about how to use the Adobe Edge timeline-based interface to create and build interactivity into your motion content.
Interested in more?
• The full Edge First Look Preview 6 course on lynda.com
• All web + interactive courses on lynda.com
• All Adobe Edge courses on lynda.com
• All courses from Ray Villalobos on lynda.com