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.
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.
An additional pop-up is next to the name of the element where you can type in a custom class for the item.
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/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.
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.
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).
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.
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
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
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
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
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
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
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
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
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
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
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 6
• Up and Running with Adobe Creative Cloud
• CSS3 First Look
• Managing CSS in Dreamweaver
