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.
// Change this line:
public class Enemy {
// into this:
public class Enemy extends 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
By now your Enemy class should look like this:
package com.grapefrukt.tutorial.supergame.enemies {
import flash.display.Sprite;
[Embed(source = '../../../../../../assets/leek.swf', symbol = 'Leek')]
public class Enemy extends Sprite {
public function Enemy() {
trace("I'm alive");
}
}
}
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.
The whole project is available as a zip if you want to get a quick start.
Next time we’ll use png’s and jpg’s for graphics and do some basic interaction!
If you have any questions, just write a comment and I’ll respond as best as I can!
In part four we do some more embedding.
If you have Flash CS3/CS4 you should look into publishing to SWC – it’s much nicer to use as the exported symbols appear as classes in FD code completion.
I’ve been having some issues with the swc export from cs3 so I haven’t used them for that reason, but once I upgrade I’ll be sure to look into using swc’s!
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!
thx for the tutorial
now i know how to use flash develop
thx again
Yeah, I’m sure most people here picked up on it, but when you create the enemy class, you need to include the line
“trace(“I’m Alive!!”);
right after the initialization line of the enemy constructor.
Here is how it’s supposed to be:
Main.as:
package {
import flash.display.Sprite;
public class Main extends Sprite {
trace(“I’m alive!!”);
public var enemy:Enemy;
public function Main():void {
enemy = new Enemy();
addChild(enemy)
enemy.x = 500;
enemy.y = 300;
}
}
}
Enemy.as:
package {
import flash.display.Sprite;
[Embed(source=’../Assets/leek.swf’, symbol=’Leek’)]
public class Enemy extends Sprite {
public function Main():void {
}
}
}
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.
It also shows where you put your “I’m alive” at!
Ah crap my this text box messed it up! Never mind just follow what prototyprally says above.
Good stuff!
And for those who want to know their Object-Orientation Programming,
you can use this.x = 500, this.y = 300 😀
I noticed you had one extra “/…” in your leek directory.
On the other hand, great tutorial. I’ve found more info in this than in anywhere else on internet.
I’m stuck here: “If you try and run your code now it should output “I’m alive” to the output panel. That means we’re in business.”
my output panel says:
Running process: C:\Programmi\FlashDevelop\Tools\fdbuild\fdbuild.exe “C:\Documents and Settings\Riccardo.RICCARDO-69525A\Desktop\projects\1\New Project.as3proj” -ipc 2d5b6944-8a5d-4fdc-b997-a0259d75fb8b -compiler “C:\Documents and Settings\Riccardo.RICCARDO-69525A\Desktop\air” -library “C:\Programmi\FlashDevelop\Library”
Using the Flex Compiler Shell.
Building New Project
mxmlc -load-config+=obj\NewProjectConfig.xml -debug=true -incremental=true -benchmark=false -o obj\NewProject634056293688125000
INITIALIZING: Adobe Flex Compiler SHell (fcsh)
Starting new compile.
Loading configuration file C:\Documents and Settings\Riccardo.RICCARDO-69525A\Desktop\air\frameworks\flex-config.xml
Loading configuration file C:\Documents and Settings\Riccardo.RICCARDO-69525A\Desktop\projects\1\obj\NewProjectConfig.xml
(fcsh)
C:\Documents and Settings\Riccardo.RICCARDO-69525A\Desktop\projects\1\src\Main.as: Error: A file found in a source-path can not have more than one externally visible definition. enemy;Main
Build halted with errors (fcsh).
Done (1)
This is the code I used:
Main:
package
{
import flash.display.Sprite;
import flash.events.Event;
/**
* …
* @author Ricvail
*/
public var enemy:enemy;
public class Main extends Sprite
{
public function Main():void
{
enemy = new enemy ();
addChild (enemy)
}
}
}
Enemy:
package
{
import flash.display.Sprite;
/**
* …
* @author Ricvail
*/
public class enemy extends Sprite
{
public function enemy()
{
trace (“I’m alive”)
}
}
}
Where did I got wrong?
mh… got it… I didn’t noticed that it was case-sensitive
Pingback: MGAS3FD 2: The Beginning | prototyprally
what the fuck? it wont let me save the leek
the I’m Alive message doesnt work either!
im completely new to this and after trying how many tutorials i still dont fucking get it
how do i get it as a swf file? wtf is a swf file? it’ll only save as png file.
this is so fucking frusterating
@comment above me
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)?
Can’t get it to trace “I’m Alive”
I put “trace (“I’m alive”);” into the constructor of the Enemy but it isn’t doing it!
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!!
After looking at the comments i have realised I have not messed up with the “Im Alive” trace
Thanks so much for the tuts
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?
Oh sorry for the last comment, I figured it out. How to save the leek picture :)?
Why can’t I JUST LEARN AS3 WITHOUT READING A GIANT BOOK
No CSS?
NO CSS ALLOWED IN CHAT
Thanks for the tutorial, it’s very usefull and I didn’t found elsewhere how to use FlashDevelop.