OK so let’s start at the beginning.  What exactly do you need to start writing Flash games, and how do you begin to put one together?

Well these days you have several options.  You could develop Actionscript games using the Flex builder, or one of the opensource editors such as FlashDevelop, but for this tutorial I’m going to assume you’re using Flash.  You don’t need the latest version, but you do want to write Actionscript 3.0 code (more about that later) so anything from Flash CS3 upwards is fine.  If you don’t have access to Flash you can download a free 30 day trial of the latest version from the Adobe website.

Actionscript 2.0 or 3.0?

Actionscript is the programming language used to develop Flash games, and it’s come on leaps and bounds in recent years.  When I started developing Flash games there was no choice, it was just plain Actionscript (later known as Actionscript 1.0) until the release of Flash MX2004 when Actionscript 2.0 was released.  This was a huge leap forward and allowed much more performance and flexibility from the language.  It also intruduced a class based syntax, with inheritance like in languages such as C++ or Java.

The next big change came in 2006 with the release of Actionscript 3.0, which debuted with Flex 2.0 and the Flash 9 player.  AS3 was a huge change, and for the first time it became possible to write “serious” games for Flash.  A huge performance boost was very welcome, but existing Actionscript developers found themselves having to relearn the language.  The changes were so fundamental that it took many developers a long time to make the change, but luckily you won’t have that problem.  By learning AS3 right from the start you’ll be learning the “right” way to code, and you’ll be learning everything you need to make fantastic games…

Anatomy of a Flash Game

To create a game in Flash we need to create and work with 2 different types of file.  FLA files are Flash project files, they contain one or more timelines and can also contain vector and bitmapped graphics, audio, video and more, as well as Actionscript code.  AS files are Actionscript files and these only contain Actionscript code.  Once the game has been developed, we publish the game which generates an SWF file.  This is the actual game file which we upload and to a web server and display/play in the browser.  Let’s take a look at how we set up our FLA and AS files…

FLA, AS and SWF file icons

FLA file framework

Traditionally developers would include all the code for a game on the timeline in the FLA file.  Modern AS3 games however are developed with most of the code in external AS files.  This is a better approach, not only because it keeps all the code in one place which makes it easier to keep track of and edit, but also because those files can be reused in multiple projects.

The FLA file therefore, apart from containing any graphic or audio assets, buttons, video etc. is used to set up and “call” the external files needed for the game.  It is also used to set specific parameters, such as the framerate and size (resolution) of the game. Let’s get started, so open Flash and create a new Flash file (Actionscript 3.0)

When starting a new game project I first set the framerate, normally to 30 FPS (that means the screen refreshes 30 times per second) and set the resolution.  By default a Flash movie is 550 by 400 pixels, but many modern games are 600×500px or higher.  These settings are found by creating a new FLA file, clicking on the stage (the document part of the window) and opening the properties panel.

The next thing we do is set the main class for the game.  Basically this refers to the main actionscript file containing the code for the game.  Many developers call this file Main.as so the class would be Main (note the capital M!) but you can call it anything you like.  This is entered in the class field, again on the properties panel.

For a basic game that is all we need to do, so save the file and let’s move on to creating our main class file…

AS file (main class) framework

Our FLA file won’t do anything without some code to run so let’s create our first class.  Select New from the file menu, but this time rather than create a Flash file let’s select Actionscript file.

This time you won’t see a timeline, just a blank page with line numbers down the side.  This is where we type our Acionscript code, so let’s get started.  Let’s type the following code into the AS file, and then I’ll explain it line by line… (If you don’t want to type it you can download all the project files here)

OK now I realise that might not make a lot of sense just yet, and all those curly braces might be a little confusing but bear with me.  Let me explain what each line does and why it’s there…

Package

Packages are groups of classes.  We group classes together to keep things organised, so for example all of the classes for a specific game project might be grouped as part of the same package.  You’ll notice that the word package is in blue.  This signifies that it’s a reserved word.  That means a special word which is used in Actionscript for a special purpose.  Later you’ll learn about variables, constants and functions which we can name whatever we like, but we must always remember not to use a reserved word as a constant or variable name (or the name of a class or function).  Flash turns reserved words blue to help prevent us making that mistake!

{ and } (curly braces)

If you’re new to programming these may seem a little odd, but in fact they are extremely useful.  They are used to show the start and end of sections of code.  In this example the very first { and the final } group the package, a second set group the class, and the third set are used to show the start and end of the function.  You’ll notice that these are nested.  That means that they are contained within other pairs, so for example the function is nested within the class.  This will make next sense in the next tutorial when you’ll see multile functions.

import flash.display.MovieClip;

This line is where the magic starts to happen.  Actionscript 3.0 allows us to create classes which extend existing classes.  So this little example program of ours is going to extend the MovieClip class.  That means our program will be able to do everything the MovieClip class can do, plus any specific functionality we give it!  This import command literally imports the MovieClip class into our new class and so we have access to all the functionality of MovieClip – cool huh!

Normally we’ll be importing a number of classes, but this example is so simple that MovieClip is all we need.  Note the capitalisation again, and the blue text!  Try typing movieclip without the capitals and you’ll see it’s black instead of blue.  Flash is case sensitive, so MovieClip is a reserved word, but movieclip is not.  Remember to get your capitals in the right place if you want things to work properly!

public class Main extends MovieClip

OK so now we’re defining our class.  Note that Main is in black, that’s because it’s not a reserved word, in fact I could have called it Billy or FlashGame or anything I liked, but I chose to call it Main and that’s what we entered in the class field on the FLA file.  This class will contain the code for our game.  Now remember I said that we were going to extend the functionality of the MovieClip class, well that’s exactly what we’re doing in this line of code.  The rest of the class definition will outline how we’re going to do that…

public function Main()

Functions (also known as methods) are like little helpers.  They are sections of code which perform specific functions (hence the name!) and we can make them do pretty much anything we want.  Our class can contain many methods, and they can call each other.  By that I mean that code in one method can ask another method for help.  This is one of the key concepts you’ll need to understand to start writing games, but don’t worry it’s really easier than it sounds once you see it in action!

Our class contains only one function – Main(). There are 2 things to note here.  Firstly you’ll notice that it has the same name as our class – Main.  This is no accident, it’s a special type of method called a constructor.  Constructor methods are called automatically when a program is run.  We could have called it something like StartGame() but we would then have had to add a line of code to our FLA file telling it to run the StartGame method… much easier to use a constructor!

The second thing you’ll notice is the parenthesis ().  These are empty at the moment, but are used to pass parameters to and from methods.  Parameters are bits of data needed by a function, and passed back and forth.  For example, if we write a method which adds two numbers together we might define a method called addNumbers(number1, number2) and so number1 and number2 would be the parameters.  When we want to add 2 numbers together we would do so by calling the method, and passing the numbers we want added like this, addNumbers(3, 4) and the method would take those 2 parameters, add them together, and return the answer of 7!

Even if a method is very simple and uses no parameters we still include the () after the name which defines it as a method.

trace("This is my first Actionscript program!");

Finally we get to some code which actually does something!  All the code we wrote up to now was really just getting set up, but this line actually generates some output!  In fact all it does is writes the words This is my first Actionscript program! in the Output window when you test the program, but at least it does something!

You’ll note that trace() is a function (you can tell from the parenthesis right!) and in this instance it has a single parameter, which is the text we want it to output.  We don’t need to know how the trace method works, only what it does and what type of parameters it takes (in this case a String – a line of text).

That is the power of methods, we can use them without needing to know how they work internally.  In the same way I can drive my car if I know how the steering wheel, gear stick and pedals work without needing to understand what goes on in the engine – see how powerful these method things can be!

Finally you’ll see a semi-colon ; after the function.  This simply tells Flash that it’s the end of the directive.   We put a ; at the end of each line of code.  Now you might be wondering why there is a ; after the import line, and after the trace line but none of the others… if so, good question!

In fact those are the only 2 “proper” lines of code, the only 2 directives.  The other lines are all about defining the structure of the code, the package, the class or the functions…

Don’t worry if that seems a little arbitrary at this point, I promise that after you’ve started to write a few of your own simple programs you’ll get the hang of it pretty quickly!

Whew – OK now I realise that was a lot to take in, but trust me when I say that after seeing this a few times it will start to seem pretty obvious to you.  For now, let’s test our program!

Save the file as Main.as (again, we use the same name, with the capital M, as our class name) and then test our program by selecting Test Movie from the Control menu.  You should see the Output window open and display the line

 This is my first Actionscript program!

Congratulations, you just wrote your first Actionscript program and you’re well on the way to writing your first Flash game!

If you didn’t see that line, or if you got any errors go back and check each stage carefully.  Make sure your code is correct, your capital letters are in the right place, your class is set correctly in the FLA file and your files are names correctly and saved in the same folder.  You can also download the demo files below and check your code against them!

First steps to becoming a game developer

OK so I know our program didn’t do much, and it probably seems like an awful lot of work just to have a single line of text appear on screen, but believe me that you now have the knowledge needed to start creating games.  What we covered in this (rather long) tutorial is the foundation of every game you’ll ever write.  Every Flash game starts by creating a new Flash file, setting a class, and writing out a basic class structure just as we did here – it is truly the anatomy of a Flash game!

In my next post we’ll take what we learned today, and apply it to a proper game… until then I hope you found today’s lesson fun and useful, do leave a comment with your feedback or suggestions, and I’ll see you tomorrow for a proper game tutorial!

Download the tutorial files

Final note: We left out a vital step in creating a Flash game/application in this tutorial – we didn’t publish an SWF file!  As you learned earlier, SWFs are the actual files you upload to the web and play in your browser.  There’s a good reason for this though, out little “Hello world” example only used the trace function and that only works when testing the program in Flash – it’s relaly used as a helper when you’re coding, not for actually doing anything in published files.  In the next post we’ll use what we learned today and create a real game which we can publish and upload!

Share |