Flash Explained

Learn Flash easily.

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

October 12th, 2008 | Author: Luka | Category: 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.

Document properties window.

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.

Working inside the symbol.

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

Selecting the color options for the oval tool.

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.

Object drawing option turned off.

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.

Selecting the shape.

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

Setting the width and height of the shape in the Properties panel.

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.

Using the Align panel.

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.

The shape centered in relation to the registration point.

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

Inserting a new keyframe.

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

The two identical keyframes on the timeline.

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.

The three identical keyframes.

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.

Setting the Line tool properties.

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.

The 45 degree line.

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.

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.

After dragging, the line snaps into place.

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.

Creating the wide open pacman mouth.

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.

Selecting the second keyframe.

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.

A horizontal line.

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.

Inclined line.

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

Two joined lines.

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.

Making the second animation frame.

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.

Moving the keyframes.

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.

Extending the duration of the 2nd keyframe.

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.

Inserting a frame.

All three keyframes are equally long now.

The same duration of all the three keyframes.

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.

Animation with the intermediate state missing.

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

The second keyframe selected.

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.

Pasting the copied keyframe.

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

The timeline of the finished animation.

There! Everything is in place now, as it should be! See the pac-man nibbling happily below! ๐Ÿ™‚

Top of page

Draw all your own game art with Adobe Flash - click the image below to find out how!

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

Returning to the main scene.

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

The Library.

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

An instance of the pac-man movie clip placed on the scene.

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

Inserting a 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.

Moving the pacman in the second position.

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.

Creating a motion tween animation.

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.

Inserting the third 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.

Movie clip rotation.

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

Creating the second motion tween.

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

Moving the pacman down.

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

Second motion tween animation.

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.

Also, you can download the source file with the ghost and the pac-man.

Draw all your own game art with Adobe Flash - click the image below to find out how!

Be Sociable, Share!

Comments

Submit a comment

  • Mackenzie Mar 29, 2012 at 12:53 pm

    I’m in Web Design II at my school, and I had so much trouble with this. I’m still not even done with it. *sad face.*

  • shiva Jul 20, 2012 at 8:56 am

    It is very nice tutorial. you have done a great job. keep it up and plz send me some other tutorials
    thank you
    GOD SAYS..

  • L Nov 19, 2012 at 4:01 pm

    Awesome tutorial!! The only thing I dislike is the ridiculous amount of time it takes to make all the dots and delete them so it all works. Thanks!!

  • Hashik vu May 11, 2013 at 9:15 am

    nice.. I like it..
    ๐Ÿ™‚

  • Alya Jul 3, 2013 at 6:48 pm

    What software is used? Macromedia Flash MX?

  • Alya Jul 3, 2013 at 6:50 pm

    ..or Flash CS5????

  • Mubashir Oct 21, 2013 at 12:59 pm

    its just a simple animation tutorial tell me How to move the pac man on arrow keys

  • Annastasia May 5, 2014 at 8:46 pm

    I didn’t like this. It was difficult and very wordy. If it were shorter and able to hold my attention better, I may have enjoyed it more.

  • bert Oct 7, 2014 at 3:22 pm

    Thanks this helped alot!

  • […] an animated pac-man in Flash that runs and eats pills. Download Designing a Pac-Man with frame-by-frame and motion tween … | […]

  • […] Designing Pac-Man […]

You must log in to post a comment.