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

Sam, actually I make

Sam, actually I make Hatchlings with this codes and I'm sure with creativity, one can make game like submachine series just with slight revamp of codes.

I guess I should make a better example but I'm afraid atm I'm quiet busy for that.

Just imagine if I put all the codes in one frame. Like 'take A and B' it will combine to 'C' which can be used to push barrels 'D'. Behind barrels 'D' you will find a key to open door. Congrats you escape the room :P .

Add the previous scenario with a character and its animation, you change it from room escape type point and click to adventure type point and click. :)

regards,
rose

Hi 'u tell me', Not every

Hi 'u tell me',

Not every point and click games have character that move around. In fact most of flash point and click games doesn't have a character, you play in first person view, for example, the famous room escape games.

What I represent in this tutorial is basic functions, with intentions that those who hasn't learn how to code, can use these to make one. They still need theirs own game design though :) .

Maybe you could read more here:
http://en.wikipedia.org/wiki/Graphic_adventure_game

WAT the fuck this isn't

WAT the fuck this isn't point and click!!!! stop naming this tutorial a point and click game!! A point and click game is where you click somewhere and the character moves to that position! not just a simple fucking button, that's what this is just a button!! God damn this fuckery!!!

actually this IS a point and

actually this IS a point and click tutorial....

what you mean is just an advanced version of point and click

Point And Click Game Tutorial

Point And Click Game Tutorial (Flash AS3.0) - very good tutorial.

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.