Adobe Animate: Animating along a path

Using Adobe Animate, we are learning to animate along a path.

First, make a pencil. This is my design. Make sure that you group all aspects of your pencil.

Now make a new ActionScript 3.0 file in Animate with the dimensions 1920px x 1080px. You can change the background colour if you want but I will be using a picture of paper texture.

Instead of needing to import the illustration into the stage, you can simply copy it from the illustrator file and paste it by going to Edit > Copy or by using the shortcut CMD + C to copy before going into animate and pasting it (shortcut CMD + V). It should then appear in your library.

Name your layers appropriately and this should be your setup.

Now make the pencil into a symbol by going to Modify > Convert to Symbol and it should then appear in your library.

To start animating, right click on the pencil layer and select ‘Add Classic Motion Guide’. This will add a guide for that layer.

Select the pencil tool in the toolbar and the ink pencil mode for a smooth flowing finish.

Select the guide layer and draw the path that you want the pencil to travel across.

At the first keyframe, right-click and select ‘Create Classic Tween’. The pencil should jump to the beginning of the line and the frames should look like this at first – this means that an unsuccessful tween has been created.

Now, select the last frame and move the pencil to the end of the line. Your classic tween should become a solid line and if you play it back, the pencil should move along the path.

To make the pencil follow the path, you need to select the frame and rotate it to face in the direction of the path at the beginning. Go to the last frame and do the same.

A smoother line would have resulted in a better quality animation – also, I need to consider the length of the pencil when drawing the path as if the loops are too small for such a long shape, the animation will not look smooth.

Select the first frame again and go into the properties panel to select ‘orient to path’ and this will enable the pencil to follow it. This would be good for animating something like a rocket.

For the next part of the pencil animation, you need to know about how masking works. Here is an example using a mask.

You can use your pencil but I decided to use my robot. Create a new layer and import your object/s to the stage – naming the layer appropriately.

Then make another layer and turn it into a mask by right-clicking and selecting ‘Mask Layer’. It then indents into the other layers and locks them.

Then, draw a rectangle on the mask layer and convert it into a graphic type symbol.

The mask feature makes it so that whatever is behind the mask layer shape on the other layers can be seen – acting as a sort of window. You can also animate masks; I animated my rectangle to travel across the robots that I placed on stage so that they seemingly appear and disappear as the shape passes.

First, create some frames. Move the shape to wherever you want it to start moving from in the first frame before going to the last frame, creating a keyframe and moving the shape to where you want it to move to. Now, right-click on the first frame and select ‘Create Classic Tween.  To be able to see the masked areas function in your animation, both layers must be locked.

Here is mine:

 

 

Now, using animating along a path and masking, we can animate a pencil as though it is writing.

Create a new ActionScript 3.0 file with the same setup as the others and copy and paste the pencil in like before and make it into a graphic type symbol. Then, using the free-transform tool (shortcut Q) move the centre point of the pencil so that it is at the tip of the lead.

Create a new layer, select the pencil tool and draw a line that you want the pencil to draw in your animation. I used the smooth pencil type so that the writing is as neat as possible. Then right click the writing layer and select ‘Guide’ to turn it into a guide before dragging the pencil layer onto it so that it becomes indented.

Add some frames, right-click on the keyframe of the pencil layer and select classic tween like last time. Drag the playhead to the last frame and move the pencil to the end.

Now, duplicate the writing layer by copy and pasting in the timeline (or drag it to the new layer icon) and right-click and select guide to revert it back into just a line. You can change the colour so that you can differentiate between them.

Make a new layer above the coloured line and make it into a mask layer – the coloured writing should now be a mask.

Now turn the pencil layer into outline mode and select the brush tool with a different colour.

Zoom in and, moving along frame by frame and inserting a keyframe each time, paint over the writing following the point of the pencil. Ensure that you have the mask layer selected.

You can test your animation by going to Control > Test Movie > In Animate to see how it looks as you go along. Here is mine:

I feel that my animation was successful in the way that it flows smoothly and the lines are drawn in sync with the pencil. Whilst the masking method is convenient, it was a frame by frame process and so it turned out to be quite time-consuming. This method might not be best for large portions of a longer animation.