A Very Flash Matching Game

(Make sure sound is turned on while doing the above puzzle).

The above was made by following an excellent tutorial on how to make a matching / puzzle game located at:

http://edutechwiki.unige.ch/en/Flash_drag_and_drop_tutorial

It goes through step by step how to make a matching game in Flash, using Actionscript 3.0.

Also supplied are examples of the finished item each time, as well as the facility to download the source files for the tutorial.

At the heart of this game is the Flash "Dictionary Class" which is a means of making an array (or matrix) of as many related pairs of items as we need.

If you want to find out more about the "Dictionary Class" then click the following link: Information about the Dictionary Class

The nice thing about the Dictionary Class is it makes it very easy to make another game, simply by changing the dictionary entries and source pictures.
For example, here is a similar game about Australian football team mascots:

I thought that Adobe Fireworks was supposed to be Flash's "best friend", but this is not always the case. Eg. when I obtained an image from the internet, resized it in Fireworks to be 80 pixels tall, and saved it as a .png file type; there were problems. It could be imported, made to move around, but refused to match up with the text box I had set for it in the "Dictionary" part of the Actionscript code. The only way I could find to overcome this was to save the file as a .GIF type after resizing it. GIF files import to Flash, convert to Movie Clips, and function 100% ok in the matching game. (Note that .JPG files work fine as well).

So to bring images into Flash when building the Matching Game, the steps are:

1) Find an image on the internet and save it to our PC.

2) Load the image into Photoshop or Fireworks or GIMP, and resize it proportionally to be between 80 and 100 bytes tall. Save the image as a .GIF file type.

3) In Flash (with the matching game loaded in), do File > Import > Import to Stage then browse navigate to open and bring in the GIF file.

4) In Flash right click the selected image, and do Modify > Convert to Symbol
and make it a Movie Clip type, with the registration point as usual top left hand corner, and give it a meaningful name.

5) Very important to now type in an instance name, in the bottom left hand corner of the Properties panel, straight under where it says "Movie Clip". This instance name has to exactly match the name that is used in step 6.

6) With frame 1 selected on the timeline, press F9 to access the "Actions" (or do Window > Actions) and edit the top section of code to map the instance name from step 5, to the appropriate dynamic text box name. This is basically adding the required entry to the "Dictionary" we are using to drive this game.


These types of matching games would be great for Language teachers to use for vocabulary practice.

Maths teachers could make Geometry puzzle games about Triangle or Quadrilateral types, or Angle types, or Perpendicular versus Parallel and so on.

Science teachers could make puzzles about matching Animals to their family type, or rocks to igneous, sedimentary, etc types, and so on.

If you would like to download the source .FLA files for the two games used in this Blog Post, then click the link below:

Click here to download a .RAR file of resources.

Stay tuned for an upcoming "Part 2" post about Flash matching.
This will involve matching pairs of pictures to each other, rather than a picture to a text box.

Enjoy,
Big Passy Wasabi