DMC Home : Use Development Aids :

Matching Game

With our matching game learning object, students match images to appropriate labels. It originally was used to create vocabulary building exercises for foreign language students or small children. Sample exercises created with it and instructions about how to customize it for your own use are below.

Examples

To play the sample games at right, follow these steps:

  1. Select an image on the left.
  2. A blue box will appear around the image. Select the name of the image on the right.
  3. If the name is correct, a pink box will appear under the name. Select another image and repeat step 2.
  4. If the name isn't correct, the blue box around the image will disappear. Select another word.

Customization Instructions

To customize our Macromedia Flash MX matching game for your own use, follow the steps below. If you are not yet familiar with the Flash MX interface, open Flash MX, select Tutorials from the Help menu, and select the Introduction to Flash MX tutorial.

1. Download a Template

We have created the following two Flash MX templates. Select one. A zipped file should appear on your desktop. Unzip the file if necessary:

  • Use match8.zip with eight portrait-oriented images.
  • Use match9.zip with nine landscape-oriented images.

2. Copy and Open the File

  1. Open Flash MX.
  2. From the File menu, select Open.
  3. Find and select the file you downloaded and unzipped (match8.fla or match9fla).
  4. From the File menu, select Save As.
  5. Enter a new name in the Name box. For best results, use only lowercase letters and numbers and no spaces or special characters. Your .swf and .html files will have the same name, and you will be less likely to experience problems uploading them to a Web server if you use Web friendly file names.
  6. Select Save.

3. Import new Images

  1. Prepare the images you want to use in the game in an image editing program such as Adobe Photoshop. For best results, each image should be:
    • JPEG format,
    • 130 x 192 pixels (if you are customizing the matchers8.fla file),
    • 150 x 113 pixels (if you are customizing the matchers9.fla file),
    • saved in the same folder as the file in step 2, and
    • named "image001.jpg," image002.jpg, and so on.
  2. From the File menu, select Import to Library.
  3. In the Library window, select each of the image files (hold down the Shift key at the same time to select multiple files), then select Open.
  4. Move the images (recommended, but not mandatory).
    1. If the Library window is not already open, select Library from the Windows menu.
    2. In the Library window, select each of the image files (hold down the Shift key at the same time to select multiple files), then drag them to the z - images folder.

4. Swap Images

  1. In the Library window, double-click the a - graphics folder to expand it.
  2. If the Properties window is not already open, select Properties from the Windows menu.
  3. If the Tools window is not already open, select Tools from the Windows menu.
  4. For each image file in the a - graphics folder:
    1. Double click it. It will appear in the Properties window.
    2. In the Tools window, select the black arrow tool (picture at right).
    3. Select the image file.
    4. In the Properties window, select Swap...
    5. A Swap Bitmap window will appear. Select the image file you want to appear instead of the image in the a - graphics folder.
    6. Select OK in the Swap Bitmap window.

5. Enter Vocabulary Words

  1. You may now close the Properties and Tools windows to free up screen space. Either select the box in the upper left corner of each window or if they are docked, drag the title of each window and then select the box in the upper left corner.
  2. If the Actions window is not already open, select Actions from the Windows menu.
  3. If the Timeline window is not already open, select Timeline from the Windows menu.
  4. Select Scene 1 next to the clap-board icon in the Timeline window. Rows for labels, scripts, instructions, labels again, and images will appear above in the Timeline window.
  5. Select the double-circle icon in the scripts row and "1" column in the Timeline window.
  6. Select the View Options menu icon in the upper right corner of the Actions window and drag to Normal Mode.
  7. In the left-hand text box under "WordList = new Array," type the vocabulary word associated with each image you replaced in step 4 over the name of each animal (if you are customizing the match8.fla file) or fruit (if you are customizing the match9.fla file) listed. The number in brackets should match the number in the image file name. To insert special characters (such as foreign language characters), first type these into Microsoft Word or another program where you can enter symbols, then copy and paste the word over the name of each animal or fruit. Do not use quotation marks.

6. Test and Publish the Game

  1. Select Test Movie from the Control menu.
  2. The matching game should appear in a new window. Your images should be on the left side and your vocabulary words on the right. For each image, follow these steps:
    1. Select the image.
    2. A blue box will appear around the image and the arrow will point to the vocabulary words. Select a vocabulary word.
    3. If the image and word match, the blue box should change to red and the box around the vocabulary word should change to pink. If they don't match, the blue box around the image will disappear.
  3. If any of the animal or fruit images still appear, repeat step 4. If one or more of the images does not match the correct vocabulary word, repeat step 5 and make sure the number in brackets matches the number in the image file name.
  4. If each image matches the correct vocabulary word, select Publish from the File menu.
  5. An HTML file will appear in the folder in which you saved your file in step 2. Upload the file to your Web server and link it to your Web site. Other Web users who have installed the Flash plugin should be able to play the game in a Web browser.

Last modified Tuesday, 19-Jun-2007 15:32:11 CDT