On to the final step in making our shooter! You can go back and check Step 1, Step 2, Step 3 and Step 4 if you missed something. In this step, we’re going to add a score and set up our rocket so it can be hit by the enemy ships. This one’s going to be pretty simple, the point of this whole tutorial was to show the basics of building a game in AS3. If you want to take it farther, it won’t be that difficult and will be a great learning experience.

The first thing we are going to do is use the Text Tool (T) to add a dynamic text block to the stage. I put mine in the bottom left, but you can put it anywhere. Make sure that it’s set to dynamic text, not static or input and give it an instance name of scoreTxt. Because it’s dynamic we can change the contents with ActionScript and it’s only going to take a few lines of code to do this. First, we need to add this to the bottom of the other variables:

Next, in the rocketMovement function, right before the closing bracket, add:

This sets the text inside our scoreTxt textfield with the text() method. We’re telling it to display the word Score plus our variable score, whose value we will assign next in our Enemy class. The reason at we are putting this line of code in the rocketMovement function is because we are listening for any changes to score every frame. We could create a new function just to update the score, but since rocketMovement is doing what we want anyway, we can just add it in there.

Now in the Enemy.as file we just have to had one little line of code. Put this in the moveEnemy function:

Now, when the enemy ship is destroyed, the game will add 5 to the score.

The easiest way I’ve found to end the game is to use a Boolean. In the main code, I created a variable called dead, typed it to Boolean and set it to false:

Now go into the Enemy.as file and add this code to moveEnemy function:

I’ve created a moveclip that says Game Over, I named it gameOver and checked the Export for ActionScript box. When an enemy ship hits our rocket, the game will remove all the ships from the stage, move our rocket off of it and add the Game Over movieclip. The reason we are moving the rocket movieclip off the stage instead of removing it is because we put it on the stage in our .fla, if we had added it with addChild() we could remove it easier, but it’s not that big of a deal.

That’s it! Now you should have the basics of a shooter game that you can build on, adding lives and more than one kind of enemy shouldn’t be too hard. I hoped this helped and now I have to figure out what to build next.

So far, we’ve made a ship move, shoot lasers and make enemies move around. Now we are going to make the lasers hit the enemies.

This was probably the hardest part of my AS2 game to switch over to AS3, because all the code in AS2 was in the actual .fla. Since the code for both the laser and the enemies were actually on the stage, it wasn’t too hard to make them interact. But since we are making this is in AS3 and the code of the laser and enemy ships are in their own AS files, we have to figure out a way to have the enemy ship code know where the lasers are on the stage. The easiest way to do this is to just add a movie clip to the stage and put the lasers inside it. This way, we can keep track of where the lasers are and how many there are. So, the first thing we have to do is add this code to the top of the main code in your Flash file:

And down where the laser is added to the stage, change it to this:

Alright, that’s all we are going to change in the main .fla. Next, we have one thing to add to Enemy.as, put this in the moveEnemy function:

I commented the code because it’s easier than explaining it here. We just have to make one more change or we’ll get an error. If we left it like this, the laserTaget.removeListeners() line would give us an error. The reason for this is pretty simple, we are trying to access a function in the Laser.as file from the Enemy.as file and that function, removeListeners() is a private function. In order for Enemy.as to access this function, we just need to switch it to public. So in Laser.as, change:

to:

That’s it, now we can shoot the enemies!

In step 1, we made our ship move around the screen and in step 2, we made it so it can fire lasers. Now we have to give it something to shoot at.

This is similar to what we did with the lasers in step 2 but to get the enemies to appear on the stage, we just need to do a few things, declare a variable that will set the number of enemies and add a for loop to our code.

Make your ship in your .fla, convert it to a movieclip, call it Enemy and Export it For ActionScript, it should say Enemy there as well. Delete the ship from the stage, you just need it to be in your library.

Now add this to your list of variables in the code you have in your .fla:

and then at the bottom of your code, add this:

Now, just like with the lasers, we have to make a new ActionScript file to control our enemies, File > New > New ActionScript File. Save it in the same folder as your .fla and the Laser.as file, call it Enemy.

Our package is going to look like this:

Pretty simple, we’re importing MovieClip and Event because those are the only two classes we’re using for our Enemy class. Now let’s fill this out. We have four variables, add them after the class statement but before the function:

Just like with our Laser class, we have the variable _root to bring in our stage info. Next we set up the variable for the speed our enemy ships are going to travel, we aren’t assigning it a number here because we’re going to set it up so the number is random for each enemy. timer is going to be used to change the direction of our ships so they they aren’t just flying straight across the stage. And dir is the direction that our enemy ship is going.

Inside the Enemy function add:

Pretty much the same as our Laser class, we’ll run the addClass function when the enemy ship is added to the main stage and then every frame we’ll run the moveEnemy function. And since we’ve added some event listeners, we better write the functions. First, we’ll write the addClass function.

Inside our addClass function, we have the same line as in the Laser class, _root = MovieClip(root);. But we also have addShip();. This triggers an addShip function instead of having another event listener. Add the function right after addClass.

What the addShip function is doing is assign the enemy ship’s position, x is always 600, off the stage and the y is random. We multiply the number Math.random() generates by 400 so that the
enemy will appear anywhere between 0 and 400. And we finally assign a value to our enemySpeed variable. Math.ceil rounds the number off and we generate a speed between 1 and 5. Next we’ll add the moveEnemy function.

This is where we’ll control the movement of our enemy ship. We assign the subtract enemySpeed from the x position of our enemy ship it have it move right to left across the stage. Next we check to see if the enemy ship’s x position is less than zero. If it is, we run the addShip function again, which will move the enemy ship back to the right side of the stage so it can attack again. Then we’re checking to see if timer’s value is over 25, if it is, we assign dir a value of either 1 or 2 and reset timer back to zero. Depending on the value of dir, the enemy ship will either move up or down at the rate of 1 pixel per frame. Finally we add one to timer with timer++ at the end of the function. The two if statements at the end are what will make our enemy ships travel up or down but they won’t constantly switch back in forth, because the value of dir is random, it could be 1 four times in a row or it could constantly switch. This will give our enemies a little more life to them and make the game more interesting.

Now you should have something like this:

Here’s the complete code for Enemy.as:

In Step 1, we made our ship move around the stage and in step 2 we’re going to make it fire lasers, which, of course, we need to destroy our enemies.

I’ve been rewriting a game I made in AS2 for school. Figuring out how to do somethings in AS3 is sometimes more difficult than you’d first think, but it’s also a great learning experience.

In AS2, one of the ways to build projects was to put the code directly on the movieclip, so in my AS2 version of the game, the laser’s code was in a frame on the actual movieclip. With AS3, you could do the same thing, but it’s not really the way we are supposed to do. The proper way is to make a separate ActionScript file for the laser. We should have the main code in a AS file but for now we’ll just concentrate on getting this to work.

To create the laser, use the Rectangle tool(R) and drag out a rectangle that would look like a laser your ship would shoot. Mine’s 32×5 and is red. You can make it whatever shape you want to fit your design. Now select it and press F8 or right click and Convert to Symbol. Call it Laser and make sure the registration point is the top left. Click the Export for ActionScript box and make sure it says “Laser”.

Now delete the laser from the stage, you’ll see that in your library the laser movieclip has “Export: Laser” beside it. This means that we can call the laser movieclip and add it to the stage through ActionScript, add it as many times as we want and also remove it.

Now we need to make the AS file that will tell the laser what to do. Go File > New > ActionScript File. Save the AS file in the same folder as your game’s .fla and call it “Laser”. It has to be named what you put in the Export for ActioScript field or else Flash won’t be able to find it. Now for the code. Because it’s an AS file and the code isn’t directly in the movie, there are a couple of different things we have to add.

Our basic page set up is this:

Ok, what’s going on here? Because it’s an external AS file, it has to be put into a package. Next we have to import the classes that we want to use. Our public class Laser extends the class MovieClip which pretty much means we are taking all the attributes of the movieclip class and then adding our own stuff to it. For the most part, external classes extend MovieClip or Sprite. Next, every class has a main function which has the same name as the class.

Let’s head back to our main .fla where we have to add a few lines of code. First, at the top with the variables, add these:

These are to control the rate of fire of our laser or else the player will just be able to hold down the fire button and fire continuously. The timer is our counter, we could use the Timer class that’s build into ActionScript, but it’s a lot simpler in this case to just use the frames of our movie to increase the counter. The limit variable is the number that timer has to be equal to or greater than in order to fire. And when timer is, in this case, over 5, we will set the variable allowFire to true and the player is able to fire again. In our moveRocket function, we have some code to add that will allow us to fire our laser. At the end of the function add:

The top part of the code is pretty simple, we are just checking is timer less than limit? If it is, timer++ or timer + 1. If timer is greater than limit, we are setting allowFire to true and resetting timer back to 0. The second part is where we add the laser to the stage. e.keyCode == 32 is checking to see if the spacebar has been pressed, as 32 = spacebar in ActionScript. If it has, it’s also checking to see if allowFire is true, if it isn’t, the ship can’t fire, if it is then it runs the code in the {}. First thing it does is set allowFire back to false, which restarts the timer. Next is the code that generates a new laser. Since we’ve created a class called Laser, it’s just like making a new MovieClip or Tween or Sprite. Now that we’ve created newLaser we give it it’s position newLaser.x is the same as rocket.x + half the width of the rocket and newLaser.y is exactly the same as rocket.y. Finally, we add newLaser to the stage with addChild(newLaser);

Now we go back to Laser.as and tell the laser how we want it to move. Below the public class line but above the public function add:

_root allows the Laser to know what’s going on on the stage and laserSpeed is how fast we want the laser to move. Private var means that we don’t want anything outside of this class accessing these variables, if we wanted to be able to modify them with other code, we would set them to public. Next, inside the Laser function add these two lines:

We’re just adding to event listeners that make our laser work. Now we have to write the functions.

This runs only when the laser has been added to stage and allows us to do things like check the laser’s position on the stage. Next we add:

In this function, we are telling the laser to move 10 to the right everything frame and if it’s position is greater than 550, which is the width of my stage, it removes the event listener for moveLaser and then it removes itself from the stage.

Now you should have something like this:

A couple of days ago, a friend of mine asked for my help building a space shooter game in Flash. Not the most original choice, but he was doing it as an experiment and to learn more about Flash and ActionScript 3. Making a shooter game is one of the best ways to become familiar with ActionScript basics, it was the first time I used arrays outside of simple examples.

The problem that he was having was he wanted his ship to move fluidly and to be able to move diagonally. Being a giant geek, I can say I’ve made my fair share of space games in Flash, including a couple when I was in school. After looking at his code I saw immediately what he needed to do.

I’ve recreated what he made and also the changes that I made.

To move the ship around, we start off with this pretty simple code. We have a ship MovieClip on the stage with an instance name of rocket.

What is being used here is the KeyboardEvent. ActionScript looks for a key to be pressed and if it’s the right one, it does the assigned action. If you push the Up Arrow on your keyboard, which in ActionScript is key number 38, the ship will move up 10 pixels on the stage. Push the Down Arrow or key number 40 and you move down 10 pixels. 37 is Left and 39 is Right. This will get you this:

This isn’t too bad. The ship moves around pretty well but you can’t move diagonally and if you wanted to make a game with lots of enemies and bullets flying everywhere, moving like this is going to result in dying a lot! To get the effect we want, we are going to use booleans.

A boolean variable can only have one of two values, it’s either true or false. We can use this to see whether or not a key is being pressed and it will also allow us to check for more than one key at a time. We need to declare 4 variables, one for each direction.

Next we need to change our moveRocket function. We need to replace the rocket.y -= 10; with moveUp=true;. This will tell our game that when the Up Arrow key is press to change the moveUp variable to true. We make this change for each key:

If you tested the game now, nothing would happen because we still have to create the function to move the ship. This function is pretty much the same as what moveRocket use to be but instead of checking to see if a key has been pressed, it’s checking to see if a variable is true or false.

We also need to add a new EventListener to check the booleans.

Now, if you tested the movie and pressed the Right Arrow key, the ship would move right and wouldn’t stop until we pressed another key.

To fix this, we will add a new function called stopRocket. This will check to see if you have released a key.

This is just the opposite of the moveRocket function. When you stop pressing the key, the variable switches back to false. We also need to add an EventListener for this function.

Now if when we release the key, the variable will change to false and stop the ship from moving.

Here’s the complete code:

On to Step 2!