By Ray Villalobos | Thursday, August 23, 2012
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.
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.
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.
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/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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
By Ray Villalobos | Saturday, June 16, 2012
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.
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.
The Pin tool can accessed in several ways. Here we see the Pin tool highlighted as an icon within the timeline.
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.
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.
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 Look•CSS: Core Concepts• HTML5 First Look• jQuery Essential Training
By Doug Winnie | Friday, April 20, 2012
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
You can change your email preferences at any time. We will never sell your email. More info
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:
Keep up with news, tips, and latest courses with emails from lynda.com.
We've updated our terms and conditions (now called terms of service).Go Review and accept our updated terms of service.