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

By Ray Villalobos | Thursday, August 23, 2012

Adobe Edge Animate Preview 7: What’s new?

A new version of one of my favorite projects from Adobe has just been released, and it has a new name: Adobe Edge is now Adobe Edge Animate. There’s a lot more under the hood than a name change. In this article, I’ll take a look at some of the changes from the previous version so you’ll be oriented when you install the new release.

What’s in a name?

Edge is now Edge Animate. The name clarifies one of the main features of the program. You could argue that it does a lot more than animation, but names like Photoshop, Illustrator, and InDesign clearly convey the focus of the software; Edge by itself didn’t. People who like to shorten things will still call it by its old moniker, but at least the new name makes things clearer in a branding sense.

UI beautification

Edge Animate is a little more colorful than before. There are subtle changes here you might not notice unless you pull up the Preview 6 and 7 side by side.

A little color can go a long way to liven things up. The application looks a lot better. The palette used in the panels looks brighter and some of the labels and icons have changed.

The redesigned interface of Adobe Edge Animate 7 is brighter with new options

Properties panel

One of the biggest changes is the redesign of the Properties panel. Everything is a little cleaner and less boxy than before with more subtle pop-ups. For example, the ability to choose whether an imported image is coded as a DIV or an IMG is now embedded within the name of the element and disappears when an item that doesn’t need it (like a rectangle) is selected.

Adobe Edge 7 features a new properties panel that allows you to choose whether an image is coded as a DIV or an IMG

An additional pop-up is next to the name of the element where you can type in a custom class for the item.

Additional pop-up class that lets you specify a custom class for your element in the Adobe Edge 7 Properties panel

There are now many more options for creating keyframes directly from the Properties panel, which can be quite useful and are a welcomed addition. Overall items have been moved and rearranged.

Visibility options

Visibility options are now grouped at the top of the Properties panel in Adobe Edge 7

Visibility/overflow, opacity, and transparency form a new grouping at the very top of the panel followed by position and size below.

Responsiveness

The web has moved toward a responsive design approach, more and more widths are now specified as percentages instead of pixels. Edge Animate is one of the first animation programs that provide for a way to align things to a responsive Grid. You can specify proportionate measurements to just about everything starting with the stage.

The Adobe Edge Animate responsive design Grid allows you to specify percentage sizes rather than pixels

If you create a new document, check out the Properties panel on the left of the workspace. Next to each of the two dimensions (width and height), you’ll see a switch to turn responsive dimensions on. Once you do that, you’ll notice the option to resize the stage on your rulers. In other words, the stage itself is now resizable and responsive. There is now also an option for setting up a minimum width and height.

Adobe Edge Animate design Grid lets you specify a relative dimension or position

If you have an element onscreen, you can specify either the position (x/y) or the size (width/height) in percentages. When you specify a position in percentages and resize the screen, your element will move as the size of the screen changes. If you specify a dimension, it will resize as the screen changes. A preset pop-up is also available, which makes this even easier for you (see above).

Options that control responsiveness are on top of the Position and Size section of the Properties panel

On top of the position and size measurements, you’ll see options for how these measurements are applied. On the left you’ll find a small rectangle that controls how an object is aligned to the stage. By default, when the stage is resized, objects will align to the top left of the stage. By clicking on these squares you can change the alignment to the top, right, bottom, or left.

Next are some tabs that let you see global versus local measurements. Normally these will stay the same, but if you apply transformations, the values will be different for global/local coordinates and sizes. For the most part, you don’t have to mess with these and they work as you’d expect.

Set defaults for how an object is placed on the stage with the Layout Presents pop-up menu.

You can also set the defaults for how an element is positioned onscreen by going to the Layout Presets pop-up on the right side of this section.

Minimum width and height controls

At the bottom of the Position and Size section of the panel, there’s a pop-up control that expands to let you add minimum and maximum values for the width.

If you’re confused about these options, you can watch the video on resizing that has been added to the list of tutorials when you first open Edge Animate.

Drop shadows

The new drop shadows option in Adobe Edge Preview 7

Preview 7 adds drop shadows to the list of object properties and there is a Shadow section in the Properties panel where you can set the parameters.

You’ll see traditional controls for the position and the shadow blur that you’d expect in a program with CSS underpinnings. At the top of the section there’s an option to use either regular or inset shadows.

Like the shadow controls, clipping is now activated by a toggle but works pretty much the same as before.

Accessibility

Accessibility options on the Properties panel of Adobe Edge Animate Preview 7

A new Accessibility section at the bottom of the Properties panel lets you set some accessibility options that allow you to add a title attribute to elements as well as set the tab-index. Nice to see that Adobe is thinking about accessibility in its applications.

View menu

The new view menu for rulers and guides in Adobe Edge Animate Preview 7

Some of the menus have changed, most notably the View menu with the addition of options for turning on rulers and guides, plus snapping or locking guides.

Modify menu

Grouping items using the Modify menu in Adobe Edge Animate Preview 7

Under the Modify menu, and by right-clicking on Stage objects, you can now group elements into a DIV, which places them inside a container in the Elements panel. Grouping items and DIVs will make it easier for you to move them around on the stage, but will not let you resize them as a unit. To do that, it’s easier to just convert them into symbols.

Timeline menu

New options in the timeline menu in Adobe Edge Animate Preview 7

There are a few new options under the Timeline menu. You can jump between keyframes quickly by choosing Go to Previous Keyframe or Go to Next Keyframe (or by using the menus). There are also a couple of options for removing transitions without removing the keyframes or adding transitions between existing empty keyframes.

Tools panel

The new options in the Tools panel in Adobe Edge Animate Preview 7

A welcomed addition is a brand-new drawing tool: the oval. You could create an oval before by using the rectangle and modifying the corners, but it’s nice to see another drawing tool since the list of what’s available is sparse.

Another new addition is a Layout Defaults pop-up for choosing some of the properties of new objects. You can find these in the Properties panel, too.

Timeline panel

Timeline panel improvements in Adobe Edge Animate Preview 7 let you turn on vertical gridlines

You can now turn on vertical gridlines in the timeline by clicking on an icon at the bottom of the timeline. The grid will help you align animation to different points in the timeline.

Also, the Instant Transition Mode icon is now different and has been renamed “Auto Transition Mode.” It lets you create immediate changes in transitions. Love the new icon.

Icons in Elements panel

Layers now have descriptive icons in Adobe Edge Animate Preview 7

Like in the new version of Freehand and other Adobe software, layers now have an icon next to them that shows you the type of element on this layer. Another small, but nice change.

Workspace bar

Adobe Edge Animate Preview 7 offers a couple new options for controlling the stage size and position on the left

There are some minor changes at the bottom of the workspace: an icon on the far left that centers the workspace, and next to it a scaling pop-up that lets you type in or click and drag a value to zoom in and out on the stage.

Notifications

Notifications now appear at the bottom right of the workspace in Adobe Edge Animate Preview 7

Edge has a brand-new notification system. When you make a coding error or experience a possible problem with one of your documents, a notification icon will appear at the bottom right of the stage. If you click on it, more information about the error or warning will appear.

Coding changes

There are some new events available: mouseenter, mouseleave, and focus events. You can add them to your elements and trigger whatever actions are appropriate for your project. Edge also allows you to better trap errors; you can catch them in your code with the Stage.onError event.

Notifications related to code errors will also appear in the code window.

Final thoughts

Edge Animate is looking more and more like a finished product. I’m really impressed with the responsive layout features. I wondered how layout programs would adjust to a responsive world and Edge has gotten it right. Way to go, Adobe.

Interested in more? • All web + interactive courses on lynda.com • All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:Edge First Look Preview 6Up and Running with Adobe Creative CloudCSS3 First LookManaging CSS in Dreamweaver

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

By Doug Winnie | Friday, April 20, 2012

When does lynda.com plan to launch a new Adobe Edge course?

The web industry is changing quickly. To keep up with this change companies that create tools for web designers and developers also need to change quickly. Adobe, Microsoft, and Google are releasing new tools and technologies at a fast pace, and updates to these even faster.

Although we work hard to get courses covering the latest materials live on lynda.com as quickly as possible, before we start production on a beta course, we sometimes have to pause to consider what plan of action will, in the long run, ultimately deliver the best learning experience for our members. A number of the lynda.com content managers have been product managers or engineers at software companies, and we understand a software company’s struggle to define, clarify, and deliver the right features to their users, and that changes can happen to software late in the game. When it comes to our courses, with releases going live nearly every week, we think it’s important to balance the time it takes to create the training you need, with a larger picture that keeps our member’s overall best interests in mind.

With the latest version of Adobe Edge, Preview 5, we were forced to strongly consider this delicate balance. As a result, we decided to skip the Preview 5 release and focus on the upcoming next release. We love Adobe Edge, we want to make sure you are successful with it, and we want to reassure you that there will continue to be new Adobe Edge content on lynda.com in the future.

Thanks for your support, and happy learning.

Doug Winnie, Senior Content Manager for Web and InteractiveMordy Golding, Author, Edge First Look and Director of Content

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.