Friday, 19 March 2010

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:

Kim Andersson 2 September 2010 at 12:17  

how do i insert my custom cursor in the game? nice tut btw!

iliketo 3 September 2010 at 11:33  

@Kim

Have you added the code?

Kim Andersson 4 September 2010 at 02:41  

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

iliketo 5 September 2010 at 03:16  

@Kim

Use Mouse.show();

Kim Andersson 5 September 2010 at 12:06  

sorry but i doesn't work. Maybe i do it wrong. Where should i put the mouse.show(); script.

iliketo 5 September 2010 at 13:23  

@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.

NeceD 8 January 2012 at 17:10  

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.

iliketo 9 January 2012 at 02:35  

@NeceD

Take a look at this post

Michelle Knagg 20 March 2013 at 08:22  

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

iliketo 20 March 2013 at 15:08  

@Michelle,

Please read the tutorial carefully.

Adon Quartz 21 June 2013 at 10:46  

This is a really good tutorial. I was wondering how you can make extra levels for it?
Thanks

iliketo 23 June 2013 at 12:51  

@Adon,

Try adding a new scene like in Step 4.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP