This article originally appeared in Dev.Mag Issue 28, released in January 2009.
Many of you have experienced it. You go online, log into your instant messenger or e-mail account and receive a link from some excited friend saying, “ARARRRAARARR PLAY THIS GAME ASBFLARGAFAG www.insertrandomlinkhere.com!!!!!” Chances are it’s either an Internet booby trap (if you have thosekind of friends) or an awesome browser-based something brought to you by Adobe Flash. And if you’re a keen game developer, you’ve probably slobbered at the idea of creating some of these cool games yourself.
Most people believe that Flash development is something remote or intimidating, a craft which is difficult to get into and even more difficult to persist with. However, this need not be the case – all you need is a good set of guide points to work from and, of course, the right software (on top of that, knowing your Java will have Flash practically fall into your lap).
This is a comprehensive kick-start to Flash which will take you through three basic sections:
- Securing (free) software
- Project structure and IDE environment
- Learning basic code with ActionScript 3
After going through these three basic sections, you should have a working idea of what developing in Flash requires from you. From there, it’s on to Internet tutorials and other thingums to get to grips with coding and advanced tools. Let’s get started.
1. Your tools
Like many programming languages, Flash requires three primary components: (1) the IDE (or “where you slap the code in”), (2) the SDK (or “the files on your hard drive which let your computer understand the code stuff”) and (3) the debugger (or “the program which runs the final stuff and helps you see if you wrote it all right-like”).
For a coding environment, we’ll be using the excellent and totally free FlashDevelop IDE. It’s only a few megabytes to download and has all of the features that one may expect from a competent IDE, including possibly the most awesome code completion system that you’ll ever lay eyes on. Ever ever. This is the program that will be visible to you, the user, whenever you want to show off your coding biceps and make something fantastic. Install it, but don’t double-click that little icon just yet! We want to get some other stuff onto your system first.
The FLEX SDK is a group of files which needs to sit on your system before you can develop in Flash. These files are used in building the final Flash applications after you’ve done the hard work of laying down the code, and will be used by the FlashDevelop IDE when you get around to opening it up.
There’re numerous SDK downloads here.
Once you’ve picked something to download (hopefully a fairly recent build under the “Adobe Flex SDK” category), grab the brand spanking new ZIP file that appears on your hard drive and extract it to a place on your drive where you won’t forget about it (for example, C:\flex_sdk_3).
Seriously, don’t forget where you’ve put it.
Finally, you’ll probably also want to look at downloading some runtime files and debuggers. Browse through the files on this page.
Recommended downloads are the Flash Player 9 ActiveX control content debugger and the Flash Player 9 Projector content debugger.
After that, you’re pretty much sorted for basic downloads. Install applications as necessary.
2. Your development environment
There’s a universal consent that part 2 is by far the most boring, and people are tempted to pull an Underpants Gnome trick (don’t ask) and go carefully through steps 1 and 3 while leaving a big set of question marks over 2.
Please don’t skip this section. Your programs will screw up, you’ll fail to compile properly and the world will explode. Worst of all, you won’t fully understand why all this happens, and many, many programming woes emerge purely because the user doesn’t know what’s going on.
Right, go ahead and open FlashDevelop. Then take a moment to pause and read through the next few paragraphs before doing anything else.
There’s a few things that need to be set up in FlashDevelop before you even open an AS3 project. First off, look for Tools in the menu bar and proceed to Program Settings. Select the AS3Context plugin and scroll down to the “Flex SDK Location” field. Now, remember earlier when we extracted the SDK files onto the hard disk? Type that location into the text field, or click on the ellipsis (three little dots) and browse for it. Hopefully you haven’t done something stupid, like forgetting where you extracted those files to. If you have, slap yourself on the face and go back to step one. Everyone else, congratulations! You’ve just told FlashDevelop where the SDK is. Now it can actually figure out what to do with the code when you click that big green “GO!” button.
For beginners who aren’t familiar with this concept, take note: FlashDevelop is just a development environment. This means that it can watch your code, help you auto-complete, and generally provide a comprehensive structure to organise and streamline your development experience. But it cannot, and never will, be useful in debugging, compiling, interpreting, linking, running, fishing, baking or writing philosophy essays. It needs the SDK for that stuff in the same way that a really awesome refrigerator can provide shelving and storage for your food but won’t ever prepare dinner for you (unless you count the stuff that always grows right at the back). If you try make a Flash program without an SDK present, you’ll come short very, very quickly.
A secondary, albeit slightly less critical action to perform is establishing a folder on your hard drive for all of your Flash projects. After all, your projects don’t consist of one or two arbitrary files that can just be shoved anywhere and recognised easily. They’re entire directories (and sub-directories) of project shortcuts, source code and embedded files which all contribute to your final product, and it’s preferable if you don’t just shove them into the mess of C:\various_rubbish. So go ahead. Create a nice neat “Flash Projects” folder somewhere on your drive. You’ll thank me for it later.
Now that you’ve got all this stuff out of the way, go to the Project > New Project menu option. There’s quite an array of project types that you can start up here, but it’s a good idea to start up a basic AS3 Project. Type in an appropriate project name and directory (remember the folder you set up just now?) and then continue. You should now have a fresh new workspace to operate with.
Before we go on to a basic coding tutorial, bring your attention to the project window on the right. What you have is a comprehensive tree of every resource to be used in your creation, and files will be added to this window when you create new ones inside FlashDevelop or add them to the project folder from an external application. The project window is nice and simple to start with, but if your creation is going to become complicated (or you’re just really trigger-happy with the “New Class” option), it’ll look a lot like the one displayed here.
Standard AS3 projects in FlashDevelop are divided into three primary folders:
BIN – no, this is NOT where you throw your rubbish! The BIN (or binary) folder contains the final product, the sum of your efforts, the stuff that an end user will pick up and look at. The two most important files for you to worry about over here are index.html (a Webpage template that can test how your project appears in a browser – if you know HTML, you can fiddle about with this) and a .swf file named after your project (only visible after your first build/run, so don’t panic if you don’t see it yet). The latter is your executable Flash program.
LIB – you can worry about this later. You know, when you’re pro and stuff. It contains things.
SRC – this is where all your hard work takes place before you send it to your executable, and will be the folder in which you spend most of your time. SRC can contain many things. For a start, it holds “Main.as”, the entry point of your program and the place where you’ll begin your coding. Later on, it’ll hold all of your various source code files, embedded images / sounds and, well, whatever else you want to put in there (ooh, look, someone smuggled in a Game Maker 7 file!).
Hopefully you have a slightly better idea of how things work in FlashDevelop now. Feel free to hate me, but knowledge is good. Seriously. Besides, we’re getting on to the cool bit now.
3. Your “Hello World”
Right, now for the implementation of all your hopes and dreams! By now you should have a nubile young AS3 project parading about on your screen (if you don’t have one, you obviously didn’t read part 2. Didn’t I just tell you to read part 2?). Double-click on the Main.as file to open it in your editor window (the file is squirreled away inside your project’s SRC directory, remember?). You’ll be presented with what us fancy types like to call a code stub – this is FlashDevelop’s way of saying, “You’re lazy and/or stupid, so we’ve written out some framing code for you already. Now you connect the dots.”
IMPORTANT: IF YOU DON’T USE THE MAIN.AS FILE GIVEN TO YOU, THINGS ARE GOING TO GET SCREWY. Make sure you’re not working in something like “untitled” by accident: that’s generally a bad idea.
You’ll be presented with one or two “import” lines (in simple terms, each one extends the commands and/or objects that you have access to in this particular file), then a public Main class which contains two default functions: one called Main() (code that runs as soon as the program starts) and another called init() (code that runs just a short while after the code in Main()).
You may notice that the code refers to something called “stage”. “What’s that?” you may wonder. Well, AS3 applications are based on a great big parent/child structure. This “stage” object is a universal instance (visible to most default object types) which serves as a great big canvas on which you can stick everything else. So if you want a soccerball to appear in your product, you’ll write something along the lines of “stage.addChild(soccerball_thingie);” in your code. If you want ten soccerballs to appear on-screen, you’ll add ten of these “children” to the “parent” stage. This is all done after you’ve successfully created a soccerball object, of course.
So, let’s make our first project stick with the classic “Hello World”. Actually, heck, let’s be adventurous! We’ll make it write “Hello Flash!” in nice friendly letters.
Go to your init() function just below the point where it says “entry point” in comment marks. This is where we’ll be writing our code. Why not do stuff in Main(), you may ask? Well, Flash has a few funny problems with initialising stuff before it’s properly added to the stage, and the Main instance has to be added just like everything else. Don’t worry about this technicality too much – the code stub provided will make sure that it automatically adds itself before it does anything, so just stick to that friendly little “entry point” reminder until you know enough ActionScript to screw about properly.
Let’s throw in the following lines of code:
var myText: TextField = new TextField(); myText.text = "Hello Flash!"; stage.addChild(myText);
These lines, in order, do the following:
- Create a new reference to a text object, then instantiate it. This means that somewhere in the tiny little universe of your Flash project, there will now be a little man with a sign pointing at something and going “Look! I’ve got a textbox here that you can use!”
- We’ve just told the little man to go with a pencil and etch something into the textbox. Because it doesn’t have anything in it yet.
- Now we’ve grabbed our stage object and, as mentioned earlier, added the text object as a child. So now our little man is no longer floating around – he’s been put onto the stage to perform for a great big audience, using his talents as a Professional Textbox Tamer to wow the crowd. Amazing stuff.
Right, let’s attempt a project build so that we can run this thing. Go to Project > Build Project in the top menu.
Uh-oh. You divided by zero, didn’t you?
Uh oh. Looks like the program threw some errors.
Fortunately, these ones are easy to fix. Go to the “import” lines in your code again. Remember that it was mentioned how these had this sort-of ability to extend the command set of your program? Well, we need to extend it now to recognise these text objects. So write this line with the other imports:
There we go! Try building the project again. It should go without a hitch. If there ARE problems, make sure that you’re using the code template given to you by FlashDevelop, and that the only thing you’re doing is inserting the lines circled in red. Also check that you’ve kept your “package” line at the top (not indicated in the screenshot below, so be warned).
Once the build is complete, run your project.
Brilliant, you’ve made your first Flash application, and you did it without loads of money!
As a final parting shot: tweaking some of the output properties is really easy to do with FlashDevelop, and you may want to remember these for future reference. Click on the rightmost icon at the top of the Project window to get access to project properties. This will offer various output options (and many other adjustments) which developers should probably have a look at.
Now, use this beginner’s guide as a springboard, look up coding tutorials on the Internet (make sure that they deal with ActionScript 3, and not the Adobe Flash creator application or something else) and learn how to create your own Flash games like a pro. It’s a fun and rewarding language that, as you may soon discover, is powerful enough to do a great many things and reach a whole lot of people. Happy scripting!