Tutorial 1: Where do I start?

First of all, I highly recommend you discretely kill off a rich relative and leave yourself on the will so as to be able to afford Flash CS3 (or whatever the latest version is once you read this). It’s relatively expensive, but it’s cool, yeah?

Now a lot of the tutorials online show you how to program a game by inputting AS3 code into the timeline of the main MovieClip. This is an excellent way of programming if you like getting horrifically confused and frantically clicking on different frames to figure out where the hell your code has gone. The big problem with this way of programming is that the bigger the game, the harder it is to expand it, so it’s only really useful for small games.

No, in my game, no code will appear on the main timeline. There might be the odd bit of code within specific MovieClips, but the idea is that each entity within the game should be more or less self-contained. This way, we can add functionality to the game all we want without making it more difficult to manage. This is the whole point of Object-Oriented programming, as far as I can tell. They like to use words like “encapsulation” but I’m going to avoid that type of jargon, mainly because I’m not entirely sure how to use it.

Where do we put the code?

The first thing we’re going to do is create a new Flash document. Now I’m making a game set in space, so I’m going to create a new folder called “spaceGame” (I’m creative like that). Then I create a flash document called, you’re never going to believe this, “spaceGame.fla”. Right, just to emphasize my point about not putting code within the timeline, I’m going to delete the one frame they put there for you.

So now what? How does the flash document know what code to run? Well, start off by creating a new actionScript file. Once again my creative genius will shine through in my naming abilities. I dub it “SpaceGame.as” and it shall be saved in the same folder as “spaceGame.fla”.

Now back in the fla document, in the properties panel for the document see that down there at the bottom right? Document class. This is the class the document opens right at the beginning – so write “SpaceGame” in that space.

As we go on in this exciting adventure, I’m going to talk an awful lot about classes, but for now let’s just write some code, and I’ll get into greater detail later…

So within the “SpaceGame.as” document, we’re going to write the SpaceGame class. I want you to write the following:

package {    import flash.display.MovieClip    public class SpaceGame extends MovieClip    {       public function SpaceGame()       {       trace("hello World!");       }    } }

What does all that mean?

Sorry if you already know this stuff, but like I said my target audience is people who might know some programming stuff (if statements and whatnot) but not the way that flash AS3 is organised. These few lines are all important, so let’s look at them one by one…

Package: Packages are sets of classes that work together. So in this game I will have a “ships” package, which contains all the different types of ship classes. I’ll have a “userInterface” package that contains all the… you get the picture. Packages are just the folders you save the classes in, and seeing as this class is in the main folder, it doesn’t actually belong to a specific package (otherwise it would read “package ships” for example). More on both packages and classes later.

Import flash.display.MovieClip: aha! Remember packages? We require a specific class (MovieClip - our game is a special kind of flash movie clip), which is found inside the package "display" which is in the package "flash". Obviously these packages come with flash, but we can make our own packages in the future, and we will import classes from these packages in the same way as we did the MovieClip. All clear?

public: Now, if you were good and clicked on the wikipedia link for OOP (Object Orientated Programming) you probably got somewhat confused (unless you’re good at all this nonsense). Now the idea with this kind of programming is that we’re dealing with independent, self-contained objects, which then can communicate with each other. Public means that this class can be “contacted” by any other class from any other part of the program. More on this when I feel like it.

Class: aha! Hopefully, while you were reading the above you developed a strong urge to learn what on Earth a class is – it’s impossible for me to talk about packages etc. without talking about classes. So here goes. Take a deep breath.

Think about how we talk about the animal world – it’s divided into different classes (or kingdoms, branches, I don’t know). If we talk about a class of animals, we’re talking about a group of animals that share common attributes, as well as behaviour patterns.

The attributes, such as how many legs this class of animal has, or whether or not is has feathers, would be variables in AS3, and its behaviour would be defined by functions (behaviour such as fly(), attackOldPersonInPark(), throwUpOnCarpet() ). They have a nice example involving dogs in the wikipedia article on OOP.

So we define all these things in a class document, then from the class document we can create instances of the class, which is to say a specific individual, as opposed to a general definition. To clarify this idea further I’m going to use another animal metaphor. A very old animal metaphor. And I’ll stick in some Greek philosophy. It all applies to programming.

Remember when you studied Plato at school? If not, go to wikipedia NOW, because I’d like to think of my readers (if I ever have any) as a cultivated lot. Anyway, he wrote down lots of what Socrates said, including his idea that physical objects and events are mere reflections of a pure ideal. This is often illustrated with horses.

If you think of horses, there is in your mind the fleeting perception of the perfect horse. The horses we see around us are all linked, but also unique – different colour, size, behaviour and whatnot, but they’re definitely all horses, which is to say reflections of the ideal horse, that exists beyond the physical (metaphysics).

Now I think this is a misinterpretation of Socrates’ thinking – he wasn’t actually trying to describe reality – he had merely developed Object Orientated Programming 2500 years in advance. In his example, the ideal horse is actually the class Horse, whereas all the physical horses are instances of the class, as in “myHorse:Horse = new Horse(brown, short, fast, bad-tempered)”.

I hope that cleared all that up.

SpaceGame extends MovieClip: so the class is called “SpaceGame”, fine, that’s all good. Then “extends” means that the SpaceGame class has all the functionality of MovieClip, and we’re just going to add some more. So with a MovieClip we can jump between frames, we can add other MovieClips, we can apply transformations to it, and the same is true of SpaceGame. We say that SpaceGame inherits from MovieClip.

Public function SpaceGame(): so this function is public (as in, it can be accessed from anywhere) and the function has the same name as the class. This means that SpaceGame() is the constructor of the class; it is called automatically whenever a new SpaceGame class is created.

trace("hello World!"): the trace function is something we’ll be using from time to time – it will not be part of the final product, but will help us with debugging, or as a quick fix just to see if something has worked. As for “Hello World”, this seems to be a traditional programming opening line, and I like it because it makes me think that the application has just been born and wants to greet the world. Obviously you could replace “hello World” with “go eat your grandmother” but I’m not sure that would be the most auspicious start…

So now run your flash application (cmd + enter for macs) and hopefully you should have something that looks like this:



Now in your SpaceGame folder there should be a new document: “spaceGame.swf”. This is the final product- the thing you can send to your friends be email, or upload to your site. If you open it in flash player now you won’t get anything but a white square, but within the flash application you’ll get an output window saying “hello World”.

It’s alive!