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

I am happy to find this very

I am happy to find this very useful for me, as it contains lot of information. I always prefer to read the
quality content thanks for share me...

I tried the game. easy and

I tried the game. easy and fun. hope you will sahre your games for an arcade sites.

i loVe you sample

i loVe you sample game...thank a lot,,,you help me to our thesis :D

Simple yet very awesome to

Simple yet very awesome to play, I would also like to master flash and thanks for this guide.

Excellent stuff. I’ve read

Excellent stuff. I’ve read your things and you are just too awesome. You make it entertaining and you still manage to keep it smart. This is truly a great tutorial. Thanks for sharing.

Thanks. THis is very useful

Thanks. THis is very useful most tutorial I have found are for actionscrip 2 unlike this one. One thing that it would be great to know is how to make a simple inventory with actionscript 3.

Fantastic

Fantastic

Nice work, except; your game

Nice work, except; your game doesn't remember what it's done. When returning to previous rooms you have to redo everything.
But other then that, great work, I learned a lot.

You should add a Boolean

You should add a Boolean variable to detect. Something like:
function mydoor(e:MouseEvent) {
door.gotoAndStop(2);
dooropen = true;
}
if (dooropen == true) {
door.gotoAndStop(2);
}

What program do I need to

What program do I need to open the .fla file? I've tried with Macromedia Flash 8 Pro, but no luck. I thought if it was fla it would work with any flash program! what's going on?

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.