On September 14th, 2017, we published revised versions of our Privacy Policy, Terms of Service and Website Use Policy and published a Cookie Policy. Your continued use of Lynda.com means you agree to these revised documents, so please take a few minutes to read and understand them.

Learn it fast with expert-taught software and skills training at lynda.com. Start your free trial

By Ray Villalobos |

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.


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


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.