Home
Flash & Swish
Flash Tutorials
Simon Game
Level: Experienced Software:
Flash
Requirements
- Flash MX or higher.
Preview
1. Start by creating a 300x300 document in Flash.
2. Select the Oval Tool.
3. Draw a circle in the middle of the stage that is nearly the size of the stage.
Hint: Hold Shift to create a perfect circle.
4. Use the Line Tool to split the circle into four quadrants.
Hint: Hold Shift to create straight lines.
5. Select the quadrants of the circle with the Selection Tool and set their colors to four different colors.
6. You should have something that looks like the following.
7. Select the Selection Tool and click on the first quadrant.
8. Press F8.
9. Name it Quadrant 1 and set the Type to Movie Clip and press OK.
10. With Quadrant 1 selected, in the Property Inspector set the Instance Name to "m1"
11. Repeat steps 7-10 for the second, third and fourth quadrant. (Change Quadrant 1 to Quadrant 2, Quadrant 3 and Quadrant 4, and change "m1" to "m2", "m3" and "m4" respectively.)
12. Hold down Shift and select all four quadrants.
13. Press Ctrl+Shift+D
14. Select the Rectangle Tool and draw a rectangle in the bottom right section of the Stage.
15. Select the Text Tool.
16. On top of the rectangle you just drew, click and type the word "Start".
17. Select the Selection Tool and draw a box around the rectangle and "Start" text to select them both.
18. Press F8.
19. Set the Name to "Start Button" and set the Type to Movie Clip and press OK.
20. Click on the button you just created and in the Property Inspector type "mStart" for the Instance name.
21. Select the Text Tool and in the Property Inspector set the Text type to Dynamic Text.
22. In the Property Inspector make sure Selectable is not selected and set the Text Align to Center.
23. Draw a text box below the Simon game.
24. Select the Selection Tool and click on the text box you just drew. In the property Inspector set the instance name to "tMainText".
25. You should have something that looks like the following.
26. Click on the first frame in the Timeline and press F9 to open the Actions Panel.
27. Insert the following ActionScript code into the Actions Panel
|
var dim = 50; //Alpha of pieces when clicked
aPieces = new Array(); //Array of pieces aMoveList = new Array(); //Array of moves made var ID; var count = 0; //Number of moves made var first; var soSound0 = new Sound(this); //Creates a new Sound soSound0.attachSound("simonSound1.mp3"); //Attaches simonSound1.mp3 to that sound var soSound1 = new Sound(this); soSound1.attachSound("simonSound2.mp3"); var soSound2 = new Sound(this); soSound2.attachSound("simonSound3.mp3"); var soSound3 = new Sound(this); soSound3.attachSound("simonSound4.mp3"); var step = 0; for (var i = 1; i < 5; i++) //Adds the four movie clip quadrants to aPieces { aPieces.push(this["m" + i]); this["m" + i].value = i - 1; } function buildPieces() { for (var i = 0; i < aPieces.length; i++) { aPieces[i].onPress = function() //When the piece is pressed it dims { this._alpha = dim; }; aPieces[i].onRollOut = function() //When you roll your mouse off of the piece it undims { this._alpha = 100; }; aPieces[i].onRelease = function() //When you release your mouse { this._alpha = 100; //Set transparency to 100% _root["soSound" + this.value].start(0); //Play the piece sound if (aMoveList[step] != this.value) //If the piece you pressed does not equal the piece you were supposed to press { failure(); //failure method return; } step++; //Add one to the amount of steps to do if (step == aMoveList.length) { nextLevel(); //Go to the next level } }; } } function failure() { tMainText.text = "Game Over."; killPieces(); mStart._alpha = 100; //Set start button transparency back to 100% aMoveList = new Array(); //Delete array of moves mStart.onRelease = function() //Recreate the start button { startGame(); } } function killPieces() { for (var i = 0; i < aPieces.length; i++) //Deletes all the functions of the pieces so you cant interact with them { delete aPieces[i].onPress; delete aPieces[i].onRollOut; delete aPieces[i].onRelease; } } function lightUp(num) { clearInterval(ID); count--; if (count == 0) //If no more pieces are left to light up, wait for user to input sequence { userTurn(); return; } if (count == 1) //If the last piece in the list has just been lit up, pick a random light to light up { num = Math.floor(Math.random() * 4); } else //Set num to the next light to light up { num = aMoveList[aMoveList.length + 1 - count]; } light(num); //Light up the light } function userTurn() { step = 0; //Sets the step to 0 buildPieces(); //Lets user interact with pieces } function light(num) { dimIt(num); //dims the num piece ID = setInterval(pause, 500, num); //Light up the piece for half of a second } function pause(num) { clearInterval(ID); unDim(num); ID = setInterval(lightUp, 50, num); //Creates a 50ms pause between lighting up pieces } function dimIt(num) { if (count == 1) { aMoveList.push(num); } _root["soSound" + num].start(0); //Plays the sound when lighting a piece up aPieces[num]._alpha = 50; } function unDim(num) { aPieces[num]._alpha = 100; } function startGame() { first = Math.floor(Math.random() * 4) //Picks first piece tMainText.text = ""; //Sets the text field to display nothing for (var i = 0; i < aPieces.length; i++) { aPieces[i]._alpha = 100; //Sets all the pieces to 100% transparency } mStart._alpha = 0; //Sets the start button to invisible delete mStart.onRelease; //Deletes the start button onRelease function buildPieces(); count = 1; light(first); //Lights first piece } function nextLevel() { killPieces(); //Disables interacting with pieces for (var i = 0; i < aPieces.length; i++) { aPieces[i]._alpha = 100; //Sets all pieces to 100% transparency } count = aMoveList.length + 1; var timer = getTimer(); this.onEnterFrame = function() { if (timer < getTimer() - 1000) //Wait 1 second before starting sequence display after input { delete this.onEnterFrame; light(first); } }; } mStart.onRelease = function() { startGame(); }; |
28. Download the sounds at the end of this tutorial and save them somewhere you will remember.
29. In Flash, press Ctrl+R and select all of the sounds to import and press Open.
30. Press Ctrl+L to open the library.
31. Right click on the first sound and select Linkage.
32. In the Linkage Properties Box select Export for ActionScript. The Identifier should automatically fill with "simonSound1.mp3" if not, type that in.
33. Repeat steps 31-32 for the rest of the sounds.
34. Congratulations, you may now test your movie.
Tutorial Files (Right click the link and choose save target as...)
More Flash & Swish: Most Popular Materials | Fresh Materials
| More Flash Tutorials at FlashPerfection.com