New Features of Edge Animate CC

Adobe ToolsIaroslav Lazunov • August 07, 2013 • 4 minutes READ

Edge Animate is a new tool developed by Adobe in September 2012 which is designed to create animated, interactive content for the Web.

Edge Animate is based on modern browser standards using HTML5, CSS3, and JavaScript. With its help you can create precision animations using the Timeline Editor that is familiar to Adobe Flash users, build compositions using the drawing and text tools, and easily create mobile-friendly content that works with a wide variety of devices and browsers. You can build beautiful animations using CSS filters like drop shadow, blurs, and saturation; style objects using radial and linear gradients; adding typography to your designs using the Web Fonts Selector; and adding creative animations to your Adobe DPS projects.

As a developer you can use Edge Animate to build interactive documents with full JavaScript and HTML capabilities, create layouts that are easily resizable for any device or screen, and publish your creations on the web using standards-complain code. Animation created in Edge Animate can be easily deployable to any operating system, device, or screen and now there is no need in using Flash Player, Silverlight, QuickTime, or downloading of any apps. New release, Edge Animate CC, has a few new features that we will talk about in this review.

Motion paths

Motion paths feature allows us to create the movement of objects along a curved trajectory, which is defined by the user. Let me remind you that the previous version of Edge Animate allowed to create only straight-line movements. To control element’s movements with the help of Motion paths, you need to select the element on Stage, then click Motion Paths in the Contextual Property panel under the Position and Size sub panel.

To set motion paths as the default method of movement for new elements, tick “Animate with Motion Paths” from the Layout Defaults.

Now create a transition using keyframes or the Pin. As you can see, there appeared a line between two anchor points.

Click anywhere on the line to create a new point on the path, which will have handles as any Bezier curve. By dragging this point and controlling the handles, we can control the curvature of the path.

We can also use the Auto-Orient option to control the direction of the object as it moves along the path.

Path can be divided into two parts by adding a keyframe for location on the timeline. You can add the easing effect to motion paths.

In the current implementation, motion paths cannot be set to use percentage-based layouts. To work around this, set your object inside a group, parent, or symbol and set the parent to use %-based positioning. You can also use this method to set the motion path relative to top/right/bottom/left.

Templates

Using templates you can create, save, reuse, and easily distribute pre-made animate compositions. Create a template and reuse as a starter for mobile projects, photo galleries, banner ads, or else that you can think of. You can find stored templates in the template gallery available from the File menu. Inside of the template gallery you can select which template you want to use, import other templates, or delete templates that you don’t need to use anymore.

You can collect anything you want in a template, including symbols, images, fonts, and custom scripts. Animate will automatically grab any files living besides your Animated project on the file system and include them in the template. Template files have .antmpl extension and can be freely distributed and can be stored anywhere on the file system.

Swipe gestures

Now we are able to bind objects with left and right swiping actions for mobile-focused experiences. You can apply the swiping action to any element in the composition. To do this, right-click on the element in the Timeline, click Open Actions For from the menu, and then click swipeleft or swiperight.

Optimized publishing with CDN hosting

This feature allows your content to be delivered faster with your runtime files on Adobe Content Deliver Network (CDN) powered by Akamai. To do so, select the Host Runtime Files On Adobe CDN option in the Publish Settings. Your projects download faster with the benefit of cache hosting with absolutely no cost to you. This option is on by default for the new projects and requires a live Internet connection for you web projects. So if you need your project to run offline or want to use your own hosting, just uncheck this in the publish options.

This new version of Animate has other great improvements, including color coding of elements, and a fancy new eyedropper to easily grab colors from your stage.