Movements Along a Curve

If the only motions allowed by Flash were linear movements, it wouldn't have been so successful.

One of its outstanding subtleties is the possibility of moving an image along a curve. This technique is used in the very first part of our movie Jojo & Albert, where Jojo jumps, flips and falls. There are no limitations to the movements you can incorporate.


Proceed as follows:

1. Position Jojo on the Stage.
   
   
2. Assign him the Motion property.
   
   
3. Choose Insert > Motion Guide.
   
   
A new layer, called Guide, will appear over the one containing Jojo.



Figure 2: The Guide layer enables you to define the path of an animated item


4. Select the Pencil tool with the Smooth mode, then draw a curve on the stage.
   
   
Don't worry, the pencil line won't appear when the animation is played.



Figure 3: Draw Jojo's motion line with the pencil


5. Define the animation length as explained in the section Defining the Animation Length with Keyframes in the previous workshop.
   
   
For the purposes of our example, choose a length of 30 frames.


6. Select the first frame on Layer 1 (in the Timeline) and drag it towards the line you just drew on the Guide layer, precisely where you want your animation to start.
   
   
When Jojo's axis is close enough to the line, Jojo is magnetised and automatically sticks to the line.


Centring the axis! Make sure that the frame's axis is positioned on the line. Otherwise, the frame won't move.


7. Repeat this procedure, placing the last image of your animation on the line, precisely where the animation will end.
   
   
Test your animation. You will see that Jojo smoothly moves along the curve.


Just click! Hold the image to be animated by its rotation axis, this will make the positioning on the curve easier.