void star games

* play * code * learn *


Flash Tutorials

puce Flash Memory Game Tutorial 1 Next

Preparation. You'll need a collection of images that you want to use for your memory game. It's better to choose a theme for it. They need to be resized and cropped to the same dimensions. It's a good idea to have more images than you need, that way the game can be replayed without being too boring.

In addition, you need an image for the back of the cards, a frame for the front of the card while it's being clicked on, one for the front of the card while you're looking for a match (let's call it active), and for the front of the card when a match has been found (let's call it solved). The frame for the active card while you're looking for a match should be the one that catches the eye the best. Note that if the frames have some sort of border, then the content images (what the cards will display) need to fit on the frames in the space inside the border.

Here's an example of the four card frames:

Project. Create an Actionscript 3 project. Make the size of the stage big enough to hold the table of tiles with the dimensions based on the size of your tiles and the count of cells. For example, if my tiles are of size 100 and I want a table of 4 rows by 5 columns, I will make the stage of size 520x450. I am leaving more space beside the tiles vertically to add some replay buttons at the end eventually.

Details. In the Classic workspace, the stage size and color can be set in the Properties area to the left. Look for one of the Edit buttons.

Import images. You'll have to import your images one by one into your project and set their properties so that you can use them in the code. For this part you can select several files to import to the library in a single action, but I don't know any shortcut to turning them into classes that can be used other than one by one. From the File menu, go to Import and then to Library, then choose one or several of the images. Then open the library (small button to the left of the Properties area), right-click on the image you just imported, and select Properties. In the dialog that opens, check "Export for Actionscript" and rename the class as something you can remember.

For example, I will choose the name all the classes with the name of the file to which I add "_bmp", so that tile_back.png becomes tile_back_bmp. A warning about the class definition not being found will come up. Just click ok.

Class. We'll need two classes to implement this application: one to handle individual tiles, and another one handle the whole table of them.

Start by creating a new Actionscript file and save it under the name Tile.as. This will also have to be the name of the class. Start the file with
package {
and end it with the matching }. Everything in your file will be in between. We will need to import some Flash classes that we'll be using. Just copy and paste the following in the file:
import flash.display.BitmapData;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.display.Stage;
import flash.utils.Timer;
import flash.geom.Matrix;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.system.System;
import Math;

Below these, add the following lines defining the class tile:
public class Tile {
}

Next, we'll need to declare some attributes in this class. Each individual image that can be used by this tile will be stored in an individual sprite. We need 5 of these for the four tiles plus the image to be displayed on the front. Let's declare them as variables or attributes in the class like this:
var back_sprite;

Underneath, let's add the following function that will take a parameter of type BitmapData, create a sprite out of it, and then return it. This function assumes that the size of the both the image that was imported and of the sprite to be displayed are sprite_size x sprite_size. We need this parameter because the frame sprites have different sizes. If the tiles are not square, you need to add another parameter. If the bitmap has a different size than the tile, you need to use a matrix to adjust the size of the sprite.
public function make_sprite(bmp_name, sprite_size) {
  var sprite = new Sprite();
  sprite.graphics.beginBitmapFill(bmp_name);
  sprite.graphics.drawRect(0, 0, sprite_size, sprite_size);
  sprite.graphics.endFill();
  return sprite;
}

Constructor. Next we'll write a function that defines how objects of this class are initialized. First, declare another variable in the class called parent. This will be a reference to the stage where all the objects will be displayed. Add the following function just above the first one:
public function Tile(the_stage) {
  var bmp;
  parent=the_stage;
  bmp=new tile_back_bmp(100,100);
  back_sprite=make_sprite(bmp,100);
  parent.addChild(back_sprite);
}

and replace "tile_back_bmp" with the class name that you gave to one of the images that you imported before.

Testing the class. Now we have enough information in this class to see if it works correctly and if we can display something on the stage. Go back to the .fla file and open the Actions dialog. Make sure the frame 1 is selected. Add the following lines that are importing the class Tile from the file and creating an object of this class. The expression "this.stage" identifies the display area or stage whose properties we've set in the beginning.
import Tile;
var test = new Tile(this.stage);

To run the app, hit Ctrl-Enter. If there are no errors, you should see one tile in the top left corner of the stage.

Next: completing the Tile class.