With this simple and straightforward tutorial, you will learn one very handy animation technique: how to use a motion guide to make an object follow a certain path. I’ll show you:
- How to create a motion guide (inside a guide layer),
- How to make a movieclip follow the motion guide you made,
- How to make the guided animation more realistic and more.
You will be creating a motion tween animation which will then be linked to a motion guide. You can see the kind of animation you are going to make below.
1. Making a simple motion tween animation that will follow the motion guide later
1.1 Open a new document by selecting File > New. Select Flash File (ActionScript 3.0), click OK.
1.2 Save your document right away. Later, you'll be able to save it just by pressing Ctrl+S. Remember to do this whenever you pass a certain number of steps or make significant changes to your document. It is better to save often then to lose your work because of your computer crashing, power shortages, etc.
OK. You'll start by making a movieclip. You need it to make a motion tween animation which will be made to follow a motion guide later. A paper airplane will be fine for this kind of animation.
1.3 Select the Line tool (N). Select a darker grey hue for the Stroke color (I picked #646464), turn on the Snap to Objects option and make sure that Object Drawing is turned off. The screenshot below shows you these three options clearly.
1.4 Click and start dragging with the Line tool downwards. Make a line that is approximately 60-65 pixels long.
Since you have turned on the Snap to Objects option, drawing a straight line should pose no problem at all.
1.5 Select the Zoom tool (Z) and zoom in on the line that you just drew. Click and drag to zoom in on the desired area.
You'll be able to work more easily now.
1.6 Use the Line tool (N) again. The Snap to Objects option should be turned on from before (that's the small magnet icon found at the bottom of the Tools panel). Bring the cursor near the top of the line, click and start dragging left and down. You will automatically start drawing from the top end of the existing line, thanks to the Snap to Objects option.
1.7 Add three more lines to complete one side of your paper airplane, as shown on the image below.
1.8 Select the whole drawing using the Selection tool (V).
1.9 Copy the selected items by pressing Ctrl+C or selecting Edit > Copy.
1.10 You will now paste in place a copy of these lines either by pressing Ctrl+Shift+V or selecting Edit > Paste in Place. Now, there won't be any apparent change. But you have just pasted a smae, exact copy of your drawing over the original one. To see it, use the left or right arrow keys on your keyboard to move the new copy.
If you had clicked anywhere on the stage after pasting the drawing in place, you will lose it. That's because the copy will merge with the original automatically. That's what happens with vectors (pure drawings, not symbols) in Flash. So, if you want to make use of your new copy, just move it before clicking anything else.
1.11 With the freshly pasted copy still selected, select Modify > Transform > Flip Horizontal.
1.12 Move the mirrored half so that it joins the original drawing perfectly. You can do that with the arrow keys, but I recommend doing it with the Selection tool (V), because thanks to it, the drawing will perfectly snap into place, as shown in the picture below.
1.13 If you wish to make your paper airplane more realistic, you can apply some linear gradient color fills to it. Use the Paint Bucket tool (K) to do it.
1.14 Turn back the zoom to 100% (no zoom at all).
1.15 Select your completed drawing, both the lines and fills, using the Selection tool (V). To create a movieclip out of your selected vector drawing, select Modify > Convert to Symbol.
Call your new symbol paper airplane, select Movie clip as type and also select the central square for the registration point This last choice isn't exactly a must, but it will make creating the guided animation a little bit easier. Click OK.
...as soon as you do that, an azure outline will appear around your newly made symbol and the Properties inspector will also show you that you are dealing with a movieclip symbol now and not a simple drawing anymore.
You will create a simple motion tween animation now.
1.16 Right-click on frame 50 and select Insert Keyframe.
1.17 Use the Selection tool (V) to move the movieclip. Just click and drag it to a new position. You can place it anywhere, because what's important is that you make a motion tween animation, the direction of the movement isn't important now.
1.18 Right-click between the two keyframes and select the Create Motion Tween animation.
If you have done everything properly, an unbroken arrow over a purple background should appear.
If you didn't obtain a good motion tween (your arrow is dashed-broken), please check my motion tween animation tutorial which explaines in detail how to make such an animation, and where possible errors may lurk.
1.19 Call the current layer airplane and lock it.
Fine. Now you have the prerequisite for creating a guided animation — a simple motion tween. Let me show you how to add a guide to it.
2. Creating a motion guide
2.1 Click the Add Motion Guide icon beneath the layers to add a new motion guide.
As you can immediately see, a new motion guide layer has been added to your document. The layer benath it (airplane) has instantly become linked to this layer, become the guided layer. The airplane layer is now guided by the Guide: airplane layer. This can clearly be seen by the layer's icon which has become slightly indented — it has moved to the right.
Also, the duration of the guide layer is the same as that of the guided layer (50 frames in this particular example).
2.2 Select the Pencil tool (Y). In the Tools panel, go to the end of it and choose the Smooth option for drawing with your pencil.
In the Properties inspector, select hairline as line type and enter 100 as the value for the Smoothing option. Choose any color you like, since the guide won't be visible. I chose hairline to be able to work more easily and adjust the animation in more detail.
2.3 Click and start dragging with the Pencil tool (Y) to draw a guide (in the Guide: airplane layer, of course). Make a curve — it will come in handy for simulating the flight of your paper airplane. I started and finished drawing the curve outside the stage on purpose — to make it appear as if the airplane flew inside the scene and then disappeared outside of it.
3. Creating a guided motion tween animation
3.1 Now lock the Guide: airplane layer and unlock the airplane layer. Click on the first keyframe of the airplane layer to select it.
3.2 Click on the paper airplane movieclip once to select it - do this with the Selection tool (V).
3.3 You will move the movieclip to the guide's starting point. Use the Selection tool (V) again. Click on the movieclip's registration point (that's the small circle with a little cross inside) and drag it over to the beginning of the guide. Once the movieclip is ready to snap into place, you will see a bold, black circle appear near your cursor, as shown below.
If the snapping does not occur, check if it is turned on.
3.4 Click on the second keyframe in the airplane layer to select it.
3.5 Now do the same thing for the movieclip in this keyframe: Place it over the other end of the guide using the Selection tool (V). It should also snap into place, just like before.
3.6 Speed up the animation a little bit (before testing it), by increasing the frame rate of your Flash movie. Double-click the frame rate (below the layers) to open the Document Properties window.
Set the Frame rate to 24 fps and click OK.
3.7 Select Control > Test Movie. You should see an animation similar to the one shown below.
Wow! The movieclip is moving along the guide! You did it. But, there is one obvious flaw here: the paper airplane isn't moving around as in the real world. It should be moving with its nose pointing forward. So let me show you now how you can easily do that (you must, because animation is about simulating the real-world)!
3.8 Select the first keyframe again.
3.9 Select the Free Transform tool (Q). Also, turn off the Snap to Objects option to be able to adjust your movieclip's position freely, without any snapping.
3.10 Bring the cursor near one of the movieclip's corners (if the movieclip isn't selected, select it now). Click and start rotating until the paper airplane's nose is aligned with the direction of your motion guide (the curve in the layer above it).
3.11 Select the second keyframe of your animation again.
3.12 Adjust the movieclip with the Free Transform tool here too. The important thing is that the movieclip should be oriented as if it was following the guide all along — aligned with its direction.
3.13 There is one last thing to be done to have a proper guided motion tween: Select the first keyframe again (like you did in step 3.8) and go to the Properties inspector. Once there, turn on the option called Orient to path. Make sure that it is selected, as seen below.
3.14 Test your SWF again by selecting Control > Test Movie and you should see your airplane moving realistically, as shown at the beginning of this lesson.
Now that was easy, wasn't it? Guided animations are fun, because they help simulate real-world movements of various objects. In one of the upcoming animation tutorials, I will also explain to you how to create a circular animation and how to display the path. In the meantime, Subscribe to FlashExplained and you'll be notified of any new Flash lessons coming your way! Download the source FLA file for this lesson below.