ActionScript 3 Tutortial

Hello everyone and welcome to my first As3 (ActionScript 3) tutorial. I wished to make this tutorial in order to expand on another I have seen recently. This tutorial can be found here as3gametuts.com and will be needed in order to complete my tutorial.

I liked the idea of this tutorial and it was relatively easy to follow. So to begin with I would like to ask you to follow the link mentioned above and complete the tutorial. If you are new to As3 I would recommend completing this tutorial to have a good understanding of our starting point. However if you would like to jump straight in to this tutorial you can download the source code at the mentioned link also.

Getting started

So at this stage you should have 4 actionscript files created as follows Main.as, Player.as, Bullet.as and KeyObject.as. These flash files allow the player to move with the arrow and/or a,s,w,d keys and rotates to face the mouse. By clicking the mouse you can now shoot bullets from the player. In this tutorial now were are going to add in enemies, collision detection and some other features.

Keeping the player on screen

First thing we need to do is to keep the player on screen. If you haven’t noticed already test your movie now and move the player in one direction. O no! Its disappeared I hear you say. Not to worry. Below is the code you need to insert within the loop function of the Player.as file. The set of if/else if statements are to check the players position (x,y co-ordinates) with the size of the stage.

Before you test the code notice the playerHalfWidth/ playerHalfHeight variables. These we need to create ourselves in order to keep the player on screen. Without these half the player would disappear off the screen and half stay on it when it reached the boundaries of the stage. So let us create these variables and then have them obtain the value of half the width and height of the player. Insert the following highlighted lines of code in the Player.as file shown below. Then test your code and you will see that your player will stay on the screen.

PlayerMovement2

Removing The Mouse From Controls

Because I want this to be casual game that can be enjoyed on your laptop on the sofa, on a train or anywhere you want to just relax for a few minutes I have decided to take out the mouse. Lets face it, how can you work a mouse in any of these places.The most likely places you would like to play a game. Use the one built in to the laptop I hear you say. Well have you ever tried playing a game with it??? It can be very awkward and frustrating and you end up being more stressed than chilled out. So lets get down to the coding.

The controls we will use will be a,s,w,d to move direction. The left and right arrows to rotate the player and the spacebar to shoot. So to do this first of all copy and past the code below it the checkKeypresses() function in the Player.as file. This code is similar to what you already had but taking out the or || statements so as to only allow the a,w,s,d keys to move direction and not the directional keys also.

CheckPressed

We need to add in two new variables in the Player.as file to handle the rotational movements and create new if statements in the Loop function to rotate the player if the right key is pressed. This can be seen highlighted below.

CheckPressed2

Right now if you were to test your code the player would move as we would like it to. However we have not taken care of the spacebar yet. To do this go to your Main.as file and insert the space pressed function at the bottom of your file and call the function from the loop. You will now be able to shoot. 🙂

Spacebar

Creating Enemies

So what’s the point in having lots of bullets flying everywhere and nothing to shoot at! Well lets sort that out now. With your fla file open in flash go to Insert—>New symbol. In the box that pops up make sure you have movie clip selected in type, the export for actionscript box ticked and name the symbol Enemy. I just created an angry face for now.

Enemy Symbol

Once you are happy with the enemy you created go to File—>New and select the new action script file. Copy and paste the code below for the enemies class. This code is what controls the enemies to move towards the player. To make the enemies move faster change the enemySpeed variable.

Enemies

Now for the changes in our Main.as file. Here we will create functions for creating enemies, player enemy collision and bullet enemy collision. We will also be making changes to our loop function to call these newly created functions. Please follow the code below.

bulletEnemies Enemies loop playerEnemies

Now almost there. You may notice your code does not work. The last thing we need to do is to create two new symbols. One called GameScreen and one called GameOverScreen. You can do this the same way you created your enemy by going to Insert—>New symbol. Save them as the names given. Create a box the size of the stage with a colour that allows you to see your game and also a dark game over screen like below. then add in the following code.

GameOver main

Congratulations! We are now finished with this tutorial and have the bones of a pretty exciting game. Next tutorial will show you how to include a start menu and a score counter. Maybe we might even at in some levels. I hope you have enjoyed this tutorial and until next time….Happy coding!

All source code can be downloaded at with the following link: http://www.filedropper.com/surrounded

Advertisements