Flash Explained

Learn Flash easily.

Making a movie clip chase another movie clip by using a motion guide

October 12th, 2008 | Author: Luka | Category: Animation


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.

Document properties window.

3 Call the first layer flight pattern. You'll draw the motion guide for the animation in this layer.

A layer with its label.

Top of page

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.

Selecting 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.

Choosing the settings for the pencil tool.

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 guide drawn on the stage.

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.

A guide layer.

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.

Selecting a display size for frames.

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.

Inserting a frame.

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 keyframe with a duration within the timeline.

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.

Top of page

Creating the airplane movie clip

10 Make a new layer above the existing one, and call it biplane.

Making a new layer.

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? 🙂

Two planes drawn in flash.

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.

The Convert to Symbol dialog box.

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.

A newly made movieclip.

Top of page

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.

A keyframe inserted in a layer.

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.

Selecting and removing frames from a layer.

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.

Creating a motion tween animation.

A continuous arrow on magenta background will appear. You have just made a motion tween animation for the airplane movie clip.

A motion tween animation displayed on the timeline.

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.

Top of page

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.

Dragging a simple layer under a guide 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.

The layer with the animation associated with the guide layer.

17 Click on the biplane layer's first keyframe to select it.

Selecting the first keyframe of a layer.

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.

The Snap to objects option 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.

Clicking on the movie clips registration point.

Move it to the start of the guide, on the right. You'll see that it will snap into place.

Placing the plane movie clip on the start of the guide.

20 Select the last keyframe of the biplane layer.

The last keyframe of the biplane layer selected.

21 Again, using the Selection tool (V), click on the airplane movie clip's registration point...

Clicking and dragging the movie clip by its registration point.

...and drag it to the other end of the guide. Once again, it will snap into position.

Placing the movie clip at the end of the motion guide.

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.

Clicking on the first keyframe to select it.

23 Go to the Properties panel below the scene.

Turning on the Orient to path option.

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.

The movie clip in relation to its motion guide.

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.

The Snap to objects option turned off.

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.

Placing the mouse in position for rotation of the movie clip.

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.

The rotated movie clip.

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.

Top of page

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.

A new layer created between the two existing ones.

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".

The Red Baron airplane drawing on the scene.

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.

Symbol creation window.

31 Click on the first keyframe of the triplane layer you are working in and release the mouse button.

Selecting the first keyframe in the triplane layer.

Click on it again and drag it forward.

Moving the first keyfrmae 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.

The difference in duration of various layers in the timeline.

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.

Inserting a keyframe into the triplane layer.

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.

Two motion tween animations and a simple layer.

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.

Putting the second movie clip at the beginning of the motion guide line.

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.

The movie clip after being rotated.

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.

Be Sociable, Share!

Comments

Submit a comment

  • Alex Nov 5, 2008 at 7:48 pm

    AWESOME! I like its simple, but effective and useful

  • Luka Nov 6, 2008 at 1:15 am

    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 […]

  • iverson Dec 17, 2008 at 9:45 am

    THank you very much!!!

  • ian Jan 24, 2009 at 3:48 pm

    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

  • Ramjam Feb 4, 2009 at 2:07 pm

    Excellent tutorial. A very good site!

  • manoj Apr 23, 2009 at 6:47 am

    good sir

  • dan Apr 28, 2009 at 12:22 am

    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?

  • virendeer Jan 13, 2010 at 1:07 pm

    i dont know any thing about flash scripting ,.., can u sugges me any book or any website were i can go n learn easily..,???????????????????????

  • KAUNG MYAT Jan 17, 2010 at 5:29 am

    THANK FOR YOUR TUTORIAL.

  • mugundhan Jan 24, 2010 at 11:26 am

    thistutorial very useful to my project

  • kathrina Oct 11, 2010 at 8:44 am

    nice but i dont understand

  • Bob Apr 3, 2011 at 3:39 am

    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.

  • chandra May 10, 2011 at 2:00 am

    how to learn flash sir. pls

  • ilunga Jul 30, 2012 at 9:42 am

    that is absolutely amazing, can you please relate to me any web page or site where by i can get tutorials about action script?

You must log in to post a comment.