Flash CS4: Create a simple table tennis game

In this article, you'll use motion tween to create a simple table tennis game. The steps are as follows:

1. Switch back to the default workspace.

Click the Essentials area to reselect the default Flash workspace, then click Reset Essentials to restore this default workspace and start the exercise.

2. Create a new flash document.

3. Save a flash document.

Select the FLASH CS4 ONLINE folder, then save this file as 009_pingpong.fla

4. Import the drawing guide as a path for motion tween.

4.1. Select File > Import > Import to Stage . from the menu:

Flash CS4: Create a simple table tennis game Picture 1

4.2. In the Import dialog box, point to the file guide.jpg and click the Open button: (file guide.jpg attached to the card sized 550x400 pixels to use)

Flash CS4: Create a simple table tennis game Picture 2

You get the image of the links to help you create motion tween for the ball and the two bats later:

Flash CS4: Create a simple table tennis game Picture 3

Analysis of drawings:

In the figure above, the two vertical red lines represent the moving boundary of the ball. The ball can only touch these two lines and not pass.

The blue line shows the path of the ball. In this way, the ball moves from position 1 to position 2, 3, 4 and returns to position 5, where positions 1 and 5 overlap. The black line on the left shows the path of the left racket, the left racket moves from position 1, to position two to catch the ball and returns to position 3, where positions 1 and 3 overlap.

The black line on the right shows the path of the right racket, the racquet must move from position 1, to position two to catch the ball, then move forward to position 3, return to position 4 to catch the ball and return to position 5, in which positions 1 and 5 overlap.

Thus, the ball and the racket must use 5 keyframes, the left racket uses 3 keyframes.

---

5. Create motion tween for the ball.

5.1.Double-click Layer 1 to rename the Guide :

Flash CS4: Create a simple table tennis game Picture 4

5.2. Click the New Layer button in the Timeline to add a layer:

Flash CS4: Create a simple table tennis game Picture 5

5.3. Flash add a new layer with the default name Layer 2 . Double-click Layer 2 to rename it to Ball :

Flash CS4: Create a simple table tennis game Picture 6

5.4. Mouse over the toolbar. Click on the Rectangle Tool and hold down the mouse for a few seconds for the submenu to appear. Click on the Oval Tool :

Flash CS4: Create a simple table tennis game Picture 7

5.5 Click on the Stroke color box to select the border color for the oval:

Flash CS4: Create a simple table tennis game Picture 8

5.6. The color palette appears, click the box on the right with a red cross. This box is used to set the colorless value for the border, ie the drawn object has no borders:

Flash CS4: Create a simple table tennis game Picture 9

5.7 Click on the Fill color box to select the color for the oval:

Flash CS4: Create a simple table tennis game Picture 10

5.8. The color palette appears. You select the red pattern in the area containing the gradient color:

Flash CS4: Create a simple table tennis game Picture 11

You get the following result:

Flash CS4: Create a simple table tennis game Picture 12

5.10. Put your mouse on the upper corner, where the blue path of the ball comes from, hold down Shift and drag the mouse down to the right to draw a circle.

Flash CS4: Create a simple table tennis game Picture 13

Release the mouse button and you get the round ball with the gradient color as follows:

Flash CS4: Create a simple table tennis game Picture 14

5.11 Click on the Selection Tool on the right toolbar:

Flash CS4: Create a simple table tennis game Picture 15

5.12 Click on the ball just drawn. Once selected, the ball turns into tiny particles, while a four-dimensional arrow appears below the mouse:

Flash CS4: Create a simple table tennis game Picture 16

5.13. Select Modify > Convert to Symbol . from the menu (or press the shortcut F8 ) to convert the ball to symbol:

Flash CS4: Create a simple table tennis game Picture 17

The Convert to Symbol dialog box appears. Click on the name of the ball in the Name box, select Type as Movie Clip and click OK to close the dialog box. The ball is converted into a Movie Clip.

Flash CS4: Create a simple table tennis game Picture 18

5.14 Right click on the ball to bring up the context menu and select Create Motion Tween :

Flash CS4: Create a simple table tennis game Picture 19

Flash created a motion tween for the ball with 24 frames (equivalent to 1 second), while moving Playhead to frame 24 . You add additional frames so that the duration of the ball is long enough for you to observe. You will add the active ball to frame 60.

5.15 Move your mouse to frame 24 of layer Ball until the mouse turns into a two-way arrow:

Flash CS4: Create a simple table tennis game Picture 20

5.16 Drag to frame 60 , release the mouse button. You got motion tween for the ball with 60 frames :

Flash CS4: Create a simple table tennis game Picture 21

5.17 However, frame 60 is not yet a keyframe. In order for the contents of the first keyframe and the last keyframe of the ball to overlap, use the Up arrow key (up arrow) and the Down arrow (down arrow) on the keyboard. You press the Up arrow, the ball moves up 1 pixel, then you press the Down arrow, the ball moves below 1 pixel, Flash automatically adds keyframe at frame 60, and the ball position still doesn't change due to compensation:

Flash CS4: Create a simple table tennis game Picture 22

5.18 Click on frame 60 of layer Guide :

Flash CS4: Create a simple table tennis game Picture 23

5.19 Press the shortcut F5 to add more than 60 frames so that other layers can see the path that is on the layer Guide for easy operation:

Flash CS4: Create a simple table tennis game Picture 24

5.20 As discussed above, the ball uses 5 keyframes . You add the following keyframes: Drag your mouse to frame 15 on Timeline :

Flash CS4: Create a simple table tennis game Picture 25

5.21 Click to switch Playhead to frame 15 (note: click on 15, do not click on the frame on the layer):

Flash CS4: Create a simple table tennis game Picture 26

5.22 The mouse click drags the ball from position 1 to position 2 and drops it. Flash automatically add keyframe at frame 15 on layer Ball:

Flash CS4: Create a simple table tennis game Picture 27

5.23 Mouse over frame 30 on Timeline and click to switch Playhead to frame 30:

Flash CS4: Create a simple table tennis game Picture 28

5.24 Drag the ball to position 3. Flash automatically add keyframe at frame 30 on the Ball layer :

Flash CS4: Create a simple table tennis game Picture 29

5.25 Hover your mouse over frame 45 on Timeline and click to switch Playhead to frame 45 :

Flash CS4: Create a simple table tennis game Picture 30

5.26 Drag the ball to position 4. Flash automatically adds the keyframe at frame 45 on the Ball layer:

Flash CS4: Create a simple table tennis game Picture 31

You obtained the complete motion tween for the ball with the motion path purple as shown:

Flash CS4: Create a simple table tennis game Picture 32

Continue

---

6. Create motion tween for the left racquet.

6.1 Click the New Layer button in the Timeline to add a layer:

Flash CS4: Create a simple table tennis game Picture 33

6.2 Flash add a new layer with the default name Layer 3. Double-click Layer 3 to change its name to Left paddle :

Flash CS4: Create a simple table tennis game Picture 34

6.3 Move the mouse to the toolbar. Click on the Oval Tool and hold down the mouse for a few seconds for the submenu to appear. Click to select Rectangle Tool :

Flash CS4: Create a simple table tennis game Picture 35

6.4 Click on the Fill color box to select the color for the rectangle:

Flash CS4: Create a simple table tennis game Picture 36

6.5 The color palette appears. You choose the blue pattern:

Flash CS4: Create a simple table tennis game Picture 37

You get the following result (border color is still colorless):

Flash CS4: Create a simple table tennis game Picture 38

6.6 Click on the Stage , click on the corner of the starting position of the ball, drag backwards to the left and then release the mouse to get a rectangle, as shown below:

Flash CS4: Create a simple table tennis game Picture 39

6.7 Click the Selection Tool on the toolbar:

Flash CS4: Create a simple table tennis game Picture 40

6.8 Click to select the rectangle just drawn. Once selected, the rectangle changes to tiny particles, while the four-dimensional arrow appears below the mouse:

Flash CS4: Create a simple table tennis game Picture 41

6.9 Select Modify > Convert to Symbol . from the menu (or press the shortcut F8 ) to convert the rectangle to symbol :

Flash CS4: Create a simple table tennis game Picture 42

6.10 The Convert to Symbol dialog box appears. Type in the paddle name in the Name box, select Type as Movie Clip and click OK to close the dialog box. The rectangle is converted into a Movie Clip.

Flash CS4: Create a simple table tennis game Picture 43

6.11 Right-click the rectangle for the context menu to appear and choose Create Motion Tween . Flash created motion tween for the rectangle on the Left paddle layer with 60 frames:

Flash CS4: Create a simple table tennis game Picture 44

6.12 Mouse over frame 60 on Timeline and click to switch Playhead to frame 60:

Flash CS4: Create a simple table tennis game Picture 45

6.13 Frame 60 is still not a keyframe. You press the Up arrow, the rectangle moves over 1 pixel, then you press the Down arrow, the rectangle moves below 1 pixel, Flash automatically adds keyframes at frame 60, and also positions the shape Japan has not changed because it has been offset:

Flash CS4: Create a simple table tennis game Picture 46

6.14 Hover your mouse over frame 30 on Timeline and click to switch Playhead to frame 30:

Flash CS4: Create a simple table tennis game Picture 47

6.15 Hold down the Shift key and drag the rectangle to position 2, where the ball is located (Shift key helps you to move vertically, not to the right or left):

Flash CS4: Create a simple table tennis game Picture 48

So you've finished motion tween for the left racket (ie rectangle).

---

7. Create motion tween for the right racquet.

7.1 6.1 Click the New Layer button in the Timeline to add a layer:

Flash CS4: Create a simple table tennis game Picture 49

7.2 Flash add a new layer with the default name Layer 4. Double-click Layer 4 to rename to Right paddle :

Flash CS4: Create a simple table tennis game Picture 50

7.3 Click the Library tab to open the Library Panel :

Flash CS4: Create a simple table tennis game Picture 51

7.4 From the Library Panel , drag the Movie Clip paddle to the Stage , and drop it into position 1 of the racquet right as shown:

Flash CS4: Create a simple table tennis game Picture 52

7.5 Click the right mouse button on the right racket (ie rectangle) to bring up the context menu and select Create Motion Tween .

Flash CS4: Create a simple table tennis game Picture 53

7.6 Mouse over frame 60 on Timeline and click to switch Playhead to frame 60 :

Flash CS4: Create a simple table tennis game Picture 54

7.7 Frame 60 is not yet a keyframe. You press the Up arrow, the rectangle moves over 1 pixel, then you press the Down arrow, the rectangle moves below 1 pixel, Flash automatically adds keyframes at frame 60, and also positions the shape Japan has not changed because it has been offset:

Flash CS4: Create a simple table tennis game Picture 55

7.8 Hover your mouse over frame 15 on Timeline and click to switch Playhead to frame 15 :

Flash CS4: Create a simple table tennis game Picture 56

7.9 Hold down Shift and drag the racquet to where the ball is in position 2:

Flash CS4: Create a simple table tennis game Picture 57

7.10 Mouse over frame 30 on Timeline and click to switch Playhead to frame 30 :

Flash CS4: Create a simple table tennis game Picture 58

7.11 Hold Shift and drag the racquet to position 3 as shown:

Flash CS4: Create a simple table tennis game Picture 59

7.12 Hover your mouse over frame 45 on Timeline and click to switch Playhead to frame 45 :

Flash CS4: Create a simple table tennis game Picture 60

7.13 Hold Shift and drag the racquet to the place where the ball is in position 4 as shown:

Flash CS4: Create a simple table tennis game Picture 61

So you've finished motion tween for the right racket.

---

8. Move layer Guide to Guide Layer.

Layer Guide has completed the task. You can delete this layer. However, you can keep it for reference by converting it to Guide Layer:

8.1 Right-click the layer guide to bring up the context menu and select Guide :

Flash CS4: Create a simple table tennis game Picture 62

Flash to change the icon of the layer Guide into a hammer. In this way, the content of the layer Guide will not be exported to Flash Movie, does not increase the size of your work.

Flash CS4: Create a simple table tennis game Picture 63

8.2 Select Control > Test Movie from the menu (or shortcut Ctrl + Enter ) to see the result:

Flash will export to file 009_pingpong.swf as follows:

Flash CS4: Create a simple table tennis game Picture 64

9. Move motion path

If you do the right actions as instructed, when you test Movie you will see the left racket has not touched the ball. You will move the motion path of the left racket to the racquet to hit the ball (you can get the attached sample file to practice this step)

9.1. Hover your mouse over frame 30 on Timeline and click to switch Playhead to frame 30 :

Flash CS4: Create a simple table tennis game Picture 65

You see the left racquet a paragraph away from the ball:

Flash CS4: Create a simple table tennis game Picture 66

9.2 Press the selector on the left rack to show motion path :

Flash CS4: Create a simple table tennis game Picture 67

9.3 Double-click motion path :

Flash CS4: Create a simple table tennis game Picture 68

9.4 You check in the Property Inspector to have Motion Tween icon to make sure you have selected motion path , not any other object:

Flash CS4: Create a simple table tennis game Picture 69

9.5 Use the right arrow key ( Right ) on the keyboard to move the racquet to the right until the racquet hits the ball. Each time you press the Right key, the object moves 1 pixel, if you hold down the Shift key, the object moves 10 pixels.

Flash CS4: Create a simple table tennis game Picture 70

You can do the same way to apply to the right racket.

Suggested exercises:

Redo the above lesson with the change guide as shown below. This time both racquets move with keyframe positions marked on the illustration. You can download the guide2.jpg illustration and sample result file 009_pingpong2.fla for reference.