Ian Guthridge.com

How to Make a Simple Flash Game


Hello there. In this tutorial, I am going to lead you through creating a simple game in Flash and coded in ActionScript 3 (AS3). I use Flash CS4, so some panels may look a bit different if you use a different version. I have included some images to help you keep you bearings, click on them to view at full size.

In this tutorial, I am going to cover some basics of setting up the Flash File, and give a really quick, really incomplete primer on basic coding needed to do this project.

We have a lot to cover, so let's jump right in!

The selection box that  pops up after clicking on file -> new.

The selection box that pops up after clicking on file -> new.

Basic Set Up

First a quick run down on setting everything up. If you know how to do this already, go ahead and skip on to the next section. You are going to need to create a new Flash File (ActionScript 3). You are either going to need to select File->New and then select from that list that will look like the one on the left. Or if the pane, like the one on the right, appears when you open Flash, just click on Flash File (ActionScrip 3). After you create a new file, save it with File->Save. Remember to save your work often, and make sure you save it some place that you can find it later.

This new file box should appear automatically. Though it may have been disabled on some machines.

This new file box should appear automatically. Though it may have been disabled on some machines.

The document properties box should look like this when you are done with the changes.

The document properties box should look like this when you are done with the changes.

Important Settings

Now right click anywhere on the white area and select "Document Properties". For this project, we want to change it to 240x500 pixels (px) and 30 frames per second (fps).

Now go ahead and right click on the first frame in the time line and select "Actions" so you can follow along with the next section.

The Basics of Coding

I wrote a page covering the basics of coding in flash. If you don't feel that you need this, feel free to skip ahead. I had to put the section on the basics on another page to keep the length of this page down as much as possible because it was starting to break my code highlighter.

Creating a Symbol

The Convert to Symbol dialog box should look like this when you are done.

The Convert to Symbol dialog box should look like this when you are done.

Ok, you are now going to create the building blocks of your game. First select the rectangle tool. Somewhere on the document draw a 20x20 px square. Don't worry if you can't get it perfect by hand, that can be fixed. Now the color of this box doesn't matter, as we are going to be changing it in the code. First select the square using the select tool (the black mouse pointer on the toolbar) select the properties tab and then adjust the height and width. If you can't see the properties tab, make sure it is checked under Window->Properties. After you create the square, right click on it and select "Convert to symbol". This next part is a bit tricky, so be sure to reference the picture to the right. Name the symbol "box", make sure Type is a movie clip, and the center square is selected beside "Registration". Then by Linkage, make sure that "Export for ActionScript" and "Export in frame 1" are checked. The Class should be "Box" and the base class will be "flash.display.MovieClip". A warning will pop up after you press ok. This is just saying that the base class you selected doesn't exist, so Flash will make one for you. Press ok. Now you are ready to start coding up your game!

If the actions pane isn't already up, go ahead and right click on the first frame in the time line and select "Actions" so you we can get coding!

Coding This Project

Now I am going to lead you through coding this project up. I am going to be introducing some more advanced topics that were beyond the scope of the basics section. If you don't understand something, go ahead and type it up, and I'll explain it after the code section. Also, you don't have to type up my comments unless you really want too. Feel free to add your own though.

  1. We are going to go ahead and declare a bunch of variables we are going to need later:
    1. //total time since the game started
    2. var ttlTime:Number = 0;
    3. //time that has elapsed since the last frame
    4. var elapsed:Number;
    5. //sime since the last blocks dropped
    6. var timeSinceDrop:Number =0;
    7. var gameOver:Boolean = false;
    8. //if we know an integer will always be positive, creating an unsigned int lets us store larger numbers
    9. var score:uint = 0;
    10. var rate:Number = 1;
    11. /*hex color codes for our falling blocks
    12. *hex is a different type of number system that is base 16. (decimal is base 10)
    13. *It is very helpful for defining values in programs*/
    14. var colors:Array = [0xcccc00, 0xff8509, 0xcc0000, 0xcc00cc, 0x0066cc, 0x00cc66, 0x66cc00];
    15. var nextBlock:int;
    16. var fallingBlocks:Array = new Array();

    You may not be familiar with hex, but you don't have to be for this project, if you go here, you can find a tool that will give you the hex codes for a bunch of different colors that complement a color of your choosing.

  2. Next we are going to use a for loop to initialize our fallingBlock array:
    1. //initialize
    2. for(var j:int =0;j<3;j++){
    3.     //Generate a random number
    4.     nextBlock = int(Math.floor(.5+Math.random()*5));
    5.     //create a new block
    6.     var block:Box = new Box();
    7.         //create a ColorTransform from the box's, so we can recolor it
    8.     var colorTransform:ColorTransform = block.transform.colorTransform;
    9.         //set the colorTransform to one of our colors.
    10.     colorTransform.color = colors[nextBlock];
    11.         //set the color to the box
    12.     block.transform.colorTransform = colorTransform;
    13.         //the top the document is going to be 0, and the bottom will be 500. It is a bit
    14.         //odd at first, but you get used to it.
    15.     block.y = 30;
    16.     block.x = int(Math.floor(.5+Math.random()*220))+10;
    17.         //push this block onto the end of our falling blocks
    18.     fallingBlocks.push(block);
    19.         //add the block o the stage
    20.         //VERY IMPORTANT!
    21.     addChild(block);
    22. }

    Here we used some fancy code to randomize the color and position of our initial blocks. Stuff like "colorTransform.color" is called dot notation. It is used to access properties of objects. I am not going to go into too much detail on objects, because that is a whole lesson onto itself. Check out the Helpful Links section for sites that will go more into depth on this topic. The importan part for this lesson is that yo ucan use dot notation to access helpful properties of various objects.

  3. Time to create the player block. This is a lot like the part above.
    1. var player:Box = new Box();
    2. colorTransform = player.transform.colorTransform;
    3. colorTransform.color = 0x000000;
    4. player.transform.colorTransform = colorTransform;
    5. player.x = 130;
    6. player.y = 470;
    7. addChild(player);

  4. Here we are going to creating something called event listeners. Event listeners are call a function, a block of code, every time something happens, such as a key being pressed. We will be creating the functions later.
    1. //this line adds an event listener that will fire every time the frame is entered.
    2. //this event will fire about 30 times each second.
    3. this.addEventListener(Event.ENTER_FRAME, enterFunc);
    4. //the next 2 event listeners must be addeed to the stage!
    5. stage.addEventListener(KeyboardEvent.KEY_DOWN, checkKeyDown);
    6. stage.addEventListener(KeyboardEvent.KEY_UP, checkKeyUp);

  5. Some more declarations. This stuff will all be used for detecting if a key has been pressed. The entry method I am using in this project is overly powerful, but it is very flexible, and will be very usedful in future projects you may work on.
    1. //Aliases for the keycodes of the arrow keys. This will save on typing.
    2. //Further, you could remap the keys without much work. Such as to w, a, s , and d.
    3. var left:int = Keyboard.LEFT;
    4. var right:int = Keyboard.RIGHT;
    5. var up:int = Keyboard.UP;
    6. var down:int = Keyboard.DOWN;
    7. var strt:int = Keyboard.SPACE;
    8. //code for a fancy smancy input handler
    9. var keyArray:Array = new Array();
    10. //initialize array with "false" (in other words, no key is pressed)
    11. for(var i:int =0;i<222;i++){
    12.     keyArray.push(false);
    13. }

  6. Here we are going to define a couple of the functions from the event listeners earlier:
    1. function checkKeyDown(event:KeyboardEvent):void {
    2.     keyArray[event.keyCode]=true;
    3. }
    4. function checkKeyUp(event:KeyboardEvent):void {
    5.     keyArray[event.keyCode]=false;
    6. }
    7. function isKeyDown(keyCode:int):Boolean {
    8.     return keyArray[keyCode];
    9. }

    The format for defining a function is function ():
    "void" meant that nothing will be returned. If you want to create a function that has no arguments passed to it, you just wouldn't put anything between the parenthesis when defining the function.

  7. Time to create the last function from our event listeners earlier, and this is a big one! It doesn't use anything you haven't been exposed to yet, so the comments should be enough.
  8. It should look like this when you are done. After you get it working, play around with the code. Tweak it, break it, add new features. The best way to learn how to program is to explore and try things out for yourself. If you get lost, Google and the AS3 API will be your best friends.

Code Dump

Here is all the code in one file. Enjoy!

Full code located at: Pastebin

Helpful Links

  • Share/Bookmark

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!