Seasonal Savings: 20% off selected memberships for a limited time. Give now

Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

By Ray Villalobos | Saturday, June 16, 2012

Adobe Edge Preview 6: New features, and why you’ll love the Pin tool

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.

Adobe Edge 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 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 automatically Document Object Model (DOM) elements with properties like position, background color, borders, etc.

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.

Adobe Edge interface with Pin tool in timeline highlighted.

The Pin tool can accessed in several ways. Here we see the Pin tool highlighted as an icon within the timeline.

Adobe Edge Pin tool entry and exit animation.

In this image, within the red highlight box, you can see the Pin tool in action with the teal timeline areas representing entry animation, and exit animation—both created using the Pin tool to establish a "resting place" in the center of the animation.

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.

• Edge can now be scripted with JavaScript or jQuery so you don’t have to learn a new language to build interactivity.

• 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 6course 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

Suggested courses to watch next:• Edge First LookCSS: Core Concepts• HTML5 First Look• jQuery Essential Training

Learn it from the experts.

With online video courses at lynda.com, you can reach your goals faster. Learn software, improve your skills, and get an inside look at how the professionals work.

See what you can learn


Share this article:

Tags: , ,

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

Featured articles

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.