Creative_Cloud_mnemonic_RGB_128px

Update to Edge Animate CC available

For more information, see the New features summary.


Motion paths

Motion paths allow you to add highly expressive motion to elements which follow along a custom curved path. Using this feature, you can emulate real-world experiences through fluid, physics-based movements that cannot be achieved through linear motion.

To control the movement of an element using motion paths, perform the following steps:

  1. Select the element on Stage, and click Motion Paths in the Contextual Property Panel (CPP) under the Position and Size accordion.

    Motion Paths option in the Contextual Properties Panel
    Motion Paths option in the Contextual Properties Panel

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

     

    Using Motion Paths as the default for new elements
    Using Motion Paths as the default for new elements

  2. Create a transition as you normally do using keyframes or the Pin. When you do so, you notice a line drawn between two anchor points (represented by triangles) as shown below:

    motion path example
    'Bee' element to be moved

    motion path example
    Path for the 'Bee' element

    Click the line anywhere to see the handles that you can drag to define the path using a Bezier curve. Use the Auto-Orient option to control the direction of your object as it moves along the path.

    Click the path to see the handles for editing
    Click the path to see the handles for editing

    Motion Path defined using Bezier curve

    • To add an anchor point, hover your mouse on the path and click. 
    • To delete an anchor point, hover your mouse on the anchor, and then Cmd/Ctrl + Click
    • To convert a Bezier to a sharp point, click the anchor point, and then Option/Alt + Click.
    • To unlink the two handles on either side of an anchor point so that you can move one independently of the other, Option/Alt + click and drag.

Keyframes for location on the timeline represent two separate motion paths. Add a keyframe to split your path into two, or delete a keyframe to create one contiguous path. Easing can be applied to motion paths, and the easing effect is played back on a per-path basis.

  • To split a motion path, add a keyframe in the timeline.
  • To create a contiguous motion path, delete a location keyframe on the timeline.
  • To split two adjoining motion paths in space, Cmd/Ctrl-click and drag at a joining keyframe anchor.
  • To connect two end anchors of separate motion paths, drag the anchors together; they will snap to connect location.

The object is tied to the path by the transform origin. Transform origin can be adjusted so the object can follow the path off-center.

Motion Paths and Responsive Layouts

In the current implementation, motion paths cannot be set to use percentage-based layouts. To work around this, set your pathed 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.

Tutorial

Click Windows > Lessons panel, and click Motion Paths for a guided, hands-on exercise on using motion paths in an Animate composition.

Optimized publishing with CDN Hosting

Allow your content to be delivered faster with your runtime files on Adobe Content Deliver Network (CDN). 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.

If the content needs to run offline, deselect this option in Publish Settings. This option is enabled by default.

Publishing with CDN hosting
Publishing with CDN hosting

Templates

You can now load, save, and reuse templates from a template gallery. This feature allows you to load an Animate composition for common file patterns. Templates can capture images, text, symbols, fonts, and any custom changes in your current composition. You can load templates from the visual template loader.

Access the templates menu from the Welcome screen (“Create from Template”) or from the File menu. From the templates gallery you can import, delete, and create a new composition from a template.

Create From Template option in File menu
Create From Template option in File menu

Template files have .antmpl extension and can be freely distributed and can be stored anywhere on the file system. 

Swipe gestures

You can now bind elements with left and right swiping actions for mobile-focused experiences. You can assign the swiping action to any element in your composition. You can assign swipe gestures to the stage itself, or apply to multiple elements to create unique mobile experiences.

Right-click the element in the Timeline, click Open Actions For <element> from the menu, and then click swipeleft or swiperight.

Swipe gestures
Swipe gestures

Eyedropper tool

The new Eyedropper tool is introduced in the colour selection panels. Select the eyedropper icon to sample colours from the stage.

Eyedropper tool
Eyedropper tool

Color coding of elements

You can now assign colors to various elements in your composition to easily identify and work with them. You can click the color palette in the Elements panel or Timeline to assign colors. These colors are reflected in the Timeline transitions too.

Color coding of elements in Timeline
Color coding of elements in Timeline

Color coding in the Elements panel
Color coding in the Elements panel


Elements panel and Timeline jumping

The elements panel and timeline will now scroll to show selected elements (if the panel is scrolling).

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy