Designing a Pac-Man with frame-by-frame and motion tween animation

In this tutorial, you will use the basic animation techniques in Flash to create a moving pac-man! There is no better way of learning a technique than by working on a real-world example.

You can see the nice animation below - you'll learn the necessary techniques to create it in this easy lesson.

Creating the basic pac-man animation

So, the first thing you will create is the animation of the pacman's mouth - the eating animation. This is really easy, you'll see.

1. Open a new flash document.

2. Go to Modify > Document. In the Document Properties dialog box that appears, set the Frame rate (speed of your movie) to 24 fps. Set the Background color to black. Click OK.

3. Select Insert > New Symbol. Call the symbol pac-man and select Movie clip as symbol type. Click OK. You are now working inside the new movie clip you just created. You can see that information (the little movie clip and the symbol's name) on top of the timeline.

4. Select the Oval tool (O). In the Colors part of the Tools panel, click on the small pencil icon (1 in the image below). You have now selected the outline color option. Block the outline color completely by clicking on the little middle icon on the bottom of the panel (2). Choose basic yellow (#FFFF00) as fill color (3).

If you are working in Flash 8, also turn off the Object Drawing option situated in the Options portion of the Tools panel. It is the little circle with blue frame beside the magnet icon.

5. Hold down Shift and click with your mouse anywhere on stage and start dragging. In that way, you will create a circle instead of an ellipse.

Choose the Selection tool (V) and click once on the shape to select it.

6. Go to the left side of the Properties panel (below the stage). Make the width and height of the circle equal 40 pixels.

7. Open the Align panel (Window > Align). The circle is still selected and that's allright. In the Align panel, turn on the Align to stage option (1). Then click on the Align horizontal center (2) and Align vertical center (3) buttons.

Your circle will now be perfectly centered in relation to the movie clip registration point. This is the little cross in the center of the stage. Remember, you are still working inside the pac-man movie clip.

8. In the timeline, right-click on the second frame and select Insert Keyframe.

A new keyframe will appear on the timeline, with exactly the same contents as the previous one.

9. Repeat the previous operation: right-click on the frame 3 and select Insert keyframe. You will now have three identical keyframes on the first layer of the timeline.

These three keyframes will be the three main states of the pac-man animation: the little dude with the mouth full open, half-closed and completely closed (munch!) :)

10. Click once (standard left mouse click) on the first keyframe to select it. Now click anywhere on the stage to unselect the circle.

11. Select the Line tool (N). In the Properties panel, set the line thickness to hairline. Choose a color that will be in good contrast with the circle and the stage background, to more easily see what you are working on.

12. Click on the stage and start dragging, all while holding Shift. This will constrain drawing to 0, 45 and 90 degrees. Draw a diagonal 45° line. Just make it a little bit bigger than the circle.

13. Choose the Selection tool (V) and click on the line to select it.

14. Copy the line (Ctrl+C) and Paste it place (Ctrl+Shift+V).

Now, do not click anywhere! Otherwise you'll lose the copy you just made. There are now two lines on the stage, although it seems there is only one. This is because you just used the Paste in place command which puts the copy exactly over the original.

15. Select Modify > Transform > Flip Vertical to create a vertical mirror image of the line.

If you followed everything exactly as I said up to this point (like a good student that you are :), you should have the same situation as on the image above. And the Selection tool (V) will still be selected.

16. Place the mouse near the selected line's left end and click. Start dragging. When you get close to the other line's tip point, a circle will appear, indicating that the line you are dragging will snap into place. YOu can clearly see this on the image sequence below.

17. Select both lines. In the Align panel, click the Align vertical center button (see step 7) and then the Align left edge button (the first button in the first row). The lines will now fall nicely in place to suit your needs.

Click on the yellow portion between the lines. Hit Delete to erase it. Select the lines and delete them.

There! You just created the wide-open-mouth state of the pac-man. You'll now create the middle state - the one with the half-open mouth (or half-closed? Duh).

18. Click on the second keyframe on the timeline.

19. Click anywhere on the stage to unselect the yellow circle. Again, select the Line tool (N).

Now, draw a horizontal line. Just hold Shift, click and drag horizontally.

20. Select the line. Open the Transform panel (Ctrl+T). In the Rotate field, write 22 and hit Enter to confirm. The line will now be inclined by 22 degrees.

21. Now, repeat the steps 14 thru 16 to obtain the mirror image of this line and to join their tips together.

22. Align the two lines in relation to the movie clip's registration point just like you did before. Then erase the yellow segment in the middle and the lines after that.

Voila! The middle position of the pacman is finished. You won't touch the third keyframe because this is the closed-mouth position and it has to stay that way.

That's fine, but something needs to be changed - look how the pac-man appears if you animate it now. Looks like he's in need of a pill badly!

Oh, before continuing, save your work if you haven't already. You don't want to look like the pac-man above if your machine crashes suddenly and you forgot to save the fla file.

23. You will now prolong the duration of each keyframe so that the pacman moves more slowly.

Click on the 2nd keyframe. Hold Shift and click on the 3rd keyframe. Both should be selected now (first image below).

Release the Shift key. Click on the second keyframe and start moving your mouse to the right. You will see that you are moving both keyframes which is exactly what needs to be accomplished. Move them one frame ahead. Your final result should look like the third picture in the sequence below.

24. Click on the third keyframe. Release your mouse and click on the 3rd keyframe again, start dragging it - move it one frame to the right.

You have now extended the duration of the 1st and the 2nd keyframes.

25. Extend the duration of the 3rd keyframe by right-clicking on the frame just after it (this is frame 6) and selecting Insert frame.

All three keyframes are equally long now.

The pac-man is less anxious now :)

However! There is still an abrupt movement. You may not see it clearly enough, but there is definitely something that doesn't click well.

Here's the catch. You have three states: wide open, half open and completely closed. All animations in Flash loop indefinitely by default. So in your case, when the pac-man movie clip arrives at the end of the animation (the mouth closed position) it jumps back to the beginning where the mouth is wide open. This means there is no intermediate (half-open) step in between which makes the animation seem unnatural. See the diagram below for a better explanation.

26. So, how to set this straight? Easy! Right-click on the second keyframe (keyframe, not frame - see image below) and select Copy Frames.

27. Right-click on the first empty frame ( this is frame number 6, right after the last little white square on the right) and select Paste Frames.

28. Right-click on the empty frame right after it and select Insert Frame.

There! Everything is in place now, as it should be! See the pac-man nibbling happily below! :)

Setting the pacman in motion

Now, let's see how you'll animate the pac-man so that it is positioned properly depending on the direction of his movement.

29. Click on the Scene 1 link above the timeline to return to the main scene (to exit the movie clip symbol timeline).

30. Open the Library (Ctrl+L or F11). You'll se the pac-man movie clip nicely sitting there.

31. Click and drag the movie clip pac-man on the scene.

32. In the timeline, right-click on the frame 45 and select Insert keyframe.

33. Move the pac-man movie clip about 430 pixels to the right. Do this by pressing the Right arrow key while holding Shift.

34. Now, to animate the little pac-man dude, right-click either on the first keyframe in the timeline or anywhere on the gray area between the two keyframes and select Create Motion Tween.

NOTE When you create a motion tween animation, Flash is calculating all the positions and changes occuring between two keyframes. You wouldn't have obtained the animation if you right-clicked on the second keyframe and tried to create a motion tween. That's because when you try to do a motion tween on the second keyframe, this would-be-tween is related to the frames coming AFTER the second keyframe - to the next portion of the animation. You will make this in a moment.

Press Ctrl+Enter to test your movie and see the pac-man moving about!

35. Right-click on frame 46 (the one just after the second keyframe) and select Insert keyframe.

36. Select the Free Transform tool (Q) and click once on the pacman to select it.

Place your mouse near the movie clip's top right corner, until a circular arrow appears as cursor. Hold Shift, click and start rotating the movie clip clockwise. Rotate it by 90 degrees. Release the mouse.

37. Back in the timeline right-click on, for example, frame 74 and select Insert Keyframe.

38. Hold the Shift key and press the Down arrow key until you have moved the pac-man movie clip down by 180 pixels.

39. Again, to create the animation, right-click between the two keyframes and select Create Motion Tween.

Test your movie (Control > Test Movie) and see how nicely the pac-man turns as he changes direction.

If you want to make the ghosts, that's easy. They are also made up of a frame-by-frame animation of their eyes' movements inside a movie clip symbol, with a ghost body background. You have the source for this version of the animation available for download, too.

If you plan to make all the four original ghosts, don't forget their names: Shadow, Speedy, Bashful and Pokey. And every ghost also had a nickname, notably: Blinky, Pinky, Inky and Clyde! :)

Source files can be downloaded below.

Download the source FLA file for the simple pacman animation you learned to create in this tutorial.