Thursday, 28 May 2009

Scary maze game

This Flash tutorial will teach you how to create a scary maze game in Flash. A scary maze game is basically a maze where an image and sound effect is played at the end of the game. This scares the players as they are expecting another level in the game, but instead receive a scare. An example of a scary maze game can be found at: www.maniacworld.com/maze_game.htm

The tutorial is split into three sections. The first section creates the instructions; the second section creates the maze and the final section adds the scary image and the sound effects to the game.

I have used a free stock image of a scary face which is available from: everystockphoto.com and have also used a screaming sound effect which is available from: sounddogs.com. Some knowledge of basic buttons and custom cursors are need for this tutorial.

UPDATE: Actionscript 3 version now available here.

Scary maze game

Step 1 – Instructions

Open a new Flash document with 400 width and 300 height. Change the background colour to #00CCFF.

On the timeline right click on the first frame and select Actions and add the following code:

Stop();
Mouse.show();

**Only add the Mouse.show() if you intend to use a custom cursor for your game.


Step 2

Select the text tool (T) and type your instructional message on the stage. I have typed the following message below using Myriad Pro Cond font type, but you can type whatever message or font type you wish.



**For the heading I have used a double knocked out text effect using different colours for each glow filter, which gives a blood like effect.


Step 3

Create a button on the stage with the message “play” like below:



For more information on buttons checkout the basic buttons tutorial. Now right click on your button and select Actions and add the following code:

on(release){
gotoAndStop(“Scene 2”, 1)
}

**This code will stops at frame 1 on the second scene when the button is released.


Step 4

Insert a new scene by selecting Window > Other Panels > Scene or (Shift + F2).
Click the black plus sign to add a new scene and make sure the new scene is below current scene.



On the timeline right click on the 1st frame, select Actions and add the following code:

Stop();


Step 5 – Create the maze

Take the rectangle tool (R) and create a maze pattern on the stage like below.
Firstly, you need to create a large rectangle that fills the whole area of the stage. Then you create smaller rectangles on top of large rectangle.
You then delete the smaller rectangles to leave the areas visible underneath the large rectangle.



Here are a few points to note:
• Addition messages on the stage will help the player understand how to play.
• Make the maze pattern increasingly narrow towards the ends of the maze.
• Towards the end of the maze remember to leave enough room for your cursor.
• Try to keep the pattern simple, as making it too complicated will take you longer to complete.
• Keep the colour of maze consistent.


Step 6

Choose the selection tool (V) and select the whole maze. Convert your maze into a symbol by pressing F8. Give your symbol an appropriate name, check button and click ok.

Now right click on your newly created button and select Actions. Add the following code:

on(rollOver){
gotoAndStop(“Scene 1”,1)
}

** This code returns the player to the first scene when the mouse touches the maze areas.


Step 7

On the timeline insert a new layer. Select the brush tool with an appropriate brush size and make one brush point at the end of maze. This is area where the player has to reach on the maze. Your stage should look something like below:



Select the brush point and convert it into a symbol by pressing F8. Give your symbol an appropriate name, check button and click ok.

Now right click on your button and select Actions. Add the following code:

on(rollOver){
gotoAndPlay(“Scene 3”,1)
}

** This code sends the player the next scene when the mouse touches the red area.


Step 8 – optional

In this step you create a custom cursor object. For more information checkout the custom cursor tutorial. I have created basic rectangular custom cursor, but you can create whatever kind of cursor you wish.


Step 9 - Scary image & sound effects

Insert a new scene by selecting Window > Other Panels > Scene or (Shift + F2).
Click the black plus sign to add a new scene and make sure the new scene is below scene 2.

On the timeline right click on the 1st frame, select Actions and add the following code:

Stop();


Step 10

Import your scary image and sound effect into the library by selecting File > Import > Import to library select your files and click ok.

On the timeline rename “Layer 1” to “Image” and insert a frame (F5) at frame 40. Drag your scary image onto the stage and make sure it lines up correctly within the stage boundaries.

Now insert a new layer on the timeline called “sounds” and drag your sound file from the library onto the stage. Your timeline should look something like below:




Step 11

On the timeline insert a new layer called “button” and drag it above the “sounds” layer. Insert a key frame (F6) at frame 40. Create a button on the stage with the message “play again?”

Right click on the button and select Actions and add the following code:

on(release){
gotoAndStop(“Scene 1”,1)
}

**This code returns the player to the instructions pages when the button is clicked.


Step 12

Insert a new layer called “actions” and drag it above the “buttons” layer. Insert a key frame (F6) at frame 40. Right click on the 40 frame, select Actions and add the following code:

Stop();
Mouse.show();

**Only add the Mouse.show() if you intend to use a custom cursor.

Your timeline should look like below:




Step 13

Test the game Ctrl + Enter.



You should now have a scary maze game. Feel free to contact me for any questions or comments and remember to subscribe. Why not take a look at the magic 8 ball tutorial ?

30 comments:

sylwek2008igormix 29 May 2009 at 12:17  

good idea for a game, simple and efficient

iliketo 30 May 2009 at 03:43  

@sylwek2008igormix

Thank You.

Sam 30 May 2009 at 23:11  

ha - way cool - thanks!

Neill 15 June 2009 at 23:18  

where can i find the scream sound

iliketo 16 June 2009 at 00:37  

@ Neill

I got the scream sound from sounddogs.com, but you can probably do a search on Google for sound effects.

Anonymous 22 June 2009 at 18:00  

Step 3 - when i create a button, which changes when i mouse over, and right click it for actions, the box says "Current selection cannot have actions applied to it."
Any advise? thanks (:

iliketo 23 June 2009 at 04:03  

@Anonymous

I have used an Actionscript 2.0 file for this scary maze game. If you want to use Actionscript 3.0, you will need to enter the code into the timeline.

Chuck Ayoub 28 June 2009 at 14:59  

Thanks for linking to my Maniac World site at the top. Keep up the great work you do at this site. :-)

Anonymous 3 July 2009 at 11:52  

scared da heck out of me

fc2008 18 October 2009 at 08:38  

scared me

freemindx 11 November 2009 at 20:58  

Good tutorial
I try to create my own maze and the mouse stay on the play button.
How if i want to make my mouse put on the specific place when the game load?

iliketo 12 November 2009 at 02:23  

@freemindx

You can set the mouseX and mouseY properties.

Stroomstoot 23 December 2009 at 11:09  

How do I use my custom cursor in the game? do i just have to write Mouse.show(); or do i have to write the name somewhere?

iliketo 23 December 2009 at 13:22  

@Stroomstoot

I have not added a custom cursor to my instruction screen which is why I used the code 'Mouse.show()'. But if you wish to have a custom cursor. Take a look at the custom cursor tutorial. The link can be found above.

Stroomstoot 23 December 2009 at 13:44  

sorry for posting again but i got another problem i put all codes in excactly as you wrote them but when i try to test the game it says:**Error** Scene=Scene 4, layer=image, frame=1:Line 3: Syntax error.
}

Total ActionScript Errors: 24 Reported Errors: 24

iliketo 23 December 2009 at 13:54  

@Stroomstoot

It looks like you have a syntax error. Make sure you have the correct number of '{' and all instance name fields are not empty and contain correct spelling.

lektira 3 January 2010 at 03:55  

thx it very nice tutorial!
thx bro you are best

richel.alcontin 20 January 2010 at 07:49  

where can i get that scary sound? can you give me?

iliketo 20 January 2010 at 10:11  

@richel.alcontin

You can do a google search to find scary sound effects.

Austin 20 January 2010 at 10:53  

Game isn't working in Actionscript 1.0
Any advice??

iliketo 20 January 2010 at 12:35  

@Austin

Use an Actionscript 2.0 file.

iliketo 20 January 2010 at 12:35  

@Austin

Use an Actionscript 2.0 file.

littlepans 2 February 2010 at 04:36  

im usin 3.0, and y game works perfectly. The only thing is that my "Play Again??" button does not work.Im using the same coding as i used for all of my other buttons. Any suggestions?

iliketo 2 February 2010 at 05:39  

@littlepans

This tutorial is created in Actionscript 2 so you have to use an AS2 file. Also, make sure the code is in the correct frame.

killdog3 11 February 2010 at 15:09  

i really need help, wen i go to test it, the buttons wont work, please help

iliketo 12 February 2010 at 09:40  

@killdog3

What code are you using for the buttons?

anu 13 March 2010 at 06:47  

i need help i am learning flash i could not correct this error please help me
" **Error** Scene=Scene 2, layer=Layer 2, frame=15:Line 4: Syntax error.

Total ActionScript Errors: 13 Reported Errors: 13" please help me

iliketo 14 March 2010 at 04:55  

@anu

Make sure you are using an Actionscript 2 file.

zanpo 15 March 2010 at 15:49  

Hello,

I've created a new game by myself, and followed every step very carefully, but when i test the game, at the first scene, after i push the PLAY button, it automatically send me back to the Scene 1, instead of Scene 2, like it is supposed to.

Any ideas what is wrong?

Thanks

iliketo 17 March 2010 at 11:46  

@Zanpo

Your cursor is touching the second scene when you push the button. Make sure that area around the button on the second scene is clear.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP