Point And Click Game Tutorial (Flash AS3.0)

Point and Click Game probably the simplest but quiet powerful game that can be made using Flash. While it use simple codes, quality of gameplay inside a point and click game depends on the game developer's creativity. Some point and click games focus on puzzles, some on 'pixel searching', some on weird 'get items to make things', some on graphical art, and some others on storyline. This is tutorial about how to make one using Adobe Flash CS (Action Script 3.0) with example FLA file included.

First, create a new flash 3.0 file since this tutorial won't work for previous file version of flash.
Second, make keyframe on timeline as much as the number of rooms you want to make.

To make sure that player stay in one room, not making flash moving between rooms automatically, you need to type stop(); inside action script (f9) for each frames.

Next, populate your rooms with objects, from background to clickable items. You could do this by either dragging an image file to the worksheet or drawing them using flash features.

Click each objects you want the player able to interact to (including arrows to move around the rooms), press f8 to bring the symbol properties. Select movie clip and name your symbol, press ok. Note that the movie clip will appear in your library and you could re-use them.

Click the object and look at its property (notice that the property now change to movie clip property) and add an instance name. Remember this instance name.

#Some basic commands we will use in this tutorial.

trace();

This command is used to detect if a function is working or not on test mode. It doesn't give anything to the player.

//
This command is used to put comments, text on that line won't affect the codes.

#Making click interactions.
Click one of the timeline and press f9 to open action script panel. Remember the instance names we had assign before for this timeline and put these code to each of them.
instancename.addEventListener(MouseEvent.CLICK,actionname);

function actionname(event:MouseEvent){
trace("yougotactionhere");
}

By now, your objects are click-able, but we hasn't assign actions on it. There are variety of actions to put, depends on what you need for.

#Adding description to object.
The most basic interaction we often met in point and click games are objects description.

First, at the worksheet, add a text box (press T), make sure the size fit your text, and assign it to dynamic text. If your text are longer than one line, press on multiline.

Next, assign another instancename to it.

Then, go to action script (f9)and assign the text to your former function.
instancename.addEventListener(MouseEvent.CLICK,actionname);

function actionname(event:MouseEvent){
textinstancename.text = " Hello world!";
}

#Dragging objects.
Dragging objects are similar with assigning click interactions but we need to make two eventlisteners and two functions for it.

drag1.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
drag1.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

function mouseDownHandler(evt:MouseEvent):void {
var obj = evt.target;
obj.startDrag();
}

function mouseUpHandler(evt:MouseEvent):void {
var obj = evt.target;
obj.stopDrag();
}

#Making key objects.
Next interaction commonly to point and click games are key items. These items allow us to open next area, other item, or proceed to next quest/event.
For this, what we need is to make a boolean variable to hold the value.

First, declare the variable. It is recommended to declare this variable on a new layer with single keyframe (we will call it main action script layer), so it would be accessable by any part of the game.
var gotKey:Boolean = false;

Next, when the player click on the object on corresponding movie clip, change the variable to true by this script:

keyinstance.addEventListener(MouseEvent.CLICK,actionname);

function actionname(event:MouseEvent){
gotKey = true;
}

Last, make if function to check if the player got the key

doorinstance.addEventListener(MouseEvent.CLICK,dooraction);

function dooraction(event:MouseEvent){
if (gotKey == true) {
trace("openthedoor");
}

Alternatively, if player need two or more key to open the door, you can add && to the code.

doorinstance.addEventListener(MouseEvent.CLICK,dooraction);

function dooraction(event:MouseEvent){
if (gotKey == true && gotkey2 == true) {
trace("openthedoor");
}

Or if player only can pass the door if they don't have the key.

doorinstance.addEventListener(MouseEvent.CLICK,dooraction);

function dooraction(event:MouseEvent){
if (gotKey =! true) {
trace("openthedoor");
}

#Moving between movie clips/rooms.
In most point and click games, we have more than one rooms. For this, we need to apply gotoAndStop or gotoAndPlay to move between rooms. The code below will move the movie to timeline 2 and stop there.

nextroominstance.addEventListener(MouseEvent.CLICK,nextroomaction);

function nextroomaction(event:MouseEvent){
gotoAndStop(2);
}

If the player need a key to enter the room, use the codes in making key objects and replace the trace with gotoAndStop(timelinenumber);

doorinstance.addEventListener(MouseEvent.CLICK,dooraction);

function dooraction(event:MouseEvent){
if (gotKey == true) {
gotoAndStop(2);
}

While we could put frame number for these functions, it is recommended to use labels since labelling will prevent us from recoding if we add more frames to the game. To do this, click on a keyframe, and put frame label on its property.

And change the code to gotoAndStop("framename");

#Moving or make objects dissapear
Some items should dissapear after player click on them or maybe move to another place. While there are many possible scripts to do these, this one is the simplest:

function ifitemclicked(event:MouseEvent){
item.x = -500;
item.y = -500;
}

Fill the -500 to numbers you prefer. Remember that the topleft of your game is x = 0 y = 0.

#Multiple ammount of items
Just say that the player need to collect 5 stars before able to proceed, you don't have to make 5 variables and check them all.

First, declare number or uint variable. It is recommended to declare this variable on the main action script layer.

var stars:uint = 0;

Then inside a frame where player supposed to get a star:

nextroominstance.addEventListener(MouseEvent.CLICK,nextroomaction);

function gotstar(event:MouseEvent){
stars++;
star1.x = -500;
}

#Making mouse pointer change to pointing hand when it is above an item
Right after your event listener, type the instance name and code:

instancename.buttonMode = true;

#Making password check
Making password check is a bit complicated in term of number of codes needed, though it still use almost the same codes. First, declare two variables in the main action script layer.
var thepassword = 123456;
var userinput =0;

Then inside the room frame, create one input text with instance name text4, one dynamic text with instance name text5 to check if player put right numbers, and a button with instance name proceed to start checking.

proceed.addEventListener(MouseEvent.CLICK,checkpassword);
proceed.buttonMode = true;

function checkpassword(event:MouseEvent){
userinput = text4.text;
if (userinput == thepassword) {
text5.text = "You input the correct password!";
}else {
text5.text = "You input the wrong password!";
}
}

You could also use if (userinput == 123456) to check the password, though this is not recommended for tidyness.

AttachmentSize
pointandclick.fla120.5 KB

Comments

It's using action script 3 so

It's using action script 3 so you need adobe flash cs 3 and above.

I followed all the

I followed all the instruction and on the end I've got 3 errors :S The problem is I can't make it that when I put my cursor over the object it says "..." because, it allready is on the screen without me even puting my cursor on it...and by making my objects -click available- shouldn't cursor change from arrow into hand over the object...And can you explain me about Action Scripts, explain me do I have to write - the instance name- over the "instancename" and text instance name over the "textinstancename" ?? if so..then what should I write instead of "actionname" >><????

Hi Blind-dog,   Please make

Hi Blind-dog,
 
Please make sure you download the source file. You have to put new instance name like door1 and then add the event listener to it. As for changing mouse cursor to hand, use door1.buttonMode = true;

Point-and-Click goodness!

Point-and-Click goodness! This made my night much better with the realization that tomorrow I could make something awesome like this. Thank you for the great tutorial.

Nice tutorial miss... :)

Nice tutorial miss... :)

Thanks a lot! I had to make

Thanks a lot! I had to make as fast game for school and this helped me out great!

This is a great tutorial.

This is a great tutorial.

Thanks for taking the time to

Thanks for taking the time to write this up. I found it very helpful. It gave me a great place to start.

Thanks for the tutorial I got

Thanks for the tutorial I got a lot out of it. As for the people who don't have anything nice to say .... you guys should keep their mouth shut.

nice that you can test this

nice that you can test this tutorial on the same page. Looks very simple but sure isn't point and click game tutorial as pointed.

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <i>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for prevent automated spam submissions.

©Amethyst Orchard 2004 - 2009.