This is part 2 of 2 of the Getting Started with AS3 series. Click here to view part 1.

OK, so we’ve covered variables, event listeners, and functions. Now let’s check out the code that actually does stuff.

“Action” Code

The final part of code we are going to look at right now is what I call the “action” code — the code that actually does things. Now, in a game, what we could do with action code includes basically anything you can think of: you can move and animate objects, perform calculations, manipulate variables, call functions, and “trace” out data to your output window, just to name a few.

Before we go into examples, you first need to know how to make objects in your game. Whether you call it an object, a sprite, an actor, or a movie clip, all games need graphics on the screen that react to your code.

Creating an instance of a Movie Clip

To create a Movie Clip (what flash calls an object that can have animations), first you just need to draw an object on your screen. A rectangle will work fine.

Next, select the entire rectangle.

And under the “Modify” menu, hit “Convert to Symbol…”
You can also just press F8.

(Tip: If you use a Mac and your F1 – F12 keys do other things when you press them, hold down the [fn] key while you press F1 – F12 to make it work like a normal function key).

In reality, it doesn’t matter what you name your movie clip, but for clarity just name it “player”.

Now here’s the part that does matter. In your properties window, there is a text box called <Instance Name>. Enter the word “player” here.
An instance is a single object in the game with its own name. If you go into your Library window, you can drag more instances of your “player” movie clip onto the screen. By giving each one a unique name you can control them with code. For example, you might have 15 bullets on the screen at once. They are all made with the same Movie Clip, but each is a different instance with a different name.

Now your program knows how to refer to the object on the screen. In your code, you just need to use the instance name, which in our case is “player”. I know I’ve sidetracked a lot from “action” code, but this is all essential for making any kind of game. Now let’s look at examples of what we can do with action code to our player instance.

In order to access the properties of the Movie Clip object (properties include its position on the screen, its size, rotation, which animation frame it’s on, etc), you need to use the instance name, then a period, and then the property (similar to the whole category.SUB_CATEGORY deal we had going on with the event listeners).

player.x = 200;
This code accesses the x-position property of the player object, and sets it to 200.

player.y = 350;
This code accesses the y-position property of the player and sets it to 350.
(Note: y positions are measured from the top down, not the bottom up. That means that an object with a y-position of 0 and an x-position of 0 will be placed in the upper-left corner of the screen.)

player.rotation = 45;
This rotates the player 45 degrees, clockwise.

player.scaleX = 2;
This stretches the width of the player object to 200%. A scaleX of 1 is normal. A scaleX of -1 will flip the object left to right.

player.scaleY = -0.5;
This squeezes the height of the player so that it is only half as tall as normal. The negative sign means that it is flipped over top to bottom.

To check if everything is working, you can use the trace command. This will print any data you ask for onto a special data panel when you run your code. The point of tracing is to see the behind-the-scenes information about your program. To check what the player’s x and y positions are, I would type:
trace(player.x);
trace(player.y);
You can also combine trace statements and label them (labels are typed in quotes):
trace(“player’s x-value is”, player.x, “player’s y-value is”, player.y);

If you type all this code directly into your Actions window, without putting it in any functions, the computer will run through all the lines of code once, from line 1 to the last line, and then it won’t do anything else.

Run your code by going to “Control” –> “Test Movie”, or with the keyboard shortcut Command + Return (on a Mac).

You should get something that looks similar to this (although your windows probably look different):

Putting it all together

Ok, believe me, I know this is getting long so we’re just going to put all the pieces together to create a final program showcasing what we’ve learned.

Here it is, see if you can understand how it works on your own. I have put comments next to each line explaining what it does:

var playerHP:Number = 100; // create a new Number variable called playerHP and set it to 100
var enemyAttackPower:Number = 10; //create variable for attack power and set it to 10

player.addEventListener(MouseEvent.CLICK, attackPlayer); // note that it is added directly onto the player (with the period). This makes it only work if you click the player, not anywhere on the screen. Call the attackPlayer function whenever the player is clicked.

setPlayerLocation(); // directly call the setPlayerLocation function, which will run once immediately when we start the game

function setPlayerLocation ():void // this sets up the function, and returns void (nothing)
{
 player.x = 200; //move the player to 200 pixels from the left of the screen
 player.y = 150; //move the player down 150 pixels from the top of the screen
 player.rotation = 45; //rotate the player 45 degrees clockwise
 trace("player’s x-value is", player.x, "and player’s y-value is", player.y); //output the x and y values so we can see them and make sure everything is working fine
}

function attackPlayer (e:MouseEvent):void //set up the function that gets called when the player is clicked
{
 playerHP = playerHP - enemyAttackPower; //subtract the enemy attack power from the current playerHP, and set the playerHP to that new value
 player.scaleX = playerHP / 100; //Set the size of the player to the amount of HP it has left.
 player.scaleY = playerHP / 100; //We divide by 100 because scaleX and scaleY are measured in decimals, so 100 HP is 1, 80 HP is .80, etc.

 trace("The player has", playerHP, "HP left"); //Output how much HP the player has left, just to check
}

Run this correctly and you should get something like this:

Congratulations!! You made your first interactive program a.k.a. a GAME!
(Well, a boring game.)

This tutorial may have been boring, but don’t worry, this was the worst part. Now that you have some idea of what you’re doing with actionscript 3 we can start on a real game. That’s a lot more fun! And now that this is out of the way we are going to dive right in.

I’ll release the first, complete, step-by-step game tutorial ASAP.
Subscribe if you want to hear about the new tutorials as soon as they are posted.

Feel free to make requests about what games you’d like me to make tutorials on. And please, give me all the comments, concerns, suggestions, advice you can think of. I’m very new to this and I hope the tutorial worked out.

Now go use what you’ve learned and build a Pong game!

Good luck on your new game developing career!
Ben Reynolds