How to make a Quiz Game In Flash!

                                 

 Quiz Game

Layers 

Action Script Library

Retry Screen

Level Screens

Buttons

Indicators

Questions 

Background

                                        

Getting Started 

Setting up a Flash file is probably old hat for you know. If you want your result to match those of the finished project, follow the steps carefully. if you want your results to match those of the finished project, follow the steps carefully. 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, open Quiz .fla (on the Flash 4 Magic CD) as a Library, and use these settings for the stage :

Frame rate:  24 fps

Stage dimensions:  400*300

Background color:  Black

        

2. Set up seven layers, naming them (from top to bottom) Action Script Library, Retry Screen, Level Screens, Buttons, Indicators, Questions, and Background.

3. Select the Background layer, drag an instance of the Background graphic symbol from the Vector Graphics folder onto the Stage, center it, and lock the layer.

You're looking the layer because you won't be dealing with it again.

Setting Up the Questions And Answers

In this section, you instance the question Fields graphic symbol and set up a text field for question. Then you set up the text fields for the three multiple-choice answers.

1. Select the Question layer, drag an instance of the Question Fields graphic symbol from the Vector Graphic's folder onto the stage, select the instance, and use the object Inspector (window> Inspector> Object) to set its coordinates to x: 127.0, y: 96.

2. Select the Questions Field instance, enter its symbol editing mode. Select the first (top) text field, open the Text Field Properties dialog box, and type Question in the Variable field.

Note: To enter the symbol-editing mode, right-click (windows) or Control-click (Macintosh) on the Question fields instance, and choose Edit from the pop-up menu.

3. Repeat step 2 with the remaining three fields, naming them (from top and bottom) AnswerA, AnswerB, and AnswerC.

4. Exit symbol-editing mode and return to Scene 1.

Indicating The Progress 

The Indicators Layer is your next focus. It contains a field that displays the number of points the player has accumulated. You also work with two Movie Clip symbols. To the left is the Points indicator. Each time a question displays, the player starts off with 1000 points, and this value decrements over time until it reaches 0 and the player fails one more question.

The final indicator object appears as a small white dot below the Score field. (A small white dot denotes a graphic or Movie clip symbol with a blank first frame.) This particular symbol is a visual indicator that displays a series of red lights, with the number of lights corresponding to the number of question answered in the current level.

1. Select the Indicators layer, drag an instance of the Indicators graphic symbol from the Vector Graphics folder onto the Stage, and use the Object Inspector to set its coordinates to x: 52, y: 57.

2. Use Edit in Place to edit the Indicators symbol, open the Text Field Properties dialog box of the text field near the word score and assign the variable Name Score.

3.  While still in the symbol-editing mode fr the Indicators symbol, select the Points Indicator symbol on left of the Stage, open its Instance Properties dialog box, and name the instance Points, enabling the other symbols to reset the points count later.

4. To make the Question Indicators instance a target, open its Instance Properties dialog box and name the instance Question Indicators.

 

5. Exit symbol-editing mode and return to Scene 1.

Buttons It-As Easy As A,B,C

You now have everything you need to display the questions, answers, scores, and progress. The next important ingredient is a method for accepting user input. This project uses buttons for accepting the input.

1. In the Buttons layer, drag an instance of the A Button from the Buttons folder onto the stage. and use the Object Inspector to position te instance at x: 57.2, y: 153.3.

2. Double-click the instance of the A Button to open the Instance properties dialog box, on the Actions tab, assign the Action Script. 

On (Release)

      Set Variable: "/: Current Answer" + "A"
      Call ("?Library/: Answer Questions")
End On 

Note : You can select the Action Script, Copy it, paste it onto the Actions tabs for the other two buttons, and then change the value for Current Answer.

This Script sets the value of Current Answer to A and then calls the Answer Question function contained in the Action Script Library symbol. Answer Question handles the comparison between Current Answer and the correct answer  for each question, and triggers a series of events accordingly.

To make things interesting, you must nest each answer button inside a Movie clip symbol so you can make each one visible or invisible, depending on whether the player chooses the correct answer. After the player answers each question, only the correct answer is left visible and the remaining two are hidden.

3. Select the instance of the A button and press F8 to convert to a Movie Clip symbol.

4. Open the Instance Properties dialog box for A, and name the instance A.

Naming the instance enables you to manipulate. The visibility properties of the symbol with the set property action

5. In the Buttons layer, drag an instance of the B button from the Buttons folder onto the stage, and use the Object Inspector to position it at x: 57.2, y: 196.3.

6. Assign the same script as in step 2 to the B Button and replace the "A" literal with the "B" literal.

7. Select the instance of the B button and press F8 to convert it to Movie Clip symbol.

8. Open the Instance Properties dialog box for B, and name the instance B.

9. In the Buttons layer, drag an instance of the C. Buttons from the Buttons folder onto the Stage, and use the Object Inspector to position the C Button instance at x: 56.2, y: 238.3.

10. Assign the same script as in step 2 to the C Button and replace the "A" literal with the "C" literal. 

11. Select the instance of the C button and press F8 to convert it to a Movie Clip symbol.

12. Open the Instance Properties dialog box for C, and name the instance C.  

On (Release)

       Set Variable:"/:Current Answer" = "C"
       Call ("/Library/:Answer Question")
End On 

Continuing On With Buttons 

Before moving on, you need to add the Continue button. After answering a question and viewing the correct response, players must cick Continue to progress to the next question.

1. Drag an instance of Continue from the Movie clips folder (not the Buttons folder) onto the Stage, open the Object Inspector, position the instance at x: 310, y: 280.

2. Open the Instance Properties dialog box and name the instance Continue.

Similar to A,B and C,  Continue is a button that has been nested within a Movie Clip symbol so you can set its visibility property.

3. Select the Continue instance and, in symbol-editing mode, select the Continue Button instance, open its instance Properties dialog box, and, on the Actions tab, assign the Action Script.

The Continue Button Script perform a number of tasks. First, it sets the visibility of the parent Movie Clip to False, making Continue invisible. The script then promots for the nex qustion to be displayed and checks to see whether the current level has been completed, and completed correctly. The script plays Level Screens or Retry Screen. depending on the outcome of the current level.

4. Exit symbol-editing mode and return to Scene 1. 

On(Release)

     Set Property ("", Visibility)=False
     Call ("/Library/:DisplayQuestion")
     If (/:CurrentCount = 5)
           If (/:CorrectCount = 4)
                 Begin Tell Target )"/LevelScreens")
                        Play
                 End Tell Target 
           Else
                  Begin Tell Target ("/RetryScreen")
                         Play
                  End Tell Target
           End If
      End If 
End On

Adding The Level And Retry Screens

The Quiz game has the capacity for three different levels, each containing four questions. The Quiz is set to progress to the next level only if the Player gets all four question correct in the current level. When the player makes an error, a Retry screen display and the level does not progress until all the question and answered correctly. To control the flow of the game, you need to create a set of Level Screens. The three Level Screens set the current level and give the Player information about the preceding question.

1. In the Level Screens layer, drag an instance of Level 1 start from the Buttons folder onto the Stage and center it.

2. Double-click Level 1 Start to open the Instance Properties dialog box, and, on the Actions tab, assign the Action Script.

Each of the Level buttons will share a similar script. setting the current level and count of correct answer and then resetting the current question to 1. The functions Level 1 and Display Question are also called here, which in turn reset all the question-and-answer variables and then display the current question.

On (Release)

      Set Variable: "/:CurrentLevel" = 1
      Set Variable: "/:CurrentCount" = 0
      Set Variable: "/:CurrentQuestion" = 1
      Call("/Library/:Level1")
      Call ("/Library/:DisplayQuestion")
      Play
End On

Note : You can select the ActionScript, Copy it, Paste it onto the Actions tabs for the other two levels, and then make the necessary changes.

3. Select the Level 1 Start instance and press F8, converting the instance to a Movie Clip symbol names LevelScreens.

4. Open the Instance Properties dialog box and name the instance Levelscreens.

5. Enter the symbol-editing mode of the Level Screens symbol; name the existing layer Level Screens; add one upper layer, naming it Control Actions; and add 39 frames to both layers, making a total of 40 frames on each layer.

6. In the Level Screens layer, insert blank Keyframes at positions 2,11,12,21,22,31, and 32.

7. Move the playhead to frame 11, drag an instance of Level 2 start from the Buttons folder onto the Stage, and center it.

8. Select the Level 2 Start instance, open its Instance Properties dialog box, and, on the Actions tab, assign the ActionScript.

9. Move the playhead to frames 21, drag an instance of Level 3 Start from the Buttons folder onto the Stage, and center it.

10. Select the Level 3 instance, open its Instance Properties dialog box, and, on the Actions tab, assign the actionScript.

Notice that a similar script was used each time----only the level number was changed.

On(Release)

      Set Variable: "/:CurrentLevel" = 3 
      Set Variable: "/:CurrentCont" = 0 
      Set Variable: "/:CurrentQuestion" = 1
      Call ("/Library/:Level3")
      Call ("/Library/:DisplayQuestion")
      Play
End On 

The Win Button

Sometimes you win, sometimes you lose. In this short section, you participate in a winning activity: Creating the instance of the Win Button symbol and assigning ActionScript to it.

1. Move the playhead to frame 31, drag an instance of Win from the Buttons folder onto the Stage, and center it.

Win is different from the other buttons in that it shows only after all three levels are completed. The Win Button's actions call the Initialize function stored in the Action Script Library symbol and then set the current Level Screens frames to Level1, there-by restarting the game.

2. Open the Instance Properties dialog box of the Win button, and, on the Action tab, assign the ActionScript.

On (Release) 

      Call ("/Library/:Initialize")
      Go to and Stop ("Level1")
End On

Setting Up the Control Actions Layer

The Control Actions layer simply controls the flow of the Timeline. You need to insert blank keyframes on the layer, label them, and assign the Action Script.

1. In the Control Actions layer, insert blank keyframes at frames 10,11,20,21,30, and 31.

2. Open the Frame Properties dialog box for keyframes 1,10,11,20,21,30, and 31, on each Actions tab, assign the ActionScript.

3. In the Control Actions layer, add the following labels: 

     

    Keyframe 1       Level1

    Keyframe 11     Level2

    Keyframe 21     Level3

    Keyframe 31     Win

4. Exit symbol-editing mode and return to Scene 1.

Setting Up the Retry Screen 

Now it's time to set up the Retry Screen that displays when the player makes an error. You need to create a new Moviw Clip and set up two layers in it before you can create an instance of the Retry Button, insert keyframes, and assign the ActionScript. When it's all finished, you need to place an instance of the Retry Movie Clip in Scene 1.

1. In the Retry Screen layer, ensure that nothing on the Stage is selected and then create a new Movie Clip symbol, naming it Retry Screen.

Because you're creating a new empty symbol, flash automatically switchers to symbol-editing mode.

2. In the symbol-editing mode of the Retry Screen Movie Clip, rename the existing empty layer Retry Screen, add a new layer above it, name the new layer Control Actions, and add an extra nine frames to both layers, making a total of 10 frames.

3. In the Retry Screen layer, insert blank keyframes at position 2 and 3. Move the playhead to keyframe 2, drag an instance of the Retry button from the Buttons folder onto the Stage, and center it.

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

This Script is similar to that of Level Screens, except it doesn't alter the value of the current level, which is appropriate because the player has to repeat the same set of question.

5. In the Control Actions layer, insertadditional blank keyframes at positions 2 and 10, and label keyframe 1 Retry.

6. Double-click keyframe 1 to open the Frame Properties dialog box, an, on the Actions tab, assign te ActionScript.

7. Double-Click keyframe 2 to open and the Frame properties dialog box, and, on the Actions tab, assign the ActionScript.

8. Double-Click keyframe 10 to open the Frame properties dialog box, and, on the Action tab, assign the ActionScript.

9. Exit symbol-editing mode and return to Scene 1.

10 Drag an instance of Retry Screen from yyour movie's Library onto the stage, double-click the Retry Screen instance Properties dialog box, name the instance RetryScreen, and use the Object inspector to Position the instance at x: 200.0, y: 150.0.

Building the ActionScript Library

The final step is to build the ActionScript Functions to drive the rest of the movie. The main functions are designed to display a question, process an answer, or set the question and answer variables for the current level.

1. In the ActionScript Library, ensure that no objects are selected on the stage, and create a new Movie Clip symbol, naming it ActionScript Library.

2. In the Symbol-editing mode of the ActionScript Library Movie Clip, name the existing layer Control Actions, and insert an additional 59 Frames, creating a total of 60.

3. Insert blank keyframes at positions 11,21,31,41, and 51, and then, beginning with keyframe 1, work your way over to the right, assigning these frame labels:

Keyframe 1         Initialize

Keyframe 11       DisplayQuestion

Keyframe 21       AnswerQuestion

Keyframe 31       Level1

Keyframe 41       Level2

Keyframe 51       Level3

4. Double-click keyframe 1 (labeled Initialize) to open its Frame properties dialog box, and, on the Actions tab, assign the ActionScript.

To begin the game, Initialize sets a few important variables and ensures that the Continue button is not visible. It also resets the QuestionIndicators symbol and calls the Level1 function, which sets the question-and-answer variables for the current level.

Stop

FS Command ("AllowScale",False)

Set Property ("/Continue", Visibility) = False

Set Variable: "/:CurrentLevel" = 1
Set Variable: "/:CurrentQuestion" = 1
Set Variable: "/:Current Answer" = ""
Begin Tell Target ("/QuestionIndicators")
      Go to and stop ("Question1")
End Tell Target
Call ("Level1")

5. Double-click keyframe 11 (labeled Displayquestion) to open its Frame Properties dialog box, an, on the Action tab,assign the ActionScript

DisplayQuestion makes each of the answer buttons visible and then sets the question-and-answer fields to display the current question. It also resets the point counter and progress the question indicator lights.

If (/:CurrentQuestion <= 4)
        Set Property ("/'A", Visibility) = True
        Set Property ("/'B", Visibility) = True
        Set Property ("/'C", Visibility) = True
        Begin Tell Target ("/Points")
               Go to and Play (1)
        End Tell Target
        Begin Tell Target ("/QuestionIndicators")
               Go to and Stop ("Question" & /:CurrentQuestion) 
        End Tell Target
        Set Variable: "/:Question" = Eval("Q" & /:CurrentQuestion & "_Question")
        Set Variable: "/:QuestionA" = Eval("Q" & /:CurrentQuestion & "_A")
        Set Variable: "/:QuestionB" = Eval("Q" & /:CurrentQuestion & "_B")
        Set Variable: "/:QuestionC" = Eval("Q" & /:CurrentQuestion & "_C")
End If

Writer: Mr. Krishan Kumar Saini 

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