Replacing the Images

Before we test the movie, let's talk about what we've done in the component's parameters. First, we removed the time limit so that people playing the game have an infinite amount of time to make the matches. Next, we changed the rows to 4 and the columns to 5. This means there will be 20 game pieces or objects on the stage. Setting the padding to 0 will display all the pieces directly next to one another. Then we set the pieces so that they will be arrayed out starting at the upper-left corner of the stage.

Let's say we want only the game pieces visible. That means we need to change the stage size so that it will only display the game pieces and nothing else. The game pieces or objects are all 75 pixels square. Therefore, to determine our stage size, we multiply 5 times 75 for the width and 4 times 75 for the height. Follow these steps:

1. Select Document from the Modify menu to open the Document Properties dialog box.

2. Change the Width to 375 and the Height to 300.

3. Click OK to close the Document Properties dialog box.

Now the stage size matches the size all of the game pieces. In other words, the game pieces will cover the entire stage.

One other change that we made to the Concentration Game component's parameters was setting the Show Matching Pieces parameter to False. This means that when players match pieces, those game pieces will go away. Let's place a picture below the game pieces so that when the player matches the pieces, an image will appear underneath.

1. Create a new layer named "background" and place that layer below all the other layers.

2. Place a keyframe on frame 10 on the new background layer.

3. Open the library, open the folder named Bitmaps, and drag the clown.jpg onto the keyframe on frame 10 of the new background layer.

4. Center the clown.jpg image on the stage, as shown in Figure 9.12.

   
   Figure 9.12: Placing the clown.jpg image on the stage

Now let's change the imagery that you need to match in the game. Notice the images to the left of the stage. These are the images that the player must match. They aren't very interesting, so let's change them.

1. Select the image in the top-left corner.

2. Open the Properties panel and notice that it has the instance name "object1a" (see Figure 9.13). The game will not work properly if the objects are not named with this syntax. However, you can edit these movie clips and put whatever artwork you want in them.

   
   Figure 9.13: The first object in the upper-right corner has the instance name "object1a."

3. Double-click the object1a movie clip in the library to open it on the stage.

4. Open the folder named Pics in the library.

5. Delete the artwork in the object1 movie clip and drag the movie clip named "pic1" onto the stage.

6. Center the movie clip on the stage.

7. Return to the main Timeline and notice that the new artwork is in both the movie clip with the instance name "object1a" and the movie clip with the instance name "object1b" (see Figure 9.14).

   
   Figure 9.14: Edit the object1 movie clip and replace the original artwork with the pic1 movie clip.

8. Repeat this process for all the other objects on the stage. For example, replace the artwork in the object2 movie clip with the "pic2" movie clip and so on. When you are finished, the objects on the stage should look like Figure 9.15.

   
   Figure 9.15: Replace the artwork in all of the objects with the corresponding movie clips in the Pic library.

Now you're ready to test the movie. Notice that when you match the pieces, the image shows through the background, as in Figure 9.16. Also notice that the game uses all the game pieces you placed into the object movie clips.

Figure 9.16: The background image shows through when the player makes a match.