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 8On 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 9Insert another scene by
Windows > Other Panels > Scenes on the menu bar. Make sure the new scene is placed below ‘Scene 2’.
Step 10Import 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 11Create 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.
