This is the third part of Making Games in ActionScript 3 using FlashDevelop.

Okay kids. Lots of boring setup stuff in the first two parts. It’s time to get some graphics in the mix!

As a side note, since we’re using what’s called the mxmlc compiler everything I do in this tutorial can be done using whatever IDE you please as long as it uses that compiler, if you’re really into this whole command line thing you don’t even need the IDE.

Making your first class

Today we’ll start by making a new class for our first enemy. In FlashDevelop, right click the folder where you have your Main.as file, and select Add -> New Folder…
Name it enemies.

Now, right click that folder and select Add -> New Class…
Name your new class file Enemy.as

That will give us a bare bone class to start with. The first thing we will want it to do is to make it extend Sprite.

If you manually write it in FlashDevelop will import the Sprite class for you automatically. If it doesn’t, just add this after the package row:

import flash.display.Sprite;

So, what does this extends stuff mean?

Well, Flash has a whole bunch of basic classes for all kinds of things. Right now we’ll focus on the ones geared towards displaying stuff. A Sprite is basically a graphical object that can have children (ie you can add other stuff inside it, but more about that later). If you’ve used Actionscript 2 the best way to describe it is that it’s a MovieClip without a timeline, it only has one frame.

Getting the enemy on the stage

The stage in Flash is what most things revolve around, it’s the big white area you see when you run your application. It works in a tree style structure, your Main class is automatically added as a child to the stage, and anything you want to display you will have to add as a child to your Main or any of it’s children.

The first step to getting your enemy on the stage is to instantiate it. To do that we need to define a variable in our Main class to keep track of it:

Add this line before your Main function:

public var enemy:Enemy;

That gives us a place to store the Enemy.
Now, we need to actually create him too. We do that in the constructor for our Main class. The constructor is the function with the same name as the class, this runs when you create an instance of a class. We create an instance by using the new operator and then use addChild() to add him as a child of Main.

enemy = new Enemy();
addChild(enemy)

Only classes that extend certain other classes can be added as children, so make sure your enemy extends Sprite.

We’ll add a trace in the constructor for Enemy so we know everything is working properly:

By now your Main class should look like this:

package com.grapefrukt.tutorial.supergame {
import com.grapefrukt.tutorial.supergame.enemies.Enemy;
import flash.display.Sprite;
public class Main extends Sprite {
// a place to store the enemy
public var enemy:Enemy;
// this is the first code that is run in our application
public function Main():void {
// we create the enemy and store him in our variable
enemy = new Enemy();
// finally we add the enemy to the stage
addChild(enemy)
}
}
}

If you try and run your code now it should output “I’m alive” to the output panel. That means we’re in business.
First we need to add some actual graphics for our enemy.

Getting graphics in there

As previously mentioned there are several ways of getting graphics into the mix.

We’ll start with what I consider the best one, an swf. Make a new directory in the root of your project folder called assets and save this nice picture of a leek in there.

If you go back to FlashDevelop and open that folder in your Project panel you will notice that the leek.swf has a little plus to the side. Click that.

This allows you to explore what’s inside that flash file. What we want is the Leek symbol I’ve prepared. There’s a class in there too, but that’s just an empty placeholder so we can ignore that.

Now, open up your Enemy class and position your text caret on the line right before the declaration of the class itself (the one that starts with public class…) and double click the Leek symbol in the Project panel. This will insert the code needed to link that symbol to your class. So once you click compile the compiler will go into that file, extract those graphics and embed them into your new .swf

If you compile now you will see a tiny bit of a leek peeking out from the upper left corner. This is because it’s still at the default position of 0, 0. To get it to show properly you will need to adjust it’s x and y position.

Add this after your row with addChild in your main class to change the position of your enemy:

enemy.x = 500;
enemy.y = 300;

Note that Flash uses a Cartesian coordinate system with it’s origin in the top left. In laymans terms this means that the coordinates 0, 0 is in the top left corner. A larger x value moves towards the right, a larger y value moves down.

Compile and run again and you should be able to see your leek just fine!
There’s a whole bunch of useful properties you can set this way, try fiddling around with alpha, width, height, and rotation. You can also try and add more leeks.

There’s something missing after “We’ll add a trace in the constructor for Enemy so we know everything is working properly:”, me thinks. The “I’m alive” trace maybe?
Thanks for this detailed AS3 OOP tutorial, by the way. It’s helping me A LOT!

Note: That’s MY code, the Embeded leek is where your leek swf is at, find where it is and double click, if you copy and paste my code, delete my Embeded ‘leek’ and put your leek on that line where mine was by double clicking your leek.

iv not done this tut yet but did another one earlier that used that trace thing, i didnt think it was working as it wasnt printing nothing on the screen, but then realised it doesnt, and it types the msg in the text box of the app your typing the code in, like where it shows the errors and stuff

and to save the leef as a swf file, in firefox just right click it and select “save link as” instead of chooseing image

i just spent like over a hour doing some flixel tut and just got a load of errors and didnt even see the final result lol .. its all good fun

Hello, very nice tutorial.
I don’t understand how does this script knows that the swf file is associated with the enemy variable. The only thing that comes to my mind, is that maybe because it(the swf file) is in the Enemy class….. so…enemy variable is the same as Emeny class?, that means that one class can only refer to one file(swf in this case)?

Well who knows if anyone still checks this, especially the author, but just wanted to give a big thank you: I’ve rooted around for ages for a decent tutorial, especially since I’ve been commissioned to create a Flash game for free, and yours is simply the best one.
So just to let you know that now in March 2011, your tutorial is still proving a valuable asset. I assure you that when I do this bloody game, I will give credit where credit is due, thanks!!

Hi! I am really new att all kinds of programming, and this looks like a great tutorial, I just have one question (Yeah I might be stupid)
“Make a new directory in the root of your project folder called assets”
And that mean… what?