Advertisement
  1. Code
  2. Games
Code

Quick Tip: Create a Simple Points System Using AS3

by
Difficulty:BeginnerLength:MediumLanguages:

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.

This is how it should look.

Step 2: Creating the Graphics

These are the graphics you will need to create.
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.
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.
Make sure your dialog looks like this.

Enter the code below into your Main.as file, then save it.

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.


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.

Now we must code the functions that change and update the score.

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.