In this Quick Tip you will learn how to make a simple points system that can be extended into your own games. This tutorial is for total beginners, and in it you'll learn how to create a set of buttons that the player can click to add or subtract points to or from their score. Simple!
Although this tutorial is for beginners to Flash programming, you will need to know a little bit about using the drawing tools in Flash Professional. If you need to learn how to use the drawing tools, read this article.
Final Result Preview
Let's take a look at the final result we will be working towards:
Step 1: Setting Up Your Flash File
Open up Flash and create a new Flash Document. Set the Document Size to 550x400px, the FPS (Frames per Second) to 24 and set the document class to Main.
Step 2: Creating the Graphics
These are the graphics you will need to create.
To create the graphics, use the Oval Tool to create four circles with a #000000 (Black) outline and a stroke size of 12.50.
Each circle should have a different fill color. The fill colours are as follows:
- 10 Coin: #993300
- 50 Coin: #999999
- 100 Coin: #FFCC00
- -30 Coin: #990000
After creating the coins, use static textboxes to write their respective values as given in the image above. The font I will be using throughout this tutorial is Futura LT Heavy, with a size of 50, but feel free to use your own font and font size. After completing the instruction you should have a 10 Coin, 50 Coin, 100 Coin, and a -30 Coin.
We will now convert each coin into a MovieClip. Select the 10 Coin and press F8. You should see a dialog like this:
The image has everything filled out. Make sure you write down the same things in your dialog.
Repeat this step for the 50 Coin, 100 Coin and the -30 Coin and input the following under the Name and Class boxes for each Coin:
- 50 Coin: FiftyCoin
- 100 Coin: HundredCoin
- -30 Coin: BadCoin
Once you have created MovieClips out of all the Coins, select them all and delete them off the stage. We will be adding them back again later on, using code.
To finish off this step create a static textbox with the text "SCORE:" and position it with an X value of 135 and a Y value of 327.
Step 3: Setting Up the Package and Main Class
In this step we will set up our package and the Main Class.
Create a new ActionScript Class and under Class Name type Main. Once you have created the class, save it in the same folder as your Flash file, and make sure it is saved as Main.as.
Make sure your dialog looks like this.
Enter the code below into your Main.as file, then save it.
package {
//imports the necessary classes
import flash.display.MovieClip
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldType;
import flash.events.Event;
public class Main extends MovieClip {
var tenCoin:TenCoin = new TenCoin(); //Creates a new instance of the Ten Coin
var fiftyCoin:FiftyCoin = new FiftyCoin(); //Creates a new instance of the Fifty Coin
var hundredCoin:HundredCoin = new HundredCoin(); //Creates a new instance of the Hundred Coin
var badCoin:BadCoin = new BadCoin(); //Creates a new instance of the -30 Coin
var score:Number = 0; //Sets the score to zero
var scoreText:TextField = new TextField(); //Creates a textfield to display the score
var scoreTextFormat:TextFormat = new TextFormat("Futura LT Heavy", 50, 0x000000); //Creates a new format for Score textfield, replace "Futura LT Heavy" with the font that you are using
public function Main() {
displayObjects(); //The function that we will use to display all of the graphic on the stage
setUpEventListeners(); //The function that we will use to add our Event Listeners
}
First we import the classes that we need and then we set up our document class. We then extend the Main Class from MovieClip; we could use Sprite, but it doesn't really matter. After that, we declare the variables that we are using and we add code to our Main() function (our "constructor function").
The Main() function will display all of the coins we created on the stage and it will also add the Event Listeners that we need to use.
Note: You'll need to embed the font into your FLA in order to make it display in dynamic text fields if your user doesn't have the font installed. I haven't done this here, to keep things simple.
Step 4: Coding the displayObjects() Function
The displayObjects() Function is called from the Main() function. The purpose of this function is to add the coins and the score textbox to the stage and to position them at their proper location.
function displayObjects() {
// Sets the position of the Ten Coin
tenCoin.x = 72;
tenCoin.y = 200;
// Sets the position of the Fifty Coin
fiftyCoin.x = 207;
fiftyCoin.y = 200;
// Sets the position of the Hundred Coin
hundredCoin.x = 342;
hundredCoin.y = 200;
// Sets the position of the -Thirty Coin
badCoin.x = 477;
badCoin.y = 200;
//Positions the score textbox and sets its type to dynamic so that it can be changed through code
scoreText.type = TextFieldType.DYNAMIC;
scoreText.x = 305;
scoreText.y = 327;
scoreText.width = 300;
//Sets the format of the score textbox
scoreText.defaultTextFormat = scoreTextFormat;
//Adds everything to the stage
addChild(tenCoin);
addChild(fiftyCoin);
addChild(hundredCoin);
addChild(badCoin);
addChild(scoreText);
}
Step 4: Coding the setUpEventListeners() Function and the Event Handlers
Now that we have added objects to the stage we have to create event handler functions that are triggered when clicking on the coins. We will also need an updateScore() function to use so that the score gets updated and doesn't stay the same.
function setUpEventListeners() {
//Changes all of our MovieClips into Buttons
tenCoin.buttonMode = true;
fiftyCoin.buttonMode = true;
hundredCoin.buttonMode = true;
badCoin.buttonMode = true;
//Adds the event listeners to add points to the score
tenCoin.addEventListener(MouseEvent.CLICK, addTenPoints);
fiftyCoin.addEventListener(MouseEvent.CLICK, addFiftyPoints);
hundredCoin.addEventListener(MouseEvent.CLICK, addHundredPoints);
badCoin.addEventListener(MouseEvent.CLICK, removeThirtyPoints);
//Adds the update function to update the score
stage.addEventListener(Event.ENTER_FRAME, updateScore);
}
Now we must code the functions that change and update the score.
function addTenPoints(evt:MouseEvent){
score += 10; //Adds 10 points to the score
}
function addFiftyPoints(evt:MouseEvent){
score += 50; //Adds 50 points to the score
}
function addHundredPoints(evt:MouseEvent){
score += 100; //Adds 100 points to the score
}
function removeThirtyPoints(evt:MouseEvent){
score -= 30; //Subtracts 30 points from the score
// This if statement doesn't allow the score to go below zero
if(score < 10) {
score -= score;
}
}
function updateScore(evt:Event){
scoreText.text = String(score); //This converts the score variable from a number to a string, because our score textbox can only display strings
}
} //Closes the class
} //Closes the package
Your code is now ready for testing. Press CTRL+Enter (CMD+Enter on a Mac) and watch your points system come to life!
Review
Now you might be thinking, "I've wasted my time, all this tutorial taught me to do was to create some buttons that give you points when you click them" - but you have learned more than this.
Look at this as a foundation for a more advanced points system. You learned how to use += and -= to add or subtract from a number, you learned how to use event listeners, you learned how to create a function to update objects while the SWF is running, and you learned how to change a Number to a String and display it in a dynamic textbox that you created entirely through code!
Conclusion
This points system can easily be extended into your own games. For those of you who are more experienced at Flash, try creating a game that uses a hitTestObject function and adds points when you hit an object.
I hope you learned something new today. Thanks for reading!