Actionscript 3 tutorial – creating your first Actionscript 3 game

actionscript3tutorialIf games, animation or videos make your eyes sparkle as a programmer then actionscript 3 is the perfect programming language for you. This powerful flash based programming language is a versatile and dynamic way of creating awesome games, videos and animation for your websites in no time at all. The uses of actionscript 3 are almost as varied as the internet itself. From banners to whole websites, to mobile games and applications, flash actionscript allows you to design and develop applications which are small in size and robust in their application.

The following tutorial will take you through the basics of creating a mobile flash shooter game. To follow the tutorial and apply the concepts, you will need to have a basic understanding of how Actionscript 3 works as well as understanding how to create things like frames and objects. You will need to know how to work with timelines and other objects within flash. You will also need a copy of a program like Adobe Flash CS6 or similar to be able to create the code and run the program. For some basics on how flash Actionscript 3 works, udemy offer an Mobile Actionscript 3 Basics course which will teach you all the basics you need to know to follow this tutorial.

Shooter games have been around for as long as computer games have been around and this tutorial will show you how to create a very basic shooter game – think “space invaders” and you have the idea. So let’s get started.

Setting up the actionscript 3 environment

Because we are creating a mobile version, when you flash professional starts up you need to choose AIR for android. This will allow you to create a mobile application and it will create the framework required for android applications automatically.

Now choose the 800×400 Blank option to create a game which will have a resolution of 800×400. You can change this later if necessary.

When the window opens you can see your timeline as well as the first scene in the program. You can add whatever images, graphics and other objects you want to in this scene, but for the purposes of this tutorial we will stick to using very basic objects and elements so that we can focus on the Actionscript itself.

If you are unsure of what objects are or what elements are or how to create them in Flash, then you can check out the Adobe Flash Professional CS6 course offered by udemy which will teach you how to use Flash Professional CS6.

Adding the actionscript 3 elements

Now that we have our program ready we will concentrate on creating the elements we need for our short game. First change the background color of the game to a color you would like. I chose dark blue. You can of course add stars, mountains and other graphics to the background and when you create your own best seller mobile app, I’m sure you will but once again, for this tutorial we will stick to the basics.

Now we create a character for the shooter you want. I am drawing a simple green box, but you can create any image you like or even use an imported image if you wish.

Now that we have the basic elements for our game, we can begin to write the Actionscript we need to make the game work.

We need to create a main function first. We are going to call our main function spaceInvaders. So we are going to call our character – in this case the rectangle – “shooter” and begin to get our shooter to move around our screen. And here is where the magic and simplicity of Actionscript becomes important because we can program our little shooter to react to the keyboard, mouse or even touch screen commands.

Adding the actionscript 3 code

For our basic tutorial we will stick with keyboard commands but if you want to learn to add touch screen commands or more, then a course like Actionscript 3 Side Scrolling Games will have you up and playing in no time at all.

Now that we have our background, add a new layer called “actions”. This is where we will add our actionscript 3 code to make our little shooter slide across the screen and shoot.

Using the Actionscript panel, we begin to add our code:

First we need to add an event listener to the actions to listen for which keys the player is pressing. If you do not know what an event listener is or how to add them to your flash program then a basic course on Adobe Flash like  Adobe Flash CS5 Introduction will teach you how to enter actionscript mode and also how to add elements like event listeners.

To add an event listener to our shooter, we declare two variables for the left, right up and down keyboard arrows using the following code:

We also need to determine the frame rate of the program, which you can set to 24 frames per second and we need to set how fast our little shooter can move by adding the following code to our actionscript:

Now we add the on enter frame event listener for each type of keystroke – using the up down left and right arrows to move our shooter:

We keep our little shooter from running off the screen by adding the following code:

We add an event for when the player actually pushes the key down:

And finally we add the code to listen for when the player releases the key:

Now we have all of the programming code we need to get our shooter to move around on the screen depending on the keystrokes the player presses.

This type of game would have taken a ton of code using older programming languages, but due to the way Actionscript works with objects and frames and other elements, this type of game is now really simple to program. Adding superb graphics and other interactive elements are really easy and the resulting applications are small and yet powerful making Actionscript applications the premier choice among mobile programmers.