How To Make A Memory Game In Flash.

Making A Concentration Game In Flash 

                                 

Matching games-- or Memory games, as they're more commonly Known- have long been a favorite for passing the time or testing one's brain power. Thanks to Flash, you can take time-honored Memory game and turn it into an animated gadget for your desktop or web site. Noble featutes of this application include a random layout of all the pieces on the board and completely cheat-proof game play to provide a genuine challenge.

Concentration 

Layers

Control Actions

Game Screens

Background

Getting Started 

If you want your result to match those of the finished project, follow the steps carefuly. If you want to customize the project and are familiar with Flash 4, feel free to change the settings to those that meet your needs.

1. Begin with a new Flash Movie, using these settings:

Frame rate:  12fps

Stage Dimensions:  320*320

Background color:  White

2. Create three layers, naming them (from top to bottom) Control Actions, Game Screens, and Background.

3. From the Flash 4 Magic CD, load Matching Game .fla as a Library.

4. In the Background layer, drag an instance of the Tiled Background symbol from the Vector Graphics folder of the Matching Game .fla Library onto the Stage and center it.

5. Look the Background layer now because you won't be dealing with it again, and save your file as Concentration .fla.

6. Insert an additional 29 blank frames to all three layers, creating a total of 30.

Creating The Smiles

The key to the Matching game is the individual game pieces- in this case, animated smiley faces. The game consists of 12 smileys: six different types with two copies of each. Before you set out the game board, you need to create the smiley symbols. The code contained in each symbol is the same, so after you complete the example in this section, you'll find that we've included the other five types already put together.

1. Press Control+L (PC) or Command+L (MAC) to open your movie's library.

You should have two Libraries open-now-the library from the Matching Game .fla file and the Library from your concentration .fla file.

2. In the game screens layer, drag the Chewy symbol from the Movie Clips\Smileys folder of the concentration .fla Library.

NOTE: YOU CANNOT EDIT A MOVIE CLIP THAT IS LOCATED IN A LIBRARY YOU'VE OPENED FROM AN EXTERNAL FLASH FILE. TO EDIT A MOVIE CLIP FROM A MOVIE YOU'VE OPENED AS A LIBRARY COPY THAT MOVIE CLIP TO YOUR NEW MOVIE.

3. Double-click the chewy Movie Clip icon in the concentration .fla Library to enter the symbol-editing made for the Movie Clip.

Notice that the Movie clip currently contains only one layer (chewy)- essentially a series of keyframes that make up this smiley's particular animation. You job is to add a set of keyframes and an ActionScript that will enable this symbol to be used in the game.

4. Add two layers above the Chewy label and label them control Actions and Button.

5. In keyframes 1 in the Button layer, drag an instance of the smiley Button from the Buttons folder onto the stage, and use the Object Inspector to position the Smiley Button Symbol at x: -33.1, y:- 33.2.

The instance should be centered precisely over the blue smiley face in the layer below.

6. Double-click the instance of Smiley Button you just created to open Instance Properties, and on the Actions tab, assign the ActionScript.

Only two smileys should be active at a time. A variable named Count tracks the number of game pieces the user has clicked. This script checks the value of Count and plays the animation only if its value is less than two.

On (Release)

       If (/:Count <2)
              Play
       End If 
End On

7. In the Button layer, insert a blank keyframe at frame 2 to remove the button from the Stage and prevent the user from clicking the same smiley twice in the same turn.

8. In the Control Actions layer, double-click the blank keyframe in frame 1 to open the Frame Properties dialog box, and, on the Actions tab, assign the ActionScript.

These actions stops play at the first frame, which is important so that the invisible button is always displayed in the default state. The Second action sets a variable named SmileyType within this movie clip. been clicked so the movie can determine whether the two currently active pieces match.

9. With the Control Actions layer still selected, insert a second blank keyframe at frame 2, double-click the frame to open the Frame Properties dialog box, and, on the Action tab, assign the ActionScript.

Set Variable: "/:Count" = /:Count + 1
Set Variable: "/:Smiley" & /:Count & "Type" = SmileyType
Set Variable: "/:Smiley" & /:Count & "Name" = GetProperty ("",_name)

NOTE: THE VARIABLE PORTIONS OF THE LAST TWO SET VARIABLE ACTIONS ARE EXPENSIVE. THROUGHOUT THIS PROJECT, YOU NEED TO PAY CLOSE ATTENTION TO WHETHER VALUES ARE LITERALS OR EXPRESSIONS: ACCURACY IS CRUCIAL TO RETAINING THE SCRIPT'S FUNCTIONALITY.

Here's Where things start to get a little tricky. first of all, the variable count is incremented by 1 to show that an additional smiley has just been clicked. Second, a variable is dynamically created to store the value of SmileyType for example, if Count currently equals 1 and SmileyType equals Chewy, the variable will be created as Smiley1Type = Chewy.

Last, a variable is created to store the name of the particular instance that was just clicked. Because symbols are reusable, you don't hardcode one instance name into this code-rather, you obtain it on the fly by using the GetProperty action. If Count is 1 and the instance name is Smiley8, the third line of code will evaluate as /:Smiley1Name = Smiley8.

10. Insert blank keyframe at frames 18,19, and 20; double-click keyframe 18 to open the Frame Properties dialog box; and, on the Actions tab, assign the ActionScript.

DoneCount makes sure that both animations are completed before the matching process takes place. It is incremented by 1 at frame 18 in Chewy (the end of this particular animation), but because the animation lengths vary from smiley to smiley, you'll see that DoneCount is set at whatever keyframe contains the final animated frame for each example.

Set Variable: "/:DoneCount" = /:DoneCount" = /:DoneCount +1

11. Double-click keyframe 19 to open the Frame Properties dialog box, and , on the Action tab, assign the ActionScript.

In a nutshell, this script checks to see whether DoneCount equals 2, indicating that the user has clicked two smileys. If DoneCount does equal 2 Flash hides the two clicked smileys when they match and resets them for the next turn when they don't match. If DoneCount doesn't equal 2, the script plays to the next frame.

A variable named Pairs is used to determine whether all the smileys have been matched. If a match is detected, pairs is decremented by one. When Pairs equals 0, the main Timeline is instructed to go to another keyframe that prompts the user to play again.

Stop
If (/:DoneCount < 2)
      Play
Else
       Set Variable: "/:DoneCount" = 0
       If (/:Count = 2)
             If (/:Smiley1Type eq/:Smiley2Type)
                   Set Property ("/" & /:Smiley1Name, Visibility) = False
                   Set Property ("/" & /:Smiley2Name, Visibility) = False
                   Set Variable: "/:Pairs" = /:Paris - 1
                   If (/:Paris = 0)
                        Begin Tell Target ("..")
                              Go to and Stop ("Try Again")
                        End Tell Target
                   End If
             Else 
                   Begin Tell Target ("/" & /:Smiley1Name)
                         Go to and Stop (1)
                   End Tell Target
                   Begin Tell Target ("/" & /:Smiley2Name)
                         Go to and Stop (1)
                   End Tell Target
             End If
             Set Variable: "/:Count" = 0
     End If
End If

12. Double-click keyframe 20 to open the Frame Properties dialog box, and, on the Action tab, assign the ActionScript.

This action cause the playhead to cycle between keyframes 19 and 20 while the movie waits for DoneCount to reach 2.

13. Exit the symbol-editing mode for the Chewy Movie Clip and go back to the main Timeline.

Populating The Game Screens

In this section, you lay out the symbols that constitute the visible part of the movie. Before proceeding to the Control Actions layer, where you'll add the remaining scripts.

1. In the Game Screens layer, insert blank keyframes at frames 11 and 21.

2. In the blank keyframes on frame 1, drag an instance of the Start Button symbol from the Buttons folder of MatchingGame.fla onto the Stage and center it.

3. Double-click the instance of the Start Button to open the Instance Properties dialog box, and, on the Actions tab, assign the ActionScript.

The Go to command used here refers to a frame label that will be added to the Control Actions layer in later steps.

4. Move the playhead to keyframe 11, and, from your movie's own Library, drag two instance of the Chewy Movie Clip symbol onto the Stage.

The placement of these symbols is unimportant because they'll be randomly repositioned by an ActionScript routine when the game is played.

5. From the Movie Clips\Smileys folder in MatchingGame.fla, drag two instances each of Laughy, Nutty, Scary, Sneezy, and Wacky.

6. Double-click each of the 12 smiley symbols, and give each one an instance name, using the names Smiley1 through Smiley12.

These instance names enable Tell Target and Set Property control over these Movie Clips by other parts of the game.

7. In the Game Screens layer, double-click the blank keyframe 21 to ope its Frame Properties dialog box, and, on the Actions tab, assign the Actionscript.

8. In the Game Screens layer, drag an instance of the Try Again graphic symbol from the Vector Graphics folder and an instance of the Try Again Button symbol from the Buttons folder in the MatchingGame.fla Library onto the Stage.

9. Use the Align feature to align Try Again to the bottom center of the page, and then use the Object Inspector to position the Try Again Button at x: 10.4, y: 25.1.

10. Double-Click the Try Again Button instance to open Instance Properties, and , on the Actions tab, assign the ActionScript.

Once again, Game is a frame label that will appear in the Control Actions layer.

On (Release)
       Go to and Stop ("Game")
End On

Adding The Finishing Touches 

1. In the Control Actions layer, insert blank keyframes at frames 11 and 21 and, begining with keyframe 1, label the three keyframes Initialize, Game, and Try Again.

2. Double-Click keyframe 1 to open its Frame Properties dialog box, and , on the Actions tab, assign the ActionScript.

These actions control playback and initialize all the major game variables.

Stop
Set Variable: "Count" = 0
Set Variable: "DoneCount" = 0
Set Variable: "Pairs" = 0
Set Variable: "Smiley1Type" = ""
Set Variable: "Smiley2Type" = ""
Set Variable: "Smiley1Name" = ""
Set Variable: "Smiley2Name" = ""
FD Command ("AllowScale", "False")

3. Double-click keyframe 11 to open its Frame Properties dialog box, and, on the Actions tab, assign the ActionScript.

The Game Script does a number of things. First, it creates an array (or list) of variables, one for each smiley. Each variable in the array is used to indicate whether that smiley has been assigned a place on the game board. The initial value for each variable its False, denoting that none of them have been positioned.

The remainder of the script cycles through each grid position in turn and selects a random smiley to go to that position. Before moving the smiley, however, Flash checks the corresponding array variable to see if that smiley has already been taken. If it has, the script repeats the selection process until a "free" smiley is chosen.

Stop 
Set Variable: "SmileyCounter" = 0 
Loop While (SmileyCounter < 12)
      Set Variable: "SmileyCounter" = SmileyCounter + 1
      Set Variable: "Smiley" & SmileyCounter =False
End Loop
Set Variable: "Smiley Counter" = 0
Set Variable: "Row" = 0
Set Variable: "Column" = 0
Loop While (SmileyCounter < 12)
      Set Variable: "SmileyCounter" = SmileyCounter +1
      If [(Smiley Counter >=1) and (SmileyCounter <=4)]
           Set Variable: "Row" = 1
           Set Variable: "Column" = SmileyCounter
      Else If ((SmileyCounter >= 5) and (SmileyCounter <= 8))
            Set Variable: "Row" = 2
            Set Variable: "Column" = SmileyCounter - 4  

Although  the Smileys are being repositioned dynamically each time the game is played, all this work takes place in one frame so the movement is never visible to the player.

Else If ((SmileyCounter >= 9) and (SmileyCounter <=12))
        Set Variable: "Row" = 3
        Set Variable: "Column" = SmileyCounter - 8
End If 
Set Variable: "Done" = False
Loop While (Done = False)
      Set Variable: "CurrentSmileys" = Random (12) + 1
      If (Eval("Smiley" & CurrentSmiley) = False)
           Set Property ("Smiley" & CurrentSmiley, X Position) = ((Column - 1) * 80) + 40
           Set Property ("Smiley" & CurrentSmiley, Y Position) = ((Row - 1) * 80) + 40
           Set Variable: "Done" = True
           Set Variable: "Smiley" & CurrentSmiley = True
     Else
            Set Variable: "Done" = False
     End If
  End Loop
End Loop 

4. Double-Click Keyframe 21 to open its Frame Properties dialog box, and, on the Actions tab, assign the ActionScript.

The game is now complete and ready to Play!

Modifications

Because the Matching Game (and most other examples in this book, for that matter) is built strictly with symbols, you can easily Substitute new graphics and animations and create a range of customized versions. When you're familiar with the scripting involved, you can even extend the size of the game board to increase the difficulty of game play. By creating a strong Library of symbols whenever you author a Flash movie, you can save on file size, complexity, and development time.

Writer: Mr. Krishan Kumar Saini 

Today we have learnt Basics about How to make a Memory game in Flash. Hope this lesson is helpful for you.