New Features of Edge Animate CC
Edge Animate is a new tool developed by Adobe in September 2012 which is designed to create animated, interactive content for the Web.
SEE ALSO: Creating a Scalable SVG Infographic
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.
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.
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.