Main Content

You are here:

Making a Game

Hello and Welcome Foundation Flash's tutorials. This page shows the combined efforts of two tutorials, in which we will be making a small game which you have to stop a rising number at just the right time. The rest of our great tutorials can be found by clicking here, or by clicking 'Tutorials' on the navigation bar.

PART ONE

Here's what you will have done by the end of this part:

While making that, you will learn about:

We will begin by creating the physical elements of our game. Let's start with the button. It won't actually be a button, it will be a Movie Clip. But it will act as a button. So draw your button, and convert it to a Movie Clip symbol (F8). Now we have made our button. The next step? The dynamic textboxes

Dynamic textboxes are called dynamic textboxes because they are dynamic. i.e. they can be changed using ActionScript, unlike static textboxes, which can't. So, begin by just drawing a textbox, and then, in the properties panel, in the drop down menu, where it says static textbox, change it to dynamic textbox. Now you can give it an instance name.

Instance names are names given to an object so that the object can be referred to in ActionScript. You should see a textbox below that drop down menu that says "instance name" in it. Type in it "numbertext". This is now its instance name, and you can refer to it in your ActionScript.

So, time to add the ActionScript. But first, you need to understand a little bit about variables. Variables are values that can be changed in ActionScript, and are therefore variable. To create a variable, or as it is properly called, to declare a variable, you type:

var name of variable = value

A variable doesn't have to be a number, it can be a word or phrase or a true or false value, amongst other things. So, I am going to declare a variable to hold the rising number that you have to stop. Click on the button Movie Clip symbol, and press F9 to open up the actions panel, and type:

onClipEvent (load) {
        var number = 0
        }

What you have told Flash is, when this Movie Clip loads(so it will only happen once), create a variable called number and make it equal to 0. So, we now have our number, equal to 0, and now we have to make it rise. How do we do that? Well, type this:

onClipEvent (enterFrame) {
        _root.numbertext.text = number;
        number += 1;

So, we have told Flash to create our variable, and then, every time we enter the frame, to update the text inside our "numbertext" dynamic textbox to equal the number variable, and also to increase that number variable by 1. So now, if you test your movie, you will see the number rising in the textbox. So, the next step is making it stop when we press our button.

Well, we need to stop it going up if we press the button. The keyword there? If. That's right, we are going to use an if statement. Well, we have our code, so we need to put that inside an if statement. Well at the moment we have:

     _root.numbertext.text = number;
        number += 1;

And we want it to do that when the button is not pressed. How do we do that? Another variable. Type:

onClipEvent (load) {
        var number = 0;
        var notpress = true;
}

So you have added an extra variable: not press, and made it true. So when the Movie Clip loads it will have, evidently, not been pressed. So then we write:

onClipEvent (enterFrame) {
        if (notpress) {
                _root.numbertext.text = number;
                number += 1;
        }
}

So, if not press is true (you can just write that as if (notpress)), then it will do that code. But what if it is false? i.e. What if it had been pressed? For that, we will need an else statement. Type:

onClipEvent (enterFrame) {
        if (notpress) {
                _root.numbertext.text = number;
                number += 1;
        } else {
                _root.numbertext.text = number;
        }
}

So, if it has not been pressed, then it will constantly make the number inside the dynamic textbox equal the number variable, and constantly increase the number variable. But, using the else statement, we can say:

if (it has not been pressed){ do this } otherwise { do this }

So if it has been pressed (or if it hasn't hasn't been pressed (same thing)), then it will keep making the number in the dynamic textbox equal the number variable, but stop making the number variable go up. So the number will be stopped. The last thing to do is make it so that when you press the button, the notpress variable will be made false. That is the easy bit. Just type:

on (press) {
        notpress = false;
}

So your final code looks like this:

onClipEvent (load) {
        var number = 0;
        var notpress = true;
}
on (press) {
        notpress = false;
}
onClipEvent (enterFrame) {
        if (notpress) {
                _root.numbertext.text = number;
                number += 1;
        } else {
                _root.numbertext.text = number;
        }
}

Phew! That's a lot of code! But if you test your movie, it should work. Well, that's it. Thank you for reading this and I hope you've learned something. Part two is coming up, when we will be checking how close to a specified number the person got, and giving them points accordingly.

PART TWO

In this, final, part of the tutorial, we will make this:

As you should be able to see, the number rises and the button stops it. But added on we have made a random target number, a restart button, and detected whether or not the target number has been reached. To do this, you will learn about:

So, let us review our code so far:

onClipEvent (load) {
        var number = 0;
        var notpress = true;
}
on (press) {
        notpress = false;
}
onClipEvent (enterFrame) {
        if (notpress) {
                _root.numbertext.text = number;
                number += 1;
        } else {
                _root.numbertext.text = number;
        }
}

Believe it or not, we will be adding even more code to that. So what has to be done first? Well, we have to set a target number. We will set that in a variable. Here is where you will learn about both the Math.random function and the Math.round function. We will start with the Math.round function, as that is the simplest one. The structure of the Math.round function is this:

Math.round(<em>formulaem>)

It basically rounds whatever is in its brackets to the nearest integer. Relatively simple. But now we have to learn the Math.random function. This is also relatively simple, but seems very complicated when put into practice. It basically produces a random number between 0 and 1. You can produce a random number between any two number easily by typing something like this:

(Math.random()*((Maximum number - Minimum Number)) + Minimum number

To help you understand, I will give an example. Say I wanted a random number between 50 and 100. Well I would type:

(Math.random()*50) + 50

So, we have the random number between 0 and 1, and then we are multiplying it by 50, meaning that the random number will have a range of 0 and 50, but I want the minimum number to be 50, not 0, so I add 50 to the number produced, making the minimum number 50, but also increasing the maximum number to 100, which is why you multiply by the maximum number minus the minimum number; because the minimum number will be added again. Get it? Well, hopefully you understand, and if you don't, just bear with me. So let's use those functions. Under:

onClipEvent (load) {
        var number = 0;
        var notpress = true;

Type:

var target = Math.round((Math.random()*80)+20)

What we have done, is declare an new variable, target, which will hold our target number, and said that it will be a random number between 20 and 100, and then made sure that they were integers by adding the Math.round function. Now we have our target number, so we have to assign it to a dynamic textbox. So, create a dynamic textbox on the stage and give it an instance name of "targettext", and then, below the line of code you just wrote, type:

_root.targettext.text = target

By the way, I don't think I explained last time, but, I am referring to it as "_root.targettext" because it is on the root timeline. So your code so far should be:

onClipEvent (load) {
        var number = 0;
        var notpress = true;
        var target = Math.round((Math.random()*80)+20)
        _root.targettext.text = target
}
on (press) {
        notpress = false;
}
onClipEvent (enterFrame) {
        if (notpress) {
                _root.numbertext.text = number;
                number += 1;
        } else {
                _root.numbertext.text = number;
        }
}

If you test your movie, a random target number should appear in your target textbox. The next step is another "if.......else" function, when we will be adding the win/lose text. So, add another dynamic textbox and give an instance name of "wintext" and add to your ActionScript so that it says this:

onClipEvent (load) {
        var number = 0;
        var notpress = true;
        var target = Math.round((Math.random()*80)+20)
        _root.targettext.text = target
}
on (press) {
        notpress = false;
}
onClipEvent (enterFrame) {
        if (notpress) {
                _root.numbertext.text = number;
                number += 1;
        } else {
                _root.numbertext.text = number;
                if (number == target){
                        _root.wintext.text = "win"
                }else{
                _root.wintext.text = "lose"
                }
        }
}

You will notice another "if...else" statement inside the original one we had. So, what we are saying is, if it has been pressed, check if the number variable is equal to the target variable, and if it is, make the wintext textbox = "win", but if it isn't, make it equal lose. And that is all the code in that button. All we have to do now is simply, add the restart button. This is easy. Make a new button symbol called restart, and open up its action panel. Inside, type this:

on(release){
        gotoAndPlay(2)
}

This is where we learn about the "goto" function. It basically takes you to another frame and/or scene. It can be either "gotoAndPlay" or "gotoAndStop". It is constructed like this:

gotoAndPlay(frame number);

or this:

gotoAndStop(frame number);

Pretty easy. So we have told Flash that when the button is released, it should go to frame 2. But wait a minute, we don't have a frame two! So let's make one. Go to frame two and press F7 to insert a new blank keyframe. i.e. there is nothing in it. Then click on the frame and press F9 to open up its actions panel. In it, type:

gotoAndStop(1);

So, what the restart button does is basically goes to frame 2, where you are redirected back to frame 1, where the game restarts. And that's it! So there we have it, our own number matching game! Thank you for reading this, and I hope you have learned something,

Leon.

Comments