So you want to make flash games, but you’ve never written a line of code before?

Don’t worry, this is just the place to learn how. Instead of getting caught up with complicated terms, and code that doesn’t do anything cool, we’ll jump right into the basics and then get started with some real, working game examples. Other websites might go into more depth on fancy code, but the point of this site is games. And the best way to learn games is to learn from experience.

NOTE: If you’ve already got Flash Professional running on your computer, and know the very basics of programming, I recommend you skip the rest of the article. Instead, you should start jump right into the good stuff with my Pong game tutorial.

First things first, you need to download Flash and get it running on your computer. It’s pretty expensive, so definitely get the 30-day free trial to see how you like it.

You can download the free trial here: https://www.adobe.com/cfusion/tdrc/index.cfm?product=flash&promoid=FDTFP

I could write a very long tutorial on how to use the Flash interface, but there’s no need to reinvent the wheel. As it is, you only really need to know the basics to understand how to make the games on this website, and I’ll walk you through the tricky parts as we get to them. But if you have no idea how to use the Flash interface, here are a few good resources to brush up on your skills:

• My number 1 recommendation is to check out this video series published by Adobe. They an extremely good way to get orientated with Flash. Pay special attention to Part 1 and Part 2: http://www.adobe.com/devnet/flash/training.html

• If you prefer a text-based tutorial, Adobe also has a good (but long) tutorial that you can read or skim here: http://www.adobe.com/devnet/flash/articles/flash_cs5_createfla.html

• Or, if you’re in a rush, you can watch a really quick video on the interface here: http://www.youtube.com/watch?v=2dum-h4aMmE&feature=relmfu

• Finally, here’s one more video tutorial series which might help you. Check out the free sections, especially “Getting Started with Flash”, and in particular, the “Touring the Interface” video: http://www.vtc.com/products/Adobe-Flash-Professional-CS5-Tutorials.htm

Alright, now that you’ve got Flash running on your computer we can start getting into the basics of programming. This is a brief introduction to the main concepts of programming, with Flash actionscript 3.0. Feel free to use this in combination with tutorials from other websites (here’s a list of some other great tutorials: Beginner Tutorials)

I’ll assume in this section that you know nothing about programming.

What is a program, anyways?

A program is just a set of instructions you give the computer so it does what you want. In our case, this means we are telling the game how to act. In order to do this, we type in special key words that the computer understands. They might seem confusing to you right now, but once you learn them it is all pretty logical. Open up Flash, and if you don’t know where to actually type in your code in, go to “Window”–>”Actions”. A panel should pop up that you can type into.

Flash uses a programming language called ActionScript. And in our case, we will be using ActionScript 3 (aka AS3), the latest and greatest version. Make sure you select ActionScript 3 when you create a new project.

There are 3 main parts of an actionscript program…

Variables – store data
Event Handlers – listen for certain events to happen and tell the rest of your program
Functions – organize code under a keyword, to be used whenever you need to

… which all work together to make your “Action” code work.

Variables:

Variables are use to store data, whether it be numbers, words, or objects, to name just a few. You can assign a value to a variable and then use it or change it in your code. For example, I would create a variable for HP in my game, and a variable for ATK power. I could then subtract the ATK variable from the HP variable to calculate the damage.

Variables are represented with the “codeword”: var and then the name of your variable, and what type of data you want it to hold.

This is what the actual code for creating a new HP variable for the player and setting it to 100:

var playerHP : Number = 100;

“var” just tells the programming we are creating some type of variable
“playerHP” is the name we give to that variable. We can use that name to refer to the variable later in our program. Variable names must be one word, and the standard way to name things is to start the first word with a lower-case letter, and all other words with a capital letter. So you would write: thisVariableIsNamedCorrectly, not thisvariableisnamedincorrectly or ThisVariableIsNamedIncorrectly.
“ : Number” is the specific type of variable we want to use. Since we want to store a number as our HP, we set the data type to Number. The colon before it just part of the syntax of actionscript.
“ = 100;” simply sets our variable to 100. The “=” sign is always used to assign values. And the semicolon at the end of the line is actionscript’s version of a period. You put one at the end of every line.

Event Listeners:

Event listeners basically let you code run whenever a certain event happens, such as you pressing a button, moving the mouse, or if you want to create an infinite loop to run your code over and over again (necessary for most games). Event listeners are essentially the ears of your program. You tell them what to listen for, and when they hear it they shout out to the rest of the program.

You create event listeners by typing: addEventListener and then specifying what type of event you are waiting for (mouse click, key press, etc) and what you want the program to do once it “hears” this event.

This is the actual code for creating an event listener which calls out an “attackPlayer” message every time you click the player. It’s a bit complicated, but it makes sense if you look at it closely:

addEventListener(MouseEvent.CLICK, attackPlayer);

Let’s break it down:
“addEventListener(“ tells the program we are creating an event handler. Whatever is inside the parentheses will describe what it does.
“MouseEvent” is the broad category of which type of events it is listening for. Another category we could use is “KeyboardEvent” (for pressing keyboard keys).
“.CLICK” is the specific event we are listening for, within that broad category. In our case this will go off every time the user clicks their mouse. The period before CLICK is just part of the syntax. I’ll talk more on that later.
“, attackPlayer);” is the actual message the event listener will broadcast to the program. The comma before it is used to separate different parts of the code within parentheses. The program knows that everything before the first comma is the type of event it is listening for, and everything after the comma is what the program will do once the event happens. The name I chose “attackPlayer” is actually the name of a function that this code will activate. What’s a function? Read on…

Functions

Functions (also called “methods”) are the main body of your code. You’ll understand them better if I give an example first, so here is what they look like:

function attackPlayer (e:MouseEvent):void
{
// Your “action” code goes here
// for however many lines you need.
// This code will be executed every time
// you “call” this function.
}

OK. So basically, each of your functions contains the actual code you want to run. You organize your code into functions so that you can run a series of actions just by calling the name of the function, either by an event listener, or like this:

attackPlayer();

Functions are super important to any game. A full game might have anywhere from ten to hundreds of separate functions, depending on the complexity. The code inside a function won’t ever run until you call the name of the function. Because of this, you can put them in any order inside your program and it won’t matter.

Let’s break it down:
“function” is the keyword you use at the beginning of every function.
“attackPlayer” is the name I am giving this function. We’ll use this name to refer to the function throughout the game.
“(e:MouseEvent)” these parentheses are where you can put parameters in. Parameters are extra data we are giving the function. In a normal function we wouldn’t need any parameters for this function, but because this function is called from an event listener, we store extra information about the event in a variable “e” which stores data from the “MouseEvent” type.
“:void” is something we don’t really need to get into right now, but basically you can have your functions return a value, and whatever you write here is the type of data you are returning (for example, a Number). We write “void” here because we aren’t returning anything. Don’t worry if this is confusing, all you need to know is that in general, use “:void” after the parentheses.
“{
// your code goes here
}” The brackets contain all the code of the function. Every function needs to start with a open-bracket and finish with a close-bracket. On a side note, those “//” double slashes create a comment line. Anything you write after the “//” will not be read by the program as code. You should use comments to explain what your code is doing so you can remember it later on.

Check out Part 2 to learn about the final main component of a program — action code — and use it to build your first game!

If you have any questions, comments, or suggestions, make sure to comment!
Ben Reynolds