Assignment 03 - Creating Motion Paths Project - Part 1

This tutorial will explain how to use Adobe Animate to create animated User Interface (UI) elements along a predefined path.

The most important points of this tutorial are to learn: 

  - how to create and use a Motion Path

  - how to change the Easing of the animation to make the movement more natural

Here is how the final variant will look:

Adobe Illustrator was used to create the vector assets for the scene. Illustrator and Animate are both vector based programs and it is easy to exchange assets between them.

STEP 1.) CREATE THE ASSETS:

Start off by using Illustrator to create a background scene and a moving element. In this case, the elements consist of a road with two turns and a car, however, you could create a winding river and a boat, or you could create a city scene and a motorcycle, and so on.

STEP 2.) – IMPORT THE ASSETS INTO ANIMATE:

Import your vector based background asset to Animate on the first layer.

Create a second layer and import the moving element. In this first example, the car will be the only element that will be animated.

Drag the car to the starting position of the animation. Set your first keyframe.

STEP 3.) – PREPARING FOR ANIMATION:

Select the frame on the timeline that you want to be the last frame of the animation.

Then right click -> select Insert Keyframe and set it at a 5s duration, which would be frame 150 (30 frames per second times 5 seconds = frame 150).

Now, move your moving element to the point in the scene where you want the animation to end.

 

 

STEP 4.) - CREATE THE MOTION PATH:

Now that the first frame and the last frame have been selected, it’s time to create a motion path to guide the moving element.

Right click on the moving element layer -> Add Classic Motion Guide

Select the Pen Tool from the Tools panel.

Create a guide using the Pen Tool. The guide should follow the road (or path, or river, etc.) to make the car move properly.

  

NOTE: Make sure the center point of the moving element is at the start and end of the line.

STEP 5.) – ANIMATING

Now, right-click on the moving element layer and click Create Classic tween to make the car follow the path.

STEP 6.) – OPTIONAL:  ADD ANIMATION EASING (You can  jump to STEP 7)

Make the animation smooth and more natural by adjusting the properties of tweening.

Move to the path and go to the Properties panel and make sure the Snap and Orient path options are checked.

 

By adding a custom easing to the animation, the movement of the car will look more natural.

Properties -> Tweening -> Easing -> Edit easing

Then click on Custom -> New

 

The Custom ease graph represents the degree of motion over time. The horizontal axis represents the frames and the vertical axis represents the tween’s percentage of change. These curves can be made more complex by adding additional anchor points along the length of the path. Alternately, you can adjust the already existing anchor point at each end of the line.

In this example, you want the movement of the car to slow down before it turns and to speed upon exiting. From the first frame, the movement speeds up a bit and moves the curve to a higher percentage. Then, it slows down around the 25th frame when the car is getting to the first turn. After that point, keep the curve in an almost straight position so the car moves at a constant speed until the end of the right turn. This time it is at about 100 frames. It starts to speed up by changing the position of the curve on the opposite side.

 

 STEP 7.) - IMPORTANT: DRAG THE MOTION PATH TO THE FIRST FRAME

After you complete the motion path using the Pen Tool, go to the Guide layer, locate the frame that holds the Motion Path (it should be at the last frame) and DRAG that frame to the first frame on the Guide layer.

 

If you don't do that, the moving element will not follow the Motion Path.

 Here’s the finished animation: