Flashyard

As I’m sure you already know, Flash is a great tool for making your very own games, but when you’re just starting out it can be hard to know where to begin.

In this tutorial I’ll give you a quick introduction to ActionScript 3. I’m going to assume that you know the basics of drawing in Flash, and that you’re familiar with layers, movie clips, the stage, the timeline and frames. However, you need little or no programming experience. The shortcuts I list are for the PC, but they’re basically the same on the mac, just replace Control with Command. For this tutorial you’ll need Flash CS3 or higher.

Contents:

Part 1: Getting ready
Part 2: Hello world!
Part 3: Comments
Part 4: Variables
Part 5: Animating with ActionScript

Part 1: Getting ready

Fire up Flash CS3, and create a new “Flash File (ActionScript 3.0)” (Ctrl+N).

You should now have a fresh project with a single layer named Layer 1.

Rename that layer (by double clicking on it) something like actions to keep track of where you’ll write your ActionScript, and lock it (by clicking on the dot under the tiny lock icon) so that you can’t place any graphic elements on that layer. All this isn’t strictly necessary, but it’s nice to keep things tidy. Now save your file (Ctrl+S) and give it a catchy name, like programming_basics.fla.

Now select the single keyframe in the timeline, and bring up the actions panel by hitting F9. We’ll write all our code on this keyframe.

That’s it, we’re now ready to start programming!

Part 2: Hello world!

With the actions panel still open, write the following:

trace("Hello world!");

Notice that there’s a small a on the keyframe you just wrote the code on. Whenever you want to get back to this code, you have to select the keyframe with the a, and press F9 to bring up the actions panel if it’s closed.

Now test your movie, by hitting Ctrl+Enter. Along with the blank movie, the output window should pop up with the words “Hello world!” showing.

If you see this message in your output window, congratulations! You’ve just written a working piece of code.

Let me explain a bit more. A program is just a series of instructions - which we call statements. The trace statement outputs everything you place inside the parenthesis. Notice that we wrapped Hello world! in quotes. If you want it to output text, you need to put it in quotes. If you don’t, actionscript will assume it’s a number or variable (we’ll get to variables later) and you will get an error message. The semicolon indicates the end of the statement.

Try to trace a number instead of text. Remeber that you don’t need quotes when you’re only using numbers:

trace(47);

I’ll show you why the trace statement is so useful in a bit.

Part 3: Comments

There are ways you can write notes to yourself or others in your code, which we call comments. This can help you keep track of your code. When you have a lot of code it becomes increasingly important to comment your code well.

There are two types of comments - single-line, and multi-line. You must begin a single-line comment with two forward slashes, and the multi-line comment starts with /* and ends with */, like this:

// Everything on this line following the slashes will be commented out.
 
/* Everything between these
slashes will be
commented out. */

Comments are not only handy for writing notes, they are also great if you want to disable a piece of code temporarily. That way you can just “comment out” the desired piece of code, and you wouldn’t have to erase it completely. ActionScript will skip anything that’s commented out.

Now clear all your previous code and let’s continue to the next step.

Part 4: Variables

Variables are essential to keeping track of information in your code. They can be thought of as named containers. They can contain numbers, text or even objects. Let’s have a closer look. We declare - or create - a variable using the var keyword, followed by the name we want it to have, like this:

var myOwnVariable;

Make sure your variable name is unique so it won’t conflict with other variables. It’s common (but not necessary) to make the first word in a variable name all lower case, and then start each successive word with an upper case, like in the code above. Also remember to end your statement with a semicolon.

Right now that variable doesn’t contain anything. To assign it a value, we write the name of the variable followed by an equals sign, and then the value we want to assign:

1
2
3

var myOwnVariable;
 
myOwnVariable = "Hello world!";

Again, we close our statement with a semicolon. Now let’s use the trace statement you learned earlier, to output the contents of our newly created variable. Here’s how to do this:

1
2
3
4
5

var myOwnVariable; // creates the variable
 
myOwnVariable = "Hello world!"; // assigns the string (text value) "Hello world!" to the variable
 
trace(myOwnVariable); // outputs the contents of the variable

Note that I added some comments in the code. Test your movie (Ctrl+Enter) to see that the text “Hello world!” shows in the output window. Pretty good! As you can see, you can use the trace statement to show you the contents of a variable. This comes in handy when you don’t know what a variable contains at any given time. It’s a must when debugging your program.

Now try this - put quotes around myOwnVariable in the trace statement like this:

1
2
3
4
5

var myOwnVariable;
 
myOwnVariable = "Hello world!";
 
trace("myOwnVariable");

Now test your movie, and notice that it doesn’t output the contents of the variable, but the string “myOwnVariable” instead. This is because - as I told you earlier - when you use quotes, ActionScript assumes it’s a string (text), otherwise it assumes it’s a number or a variable.

Okay, you should now know a little about trace, variables and commenting. It’s not quite enough to make a game, but it’s a good start. Okay, let’s make a simple animation using ActionScript.

Part 5: Animating with ActionScript

Make sure you clear out your previous code. Now close the actions panel, and we’re back on the stage. Make a new layer and draw a fish.

It doesn’t have to be a masterpiece. If you want to use my fish, you can download my project here.

When you’re done, convert it into a movie clip symbol by selecting it and hitting F8. Give it a good solid name, like Fish.

Now delete it off the stage and look in your Library panel, your Fish symbol should be there. Right click it in the Library panel, and choose “Linkage…”. Check off “Export for ActionScript”. Notice that it says Fish in the “Class” text field. We’ll use this in our code to make, or instantiate, a fish. I’ll show you what this means.

Test your movie to see that it’s completely blank. Now select the keyframe on the actions layer, open up the actions panel again (F9), and let’s change that. Let’s make your fish appear on the stage. Make a variable with a unique name, and remember to start it with a lowercase letter.

1

var myCoolVariable;

Let’s instantiate the Fish using that variable. You can think of it as putting the fish inside the variable, or assigning the fish a name (the variable name) so we can give it commands.

1
2
3

var myCoolVariable;
 
myCoolVariable = new Fish();

Notice that it’s almost the same as putting a number or string inside the variable, only this time we make a new object - the Fish - and put it in the variable instead. The fish now has the name myCoolVariable. What we need to do now, is add this fish to the stage.

1
2
3
4
5

var myCoolVariable;
 
myCoolVariable = new Fish();
 
addChild(myCoolVariable);

We use addChild(); to add something to the stage. Think of the objects on stage, as “children” of the stage. Note that we didn’t write addChild(Fish); but we use its new name, myCoolVariable. Test the movie to see the fish in the upper left corner. This is because it’s automatically placed on the x, y coordinates of 0, 0 as this is the default.

There’s only one problem with that code - the name I assigned to the fish doesn’t make much sense. It’s just to illustrate that the name can be anything you want. I’m going to change it to fish, and I suggest you do the same. Note that lowercase fish is different from Fish, so those names won’t cause conflicts. Always make sure your names are unique!

1
2
3
4
5

var fish;
 
fish = new Fish();
 
addChild(fish);

Test your code to make sure it’s still working.

Now let’s try moving the fish to a different position. Here’s how:

1
2
3
4
5
6
7
8

var fish;
 
fish = new Fish();
 
addChild(fish);
 
fish.x = 200;
fish.y = 100;

Now test the movie, and notice that the fish has moved to the x, y coordinates of 200, 100. Pretty easy eh? I’m glad you think so, because now we’re going to make it move. You’re probably already familiar with frames, framerate and animating in Flash. To make the fish move, we have to make our code listen for each time Flash skips to the next frame. Even though you only have a single frame in your movie, Flash will signal each time it’s supposed to skip to the next frame. How often this happens depends on the movie’s set framerate. You can adjust the framerate in the properties panel. To get to it, just click somewhere on the stage. If you’ve somehow closed it, you can bring it back with Ctrl+F3.

The default framerate is 12, but when making games you should set it to 30 - 40 or higher so the game animations will be smooth. To make ActionScript listen for an event, we must use something called an event listener. Here’s the code:

1
2
3
4
5
6
7
8
9
10

var fish;
 
fish = new Fish();
 
addChild(fish);
 
fish.x = 200;
fish.y = 100;
 
addEventListener(Event.ENTER_FRAME, update);

Event.ENTER_FRAME is the kind of event we want to listen for. You’ll se that as you write Event. Flash will give you a list of possible events to listen for. If you wanted to listen for a mouse click, you’d have to replace Event with MouseEvent. When you write MouseEvent. you’ll also get a list of possible events to choose from - CLICK being one of them. After we specify the event, there’s a comma and then the name of a function that we haven’t created yet. A function is simply a reusable block of code - some code that can be run over and over again. So: We’re going to make a function called update, and the event listener will run that function each time Flash skips to the next frame.

Hope that wasn’t too heavy for you. Here’s how we make the update function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var fish;
 
fish = new Fish();
 
addChild(fish);
 
fish.x = 200;
fish.y = 100;
 
addEventListener(Event.ENTER_FRAME, update);
 
function update(e:Event) {
	// any code we write inside this function
	// will be run each time flash skips a frame
}

update is the name of the function, and in parenthesis is a variable that I named e, that’s going to recieve the event information from the listener. We’re not going to go any deeper into this in this tutorial, just know that it’s necessary, because if the information from the event listener has nowhere to go, you’ll get an error message.

Hang in there, only one line of code left until the fish will move. We want the fish to move a little to the right each frame. Remember the fish.x property? If we add a small value like 3 to this each frame, it means the fish will move 3 pixels to the right each frame. Eureka!

12
13
14
15
16

function update(e:Event) {
	// any code we write inside this function
	// will be run each time flash skips a frame
	fish.x = fish.x + 3;
}

I suggest you try to copy the way I’m using TAB to make my code easier to read. It’s a common thing to do, and it helps a lot when you have a lot of code to read through. Now test your movie. It’s alive! Notice that the fish doesn’t stop when it reaches the edge of the stage, because we haven’t made any code for this yet. Let’s make the fish wrap around to the other side of the stage when it goes off the stage to the right. For this we need to use an if statement. Here’s how we’ll do it:

12
13
14
15
16
17
18
19
20

function update(e:Event) {
	// any code we write inside this function
	// will be run each time flash skips a frame
	fish.x = fish.x + 3
 
	if (fish.x > 550) {
		fish.x = 0;
	}
}

Each frame, we ask if the fish’s x position is more than 550, which is the default width of our stage. If this is true, then we set the x position to 0. Let’s test the movie. The fish skips back to position 0, but it doesn’t look quite right because the fish just appears at position 0, it doesn’t look like it swims in from the left side of the stage. To fix this we have to change the code so the fish will snap to something like -70 (which is about the width of my fish) instead of just 0. Let’s change the code and test it:

12
13
14
15
16
17
18
19
20

function update(e:Event) {
	// any code we write inside this function
	// will be run each time flash skips a frame
	fish.x = fish.x + 3
 
	if (fish.x > 550) {
		fish.x = -70;
	}
}

Looks perfect! This should give you a basic idea of how ActionScript works. The most important things you should try to learn about are:

• Variables
• Functions
• Event listeners
• If statements

Try to read up on these things, and I hope you’ll come back later for more tutorials!

You can download the complete project here.