So you want to make flash games, but you’ve never written a line of code before?
Don’t worry, this is just the place to learn how. Instead of getting caught up with complicated terms, and code that doesn’t do anything cool, we’ll jump right into the basics and then get started with some real, working game examples. Other websites might go into more depth on fancy code, but the point of this site is games. And the best way to learn games is to learn from experience.
NOTE: If you’ve already got Flash Professional running on your computer, and know the very basics of programming, I recommend you skip the rest of the article. Instead, you should start jump right into the good stuff with my Pong game tutorial.
First things first, you need to download Flash and get it running on your computer. It’s pretty expensive, so definitely get the 30-day free trial to see how you like it.
You can download the free trial here: https://www.adobe.com/cfusion/tdrc/index.cfm?product=flash&promoid=FDTFP
I could write a very long tutorial on how to use the Flash interface, but there’s no need to reinvent the wheel. As it is, you only really need to know the basics to understand how to make the games on this website, and I’ll walk you through the tricky parts as we get to them. But if you have no idea how to use the Flash interface, here are a few good resources to brush up on your skills:
- My number 1 recommendation is to check out this video series published by Adobe. They an extremely good way to get orientated with Flash. Pay special attention to Part 1 and Part 2: http://www.adobe.com/devnet/flash/training.html
- If you prefer a text-based tutorial, Adobe also has a good (but long) tutorial that you can read or skim here: http://www.adobe.com/devnet/flash/articles/flash_cs5_createfla.html
- Or, if you’re in a rush, you can watch a really quick video on the interface here: http://www.youtube.com/watch?v=2dum-h4aMmE&feature=relmfu
- Finally, here’s one more video tutorial series which might help you. Check out the free sections, especially “Getting Started with Flash”, and in particular, the “Touring the Interface” video: http://www.vtc.com/products/Adobe-Flash-Professional-CS5-Tutorials.htm
Alright, now that you’ve got Flash running on your computer we can start getting into the basics of programming. This is a brief introduction to the main concepts of programming, with Flash actionscript 3.0. Feel free to use this in combination with tutorials from other websites (here’s a list of some other great tutorials: Beginner Tutorials)
I’ll assume in this section that you know nothing about programming.
What is a program, anyways?
A program is just a set of instructions you give the computer so it does what you want. In our case, this means we are telling the game how to act. In order to do this, we type in special key words that the computer understands. They might seem confusing to you right now, but once you learn them it is all pretty logical. Open up Flash, and if you don’t know where to actually type in your code in, go to “Window”–>”Actions”. A panel should pop up that you can type into.
Flash uses a programming language called ActionScript. And in our case, we will be using ActionScript 3 (aka AS3), the latest and greatest version. Make sure you select ActionScript 3 when you create a new project.
There are 3 main parts of an actionscript program…
Variables – store data
Event Handlers – listen for certain events to happen and tell the rest of your program
Functions – organize code under a keyword, to be used whenever you need to
… which all work together to make your “Action” code work.
Variables are use to store data, whether it be numbers, words, or objects, to name just a few. You can assign a value to a variable and then use it or change it in your code. For example, I would create a variable for HP in my game, and a variable for ATK power. I could then subtract the ATK variable from the HP variable to calculate the damage.
Variables are represented with the “codeword”: var and then the name of your variable, and what type of data you want it to hold.
This is what the actual code for creating a new HP variable for the player and setting it to 100:
var playerHP : Number = 100;
“var” just tells the programming we are creating some type of variable
“playerHP” is the name we give to that variable. We can use that name to refer to the variable later in our program. Variable names must be one word, and the standard way to name things is to start the first word with a lower-case letter, and all other words with a capital letter. So you would write: thisVariableIsNamedCorrectly, not thisvariableisnamedincorrectly or ThisVariableIsNamedIncorrectly.
“ : Number” is the specific type of variable we want to use. Since we want to store a number as our HP, we set the data type to Number. The colon before it just part of the syntax of actionscript.
“ = 100;” simply sets our variable to 100. The “=” sign is always used to assign values. And the semicolon at the end of the line is actionscript’s version of a period. You put one at the end of every line.
Event listeners basically let you code run whenever a certain event happens, such as you pressing a button, moving the mouse, or if you want to create an infinite loop to run your code over and over again (necessary for most games). Event listeners are essentially the ears of your program. You tell them what to listen for, and when they hear it they shout out to the rest of the program.
You create event listeners by typing: addEventListener and then specifying what type of event you are waiting for (mouse click, key press, etc) and what you want the program to do once it “hears” this event.
This is the actual code for creating an event listener which calls out an “attackPlayer” message every time you click the player. It’s a bit complicated, but it makes sense if you look at it closely:
Let’s break it down:
“addEventListener(“ tells the program we are creating an event handler. Whatever is inside the parentheses will describe what it does.
“MouseEvent” is the broad category of which type of events it is listening for. Another category we could use is “KeyboardEvent” (for pressing keyboard keys).
“.CLICK” is the specific event we are listening for, within that broad category. In our case this will go off every time the user clicks their mouse. The period before CLICK is just part of the syntax. I’ll talk more on that later.
“, attackPlayer);” is the actual message the event listener will broadcast to the program. The comma before it is used to separate different parts of the code within parentheses. The program knows that everything before the first comma is the type of event it is listening for, and everything after the comma is what the program will do once the event happens. The name I chose “attackPlayer” is actually the name of a function that this code will activate. What’s a function? Read on…
Functions (also called “methods”) are the main body of your code. You’ll understand them better if I give an example first, so here is what they look like:
function attackPlayer (e:MouseEvent):void
// Your “action” code goes here
// for however many lines you need.
// This code will be executed every time
// you “call” this function.
OK. So basically, each of your functions contains the actual code you want to run. You organize your code into functions so that you can run a series of actions just by calling the name of the function, either by an event listener, or like this:
Functions are super important to any game. A full game might have anywhere from ten to hundreds of separate functions, depending on the complexity. The code inside a function won’t ever run until you call the name of the function. Because of this, you can put them in any order inside your program and it won’t matter.
Let’s break it down:
“function” is the keyword you use at the beginning of every function.
“attackPlayer” is the name I am giving this function. We’ll use this name to refer to the function throughout the game.
“(e:MouseEvent)” these parentheses are where you can put parameters in. Parameters are extra data we are giving the function. In a normal function we wouldn’t need any parameters for this function, but because this function is called from an event listener, we store extra information about the event in a variable “e” which stores data from the “MouseEvent” type.
“:void” is something we don’t really need to get into right now, but basically you can have your functions return a value, and whatever you write here is the type of data you are returning (for example, a Number). We write “void” here because we aren’t returning anything. Don’t worry if this is confusing, all you need to know is that in general, use “:void” after the parentheses.
// your code goes here
}” The brackets contain all the code of the function. Every function needs to start with a open-bracket and finish with a close-bracket. On a side note, those “//” double slashes create a comment line. Anything you write after the “//” will not be read by the program as code. You should use comments to explain what your code is doing so you can remember it later on.
Check out Part 2 to learn about the final main component of a program — action code — and use it to build your first game!
If you have any questions, comments, or suggestions, make sure to comment!
Thanks for this, I’m almost an absolute beginner with little knowledge at all, and all I could find was books that assumed we knew about common programming things like values and such, this starts with the ABSOLUTE basics and I’m definitely going to recommend it to anybody who wishes to start AS3 with no prior experience in coding/programming.
You’re welcome, I’m glad it was helpful! You may have noticed the site went inactive for a little while, but it is back now and I plan to update it frequently. Thanks for the support :)
This tutorial is great in explaining all the small stuff, hope you keep this up. although I notice you haven’t been active here for a while…
Thanks! Yeah, I know, I wish I could be more active, but life is pretty busy right now… hopefully I’ll post some more tutorials soon! I really enjoy helping the community :-)
That is a great initiative. Please keep up the good work! Someday I will try to contribute as well. Cheers!
Can we build the game in Flash and then port them for ios touch screen devices like ipads and iPhones. Do you have a tutorial or some game examples that have been done this way? What are the pros and cons. Thanks
I came here from your Kongregate account –
And this, you, are awesome. Thanks for writing all these tutorials. I started with AS2 but didn’t learned much of it since AS3 is a better Language then AS2 – So I’m totally gonna go through all of your tuts.
you should write some tuts on some other games like Platformer or just simple Shooter games :)
Thanks Again for writing all this stuff
Wow, thanks! It means a lot to me to know that I’ve helped so much.
I’m sorry there are only a few tutorials up here right now. I definitely plan on making more tutorials — like platformers, shooters, turn-based RPGs, etc. And in the upcoming weeks I am going to write a ton more tutorials — hopefully one every few days, or at least once per week.
Good luck on learning AS3!
Just started learning this and already know its going to be pretty easy with your tutorials. Thanks :D
No problem! Welcome to the site, and if there are any tutorials you’d like to see here in the future, don’t hesitate to let me know.
I’ve got a quick question; on other tutorials, people use classes instead of ‘Windows -> Action’. Can you tell me whats the difference???
Basically, using classes lets you do more advanced things with actionscript, but it is a bit more difficult to learn. I’m actually going to start using classes in my new tutorials soon, but for the basic game tutorials they are not necessary. Classes essentially let you create templates for you objects, so that you can create multiple instances of objects with a bunch of code already pre-packaged onto them. There are a bunch more applications for using classes as well, that has to do with Object Oriented Programming (OOP), but if you are just starting out you probably don’t need to worry about that yet.
Thanks! Great website btw!
Thanks so much, Ben, this site has been great. Unfortunately it is blocked at my school (K-12) or I would have my students using it as well. Instead I give them assignments from your site. Thanks again and keep up the good work.
When I first created this site over a year ago, I never imagined it would be used by schools. I’m so glad I’ve been able to help you and your students! :-)
You are awesome for making this tutorial series! :D
very cool tutorial. this website are awesome! you must be an angel, haha.
saludos desde colombia . thanks for this tutorial
nice tut this is actually being used at my school to teach computer game design
Thanks, that’s great to hear! :-)
Truly an amazing tutorial :) It’s very easy to understand with the breaking down of each codes.
Thanks! Glad you enjoyed it :-)
I have some example of a video
which I found very interesting and I think the only unfortunate thing is he didnt’ complete his whole game he was doing (that is the biggest part that sucks) Anyway, the way he teaches, perhaps you could do similar videos which wold be easier for both you and us to just follow and “code-along” :D
Any possibility of that happening?
And the most important thing,
Whatever the next project is going to be doesn’t really matter as much as we who follow want 2 things more than anything.
1. How to code in a clear and consistent way which you got covered (obviously) ;)
2. To follow a through a whole thought out game, weather that be pacman, angry birds, tic tac toe, or anything else, just please complete it all like the actual game. If you make a platformer for example, please create a super mario clone, so that we later on can add different things ourselves once we get down with the basics.
So not just only jumping, or just a collision with enemy, simple A.I. but also how to create a timer and give the player 300 sec for example to finish the game, or collecting coins to gain extra life, star power etc etc etc… Simply the first level of SMB to get us going and understanding all the functions.
And also stuff that maybe useful, how to import .png files, crop, resize, etc (I know that after googling, but newbies as we all are we dont know how to do that stuff either maybe)
Hope you understand what I mean, and dont take it in a negative way, I find your tutorials very valuable!!! I just write how most of us followers probably think and want of the tutorials… :D
Really helpfull and clear, thanks!
I am so happy I found your website :D
Than yous very much,,this is very helpfull!!
Thank you, i want to learn how to make flash game with AS3, but every book i buy never introduce absolute basic like this, and this is so easy to understand, thanks…..
This article is AWESOME. As an asbolute beginer this article was the most useful to me. Keep writing! Dont stop!
Thanks for the feedback! Comments like this keep me motivated to write more articles :-) Unfortunately I’m *super* busy at the moment, but I’ll see if I have time to start writing again soon.
[…] Getting Started with AS3 […]
Very good tutorial! i understood everything :) Keep up with the good work!
If some one wishes expert view on the topic of
running a blog then i recommend him/her to go to see this website, Keep up the pleasant job.
Thank you, this seems very helpful.
Great work going out and making these tuts and website for the community!
Hmm it seems like your blog ate my first comment (it was extremely long) so I guess I’ll just sum it up what I had written and
say, I’m thoroughly enjoying your blog. I as well am an aspiring blog
writer but I’m still new to everything. Do you have any recommendations for
newbie blog writers? I’d genuinely appreciate it.