Scary maze game in Actionscript 3
This post is the update for the Scary maze game. I will be rewriting the game tutorial using Actionscript 3 code. The steps in this tutorial are very similar to the previous one. You will again need a scary image and a screaming sound effect for this game. Both of these are free to download and can be found at everystockphoto.com and sounddogs.com. All the code used for this game can be found from various tutorials on this blog or by using the search box on the right.
Scary maze game in Actionscript 3
Step 1
Open a new AS3 file with the stage size 400 x 300 and the background colour #32FF99.
Select the Text tool (T) with static text and type your message on the stage. This message will be the initial instructional text for the game. I have typed the exact same message from the AS2 version of the game, but you can type whatever you wish.
I have again used a double knocked out text effect for the heading.
Step 2
Create the play button for the game and place the button below the instrutional message. Give your button the instance name: start_mc. If you don’t know how to create buttons, take a look at the basic buttons tutorial.
Step 3
On the timeline create a new layer called Actions then open up the actions panel and enter the following code.
//Stops the playhead moving to the next scene.
stop();
//Adds an event listener to the button with the mouse click event.
start_btn.addEventListener(MouseEvent.CLICK, goNextScene);
//This function stops on the first frame of the second scene using the
//gotoAndStop() method.
function goNextScene (event:MouseEvent) {
gotoAndStop("1","Scene 2");
}
Step 4
Insert a new scene by selecting Windows > Other Panels > Scenes on the menu bar. Add a new scene by selecting the ‘Add scene button’ as shown below.

Step 5
Select ‘Scene 2’ on the Scenes panel if you are not on the second scene.
Take the Rectangle tool (R) and create your maze pattern. For full instructions on how to make the pattern, checkout step 5 from the previous AS2 tutorial here.
Step 6
Using the Selection tool (V) select your maze pattern and convert into a movie clip. Then give the movie clips the instance name: wall_mc

Step 7
On the timeline create a new layer called ‘End maze’. Select the Brush tool (B) and make a small brush point at the end of the maze. The brush point is the area the player should aim to reach. It should looking something like below.

Convert the brush point into a movie clip and give it the instance name: hit_mc
Step 8
On the timeline create a new layer called ‘Actions’. Then open up the actions panel and enter the following code:
//Stops the play head from moving to the third scene.
stop();
//Adds an event listener onto the stage with the mouse move event.
stage.addEventListener(MouseEvent.MOUSE_MOVE, detectHits);
function detectHits(event:MouseEvent) {
//If the mouse touches the edges of the maze, return back to the
//first scene, and remove the mouse move event listener from the
//stage.
if (wall_mc.hitTestPoint(mouseX,mouseY,true)) {
gotoAndStop("1","Scene 1");
stage.removeEventListener(MouseEvent.MOUSE_MOVE, detectHits);
}
//If the mouse touches the brush point, go to the third scene and
//remove the mouse move event listener from the stage.
else if (hit_mc.hitTestPoint(mouseX,mouseY,true)) {
gotoAndPlay("1","Scene 3");
stage.removeEventListener(MouseEvent.MOUSE_MOVE, detectHits);
}
}
**A tutorial on the hitTestPoint() method can be found here.
Optional
You can create a custom cursor for your maze game at this point if you wish by using the following tutorial.
Step 9
Insert another scene by Windows > Other Panels > Scenes on the menu bar. Make sure the new scene is placed below ‘Scene 2’.
Step 10
Import your sound effect and scary image into the library by choosing File > Import > Import to Library.
On the timeline rename the first layer to “Image” and drag your image onto the stage ensuring it matches with the stage boundaries. You can use the Transform tool (Q) to resize your image if it doesn’t. Increase the image layer on the timeline by inserting a frame (F5) at frame 40.
Insert another layer called ‘’Sounds’ above the “Image” layer then drag your sound files from the library onto the stage. Your timeline should look like below.

Step 11
Create new layer called “Button” above the “Sounds” layer. On frame 40 insert a key frame (F6). And create a button with the message “Play again?” Give the button the instance name playAgain_btn.
Step 12
Again insert another layer on the timeline called “Actions” above “Button” layer.
Insert a new key frame (F6) on the 40th frame and add the following code:
//Stops the play head from moving back to the first scene.
stop();
//Add an event listener to the button with the mouse click event.
playAgain_btn.addEventListener(MouseEvent.CLICK, goBackScene);
//This function returns back to the first scene.
function goBackScene (event:MouseEvent) {
gotoAndStop("1","Scene 1");
}
Your timeline should look like below.

Step 13
Test your game Ctrl + Enter.
12 comments:
how do i insert my custom cursor in the game? nice tut btw!
@Kim
Have you added the code?
okay, forget my previuos comment. now I have my custom cursor working. but how do I do so it returns to the normal cursor when I loose. sorry about my bad english
@Kim
Use Mouse.show();
sorry but i doesn't work. Maybe i do it wrong. Where should i put the mouse.show(); script.
@Kim
The Mouse.show(); is case sensitive so make sure you are using an uppercase "M" and not a lower case one.
Obviously, you put the code where you want the mouse to be visible. If you want mouse cursor to be visible in the first scene then put the code in the first scene. Simple.
I need help this is what my program is saying:
Scene 3, Layer 'Actions', Frame 42, Line 5 1120: Access of undefined property playAgain_btn.
Scene 1, Layer 'Action Layer', Frame 1, Line 5 1120: Access of undefined property start_btn.
Scene 2, Layer 'Actions', Frame 2, Line 19 1120: Access of undefined property hit_mc.
Scene 2, Layer 'Actions', Frame 2, Line 12 1120: Access of undefined property wall_mc.
@NeceD
Take a look at this post
Hi,
Great tutorial, my scary maze with custom cursor, works perfectly...except...when a player loses and it goes back to scene 1, the image from my custom cursor (not the actual cursor) remains on both scene 1 and then when I click play the image is on scene 2 were the game ended! any suggestions
Thanks
Michelle
@Michelle,
Please read the tutorial carefully.
This is a really good tutorial. I was wondering how you can make extra levels for it?
Thanks
@Adon,
Try adding a new scene like in Step 4.
Post a Comment