With this lesson, you are going to learn how to make a motion guide that two movie clips will follow, one after another. This is one of the basic animation techniques in Flash. The example below shows the final result you’ll achieve at the end of this animation lesson.
1 Open a new Flash document.
2 Select Modify > Document (or press Ctrl+J) . In the Document Properties window that opens up, set the Frame rate (the speed of your SWF movie) to 24 fps. Click OK. This is necessary if you want to have a fluid animation.
3 Call the first layer flight pattern. You'll draw the motion guide for the animation in this layer.
Creating the motion guide for the animation
4 Select the Pencil tool (Y). In the Options portion of the Tools panel, select the Smooth option.
This will make possible the creation of nice curved lines, which aren't too angular or too "messed up" so that the flight patterns of the airplanes will be smooth and close to real-life flight.
5 In the Properties panel, select hairline as line type, and choose a color that will contrast well with the rest of the movie and the objects in it. Since the guide for the animation will be invisible, you can choose whichever color you like.
6 Draw a wide, curved "S" letter on stage. It is important that you begin and end outside the visible area of stage (the white area), because you want your airplanes to arrive from outside, and disappear off the stage. It would look awkward if an airplane appeared on the stage just out of nowhere, now wouldn't it? 🙂
The image above is a resized screenshot of the stage - I did that not to have too big an image here, because it isn't necessary.
7 Lock this layer by clicking on the small dot beneath the padlock icon.
Now, right-click on flight pattern (the only one, for now) layer and select "Guide" from the menu that will appear. This layer will become a guide layer, you'll see this change represented by a small ruler icon placed next to its name.
8 Go to the upper right corner of the timeline. Click on the small menu icon found at the end of the frame numbers. Click on it, and select "Small" from the menu that appears.
Since you will be making an animation involving long tweens, it is easier to work with frames displayed smaller. In this way, you can see a bigger portion of the timeline, without having to scroll left and right.
9 Right-click somewhere between the frame 100 and 110, and select "Insert Frame" from the menu that appears.
You have just made the first keyframe of this layer last until the place where you inserted the frame. This means that the guide will be present in this portion of the timeline, without any changes. You won't be animating the guide, it is there to lead the objects during their animation.
A motion guide must be present during the entire animation of an object - be it a movie clip, button or graphic symbol. An animated symbol cannot have its animation last longer than the guide. Because, once it continues its motion once the guide is no longer there, the symbol won't follow the guide anymore. That's way it is necessary to make the motion guide first, and the animation of the symbol later. If, during your work, you realize that you need a longer animation, make it longer, but don't forget to expand the duration of the guide. Just insert a frame in the guide layer so that it covers the whole span of motion for an animated object.
Creating the airplane movie clip
10 Make a new layer above the existing one, and call it biplane.
Make sure that you locked the flight pattern layer, so that you don't accidentaly draw your airplane there.
11 Draw an airplane in the biplane layer. If you don't want to spend much time designing your airplane now, just draw a simple shape. It is important, however, that you draw it so that it is pointing at the left. This is done in order to set the starting orientation of the airplane, in relation to its planned flight trajectory.
You can draw a simple airplane like the one on the right in the image below :), or a cool WWI warplane which I chose for this animation tutorial. I drew an airplane that was flown by Charles Nungesser, the French WWI flying ace! It looks cool, doesn't it? 🙂
Just make it about 70 pixels wide and 60 or so pixels high.
12 Select your drawing with the Selection tool (V) and press F8 to convert it to a symbol. This is necessary, because when doing a motion tween, you can't animate a plain drawing. A plain drawing can be animated if you are doing a shape tween animation.
In the dialog box that appears, select Movie Clip as type, call it Charles Nungesser, allied airplane, first airplane or whatever you like and click OK.
After you clicked OK, you'll see that your drawing has been tranformed into a movie clip symbol. It is marked by a thin blue line and small circle with a little cross inside it. This is the rotation and transformation center for a movie clip (and a button or a graphic symbol). This small circle will be important later, when you'll make your airplane follow the motion guide.
Making the motion tween animation
13 In the biplane layer you're currently working in, right-click on a frame that is situated about 8 to 10 frames before the small white rectangle at the end of the gray area and select Insert Keyframe.
14 Click on the frame situated just after the newly created keyframe and release your mouse, to select it.
Next, hold Shift and click on the frame with the small white rectangle to select all the frames in between.
Right-click anywhere on the blackened area (the selected frames) and choose "Remove Frames" from the menu that appears.
You have removed all the unnecessary frames for this layer. You can see this procedure in the sequence shown on the image below.
You have removed these frames because they don't serve you. The animation for this, first airplane, will be just a little bit shorter than the duration of the guide layer, currently situated below it.
15 Right-click anywhere between the two keyframes on this same (biplane) layer and select "Create Motion Tween" from the menu.
A continuous arrow on magenta background will appear. You have just made a motion tween animation for the airplane movie clip.
If you test your movie right now, nothing will happen. There is no movement, because you didn't move the airpline clip away from its starting point. This is fine, because you'll be adjusting the position of the airplane in a moment, to make it follow the motion guide.
Associating the animation with the motion guide
16 Click on the biplane layer's area at the left of the timeline (where its name is) and start dragging it downwards. Put it below the flight pattern layer. Once you see a bold gray line like the one shown on the image below, your layer is ready to snap into place and become associated with the guide in the flight pattern layer.
Once in place, the icon of the biplane layer will become indented, meaning it will be pushed a little bit inside. The ruler icon of the guide layer will become a guide icon, a dotted red path with a small blue ball on its end.
17 Click on the biplane layer's first keyframe to select it.
18 Choose the Selection tool (V). Make sure that the "Snap to objects" option is turned on. To check if it really is, just see if the little magnet icon on the bottom of the Tools panel is turned on.
Also, be sure that the flight pattern layer is locked. This is important, because you'll be moving the airplane movie clip into its starting position and you don't want to accidentally select and deform the guide.
19 Click on the small circle with cross in the middle of airplane movie clip (its registration point) and start dragging it.
Move it to the start of the guide, on the right. You'll see that it will snap into place.
20 Select the last keyframe of the biplane layer.
21 Again, using the Selection tool (V), click on the airplane movie clip's registration point...
...and drag it to the other end of the guide. Once again, it will snap into position.
Test your movie (select Control > Test Movie). You should obtain a result similar to the one shown in the Flash example below.
The airplane is following the guide which is fine. But there is something... weird, isn't there? 🙂 The airplane is always in the same position, pointed at the left, while it should change its rotation in relation to the turns it is making. You'll now see how easy it is to make the airplane follow the flight path properly, as in real life.
22 Select the first keyframe of the biplane layer.
23 Go to the Properties panel below the scene.
In the middle of the panel, there are the options for the guided animation. The Sync and Snap options are already turned on, which is fine. Turn on the Orient to path option. This will make the airplane fly normally, as in real life. Test your movie and you'll see this happening.
If you are not satisifed with the animation - if your airplane does not position itself as it should, correct its starting position. Do this in the following way:
24 Look at your airplane's orientation in relation to the guide line, at the animation's beginning.
If you look carefully at the image above, you'll see that the plane is positioned horizontally, but the beginning of the motion guide line isn't perfectly horizontal, it has rather a small inclination. So, for the plane to act naturally, it must be oriented exactly as the motion guide line is in its starting position.
25 Select the Free Transform tool (Q). Make sure that the "Snap to objects" option is turned OFF this time. This will make fine rotation adjustements easier to do.
26 Click once on the airplane movie clip. The handles and controls for changing the movie clip's rotation and appearance will appear. Move your mouse near the movie clip's upper right corner, until a circular arrow appears. This means that you'll be rotating the movie clip once you click and start moving your mouse.
27 Click and start dragging your mouse so that your airplane rotates until it is parallel to the motion path line. If necessary, move your mouse away from the movie clip to make finer adjustements.
Test your movie (Ctrl+Enter) and see if you got the animation right. If necessary, rotate your movie clip a little bit more until you're satisfied with the airplane's flight.
When finished, lock the biplane layer. That's it for the first airplane animation! I will now show you how to make a second plane and animate it so that it follows the first one.
Making the second guided animation
28 Create a new layer above the biplane layer. Since you were working in the biplane layer, a layer will be created between it and the flight pattern layer (the guide layer) and will automatically be associated with the motion guide.
Call the newly made layer triplane.
29 Draw a second airplane here. I chose to make the triplane which was flown by Manfred von Richthofen, the WWI pilot, better knows as Red Baron - the "ace of aces".
Make its size similar to the first airplane's.
30 Using the Selection tool (V), select the drawing you just made. Hit F8 to convert it to a symbol. In the Convert to Symbol window, select Movie Clip as type, just like you did before, and call it Manfred von Richthofen, Red Baron or whatever you like and press OK.
31 Click on the first keyframe of the triplane layer you are working in and release the mouse button.
Click on it again and drag it forward.
The number of frames by which you must move your keyframe forward depends on the number of frames existing between the end of the first animation (its last keyframe) and the end of the motion guide layer (the small white square at it's end). Go to the end of your animation in the timeline to see this.
This difference in duration of two animations is necessary to be the same at both the start and the end of the animation, so that the air chase proceeds smoothly from the beginning to the end.
32 Right-click on the frame with the small white square at the end of triplane layer and select Insert Keyframe from the menu that appears.
33 Right-click anywhere between the two keyframes on the triplane layer and select "Create Motion Tween" from the menu that will appear. You have just made a motion tween animation for the second airplane movie clip.
The next few steps will be exactly the same ones you did for the first movie clip.
34 Go to the first keyframe of the triplane layer and using the Selection tool (V), grab the movie clip by its registration point and place it at the beginning of the motion path line. If it doesn't snap into place, check if the "Snap to objects" option is turned on.
35 Use the Free Transform tool (Q) to rotate the movie clip so that it starts oriented in the sense of the guide line. Turn the "Snap to objects" option off if necessary.
36 Go to the last keyframe of the triplane layer and once there, place the movie clip at the end of the motion guide line, again by dragging it by its registration point.
37 Select the first keyframe of this animation - not the blank one, but the black one, where the red airplane appears for the first time. Just like you did back in step 23 for the first animation, turn on the "Orient to path" option on for this animation too.
Test your movie. You should see the animation working smoothly - the two planes should fly around with the red one chasing the blue one!
Now that was easy to do. And yet there are many things that can be done with an animation following a motion guide. Like making a symbol turn inside a circle constantly, make a leave fall along a trajectory, etc. But I'll leave that for another lesson. In the meantime, keep on learning! 🙂
Download the source FLA file for the guided animation you learned to make with this tutorial.
AWESOME! I like its simple, but effective and useful
Thanks 🙂 Spread the word 🙂
[…] and stop() function pause the at the frame.) To make flexible and curvy movements in Flash: flexible and curvy movements To move movieclips around the stage by pressing a key: move movieclips around (learn that ._x and […]
THank you very much!!!
hi there is there any way or an action script that can make me able to create an AI to my game. its a car and cop game and i was wondering if there is such an action script that can help me to create a chase? please mail me thanks
Excellent tutorial. A very good site!
good sir
it’s good, but the plane doesn’t follow the guide line. everything is setup as it should be and have followed your tutorial step-by-step. The plane simply moves from the top right hand corner of the page to the bottom left corner. What am I missing?
i dont know any thing about flash scripting ,.., can u sugges me any book or any website were i can go n learn easily..,???????????????????????
THANK FOR YOUR TUTORIAL.
thistutorial very useful to my project
nice but i dont understand
The tutorial is great.
I am using CS5 and the only change needed for this to work is to select “Create Classic Tween. If “Create Motion Tween” is selected it does not run properly, the plane appears at the start and the end only, it does not travel the flight pattern,
As someone learning how to, I really enjoyed this exercise.
how to learn flash sir. pls
that is absolutely amazing, can you please relate to me any web page or site where by i can get tutorials about action script?