zaro

How to use motion guide in animate CC?

Published in Adobe Animate Motion Guides 3 mins read

Using a motion guide in Adobe Animate CC allows you to create animations where an object follows a specific, often curved, path that you draw. This provides more control over complex movements than simple linear or curved tweens.

Here’s a breakdown of the process:

Understanding Motion Guides

A motion guide is essentially a separate layer in your timeline that contains a stroke or path drawn with a drawing tool. An animated object on a linked layer beneath the guide layer can then be "snapped" to this path at different keyframes, causing it to follow the path during the animation.

Step-by-Step Guide to Creating a Motion Guide

Follow these steps to implement a motion guide in your Animate CC project:

  1. Prepare Your Layers

    • Start by creating a new layer for the object you want to animate. Draw or place your graphic symbol on this layer.
    • Right-click (or Ctrl-click on macOS) on the object layer in the timeline.
    • Select Add Classic Motion Guide. This automatically inserts a new layer above the object layer, designated as a guide layer (indicated by a special icon). The object layer will appear indented below the guide layer, indicating they are linked.
  2. Draw the Motion Path

    • Select the newly created motion guide layer. This is where you will draw the path your object will follow.
    • Choose a drawing tool from the Toolbar, such as the Pen Tool (as highlighted in the reference), Pencil Tool, Line Tool, Oval Tool, or Rectangle Tool. For complex or curved paths, the Pen Tool is often preferred.
    • Select a stroke color that is visible but distinct from your object.
    • On the stage, draw the desired motion path. If using the Pen Tool, click once at the very start of where your path should begin to make a point, and then continue drawing the path by clicking and dragging or just clicking for straight segments. The path should be a single continuous stroke.
  3. Animate the Object with a Classic Tween

    • Go back to the object layer in the timeline.
    • Insert keyframes at the start and end points of your desired animation sequence.
    • Create a Classic Tween between these two keyframes on the object layer. Right-click the frames between the keyframes and select Create Classic Tween.
  4. Attach the Object to the Path

    • Select the first keyframe on the object layer.
    • Drag your object instance directly onto the starting point of the path you drew on the guide layer. Ensure the object's registration point (the small white dot or cross within the object) snaps precisely to the path. Animate often provides visual cues when it snaps.
    • Select the last keyframe on the object layer.
    • Drag the object instance onto the ending point of the path. Again, make sure the registration point snaps to the path's end.
    • (Optional) In the object's Properties panel (with the last keyframe selected), you can check the Orient to path option if you want the object to rotate along the path as it moves.
  5. Test Your Animation

    • Press Enter or Return to play the timeline and see your object follow the drawn motion guide path.

The motion guide layer itself and the path drawn on it will not appear in your final published animation; they are purely for guiding the object's movement during creation.

By following these steps, you can create smooth, custom motion for your objects in Adobe Animate CC.