Flash for Free 51


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:

  1. Securing (free) software
  2. Project structure and IDE environment
  3. 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.

FlashDevelop Integrated Development Environment. Fancy.

FlashDevelop Integrated Development Environment. Fancy.

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.

SDK location

SDK location

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.

New project

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:

Project structure

Project structure

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.

New, blank project

New, blank project

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:

  1. 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!”
  2. 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.
  3. 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. You divided by zero, didn't you?

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:

	import flash.text.TextField;

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).

We keep telling Nandrew not to draw red lines on his screen. He never listens. He

We keep telling Nandrew not to draw red lines on his screen. He never listens. He's not even any good at it.

Once the build is complete, run your project.

Hey, at least it's not 'Hello WORLD'.

Hey, at least it's not 'Hello WORLD'.

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.

Project properties

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!


About Nandrew

Rodain Joubert is a South African game developer based in Cape Town, currently working for QCF Design. He likes his job. He likes being opinionated on the Internet. He likes fighting evil with his heat ray vision. And he also likes cats. [Articles]

51 thoughts on “Flash for Free

  • David M.

    Awesome Tut! I’m a completely wet-behind-the-ears FlashDevelop (let alone AS3) newbie and THIS is totally the right start. It’s also a lot easier to follow than the FlashDevelop installation notes & guidelines.

    Thank you!
    David M.

  • James

    I’ve already done following your procedure. But I’ve got build fail.

    thanks,

  • xraser

    i have looked all over the web and this is the best of them all for a beginner

    • Nandrew

      Thanks! If you’re interested in reading further into Flash, don’t pass up the opportunity to head over to http://www.gamepoetry.com/blog/ — it’s a very useful blog with some very useful articles, and served as a major inspiration for this piece.

  • Ace Fire6

    This is a very helpful article but when I try to run it it shows up blank any advice? Here is my code:

    package
    {
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.text.TextField;

    /**
    * ...
    * @author ****** ******
    */
    public class Main extends Sprite
    {

    public function Main():void
    {
    if (stage) init();
    else addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(e:Event = null):void
    {
    removeEventListener(Event.ADDED_TO_STAGE, init);
    // entry point
    var myText: TextField = new TextField();
    myText.text = "Hello lash!";
    stage.addChild(myText);
    }
    }
    }

    • Nandrew

      This may or may not have a simple solution.

      I *think* you may have accidentally produced your code inside a source file other than “Main.as”. When FlashDevelop starts a new project, it typically opens up a code window called “Untitled1”. If you don’t double-click on Main.as from the right-hand panel and work in that instead, you’ll be coding in a file that never gets called by the program!

      I strongly suspect that this is the problem: your code itself is fine, since I copy-pasted it into my dev environment and it displayed the text properly. If there’s still a problem, double-check the IDE settings outlined in this article. The Flash version given in the example is by now a bit out of date, but the advice should still apply.

      • Mark S

        That was my problem. Once I actually double clicked on Main.as, and enter the code there…Hello Flash! would display

    • sunleo

      package

      {

      import flash.display.*

      import flash.text.*

      public class Main extends MovieClip

      {

      function Main()

      {

      var myText: TextField = new TextField();

      myText.text = “Hello Flash!”;

      stage.addChild(myText)

      }

      }

      }

  • Jim

    Thanks for this article – I found it really useful.

    I ran this code – which seems to be the same as on your screenshot:

    import flash.display.Sprite;
    import flash.events.Event;
    import flash.text.TextField;

    public class Main extends Sprite
    {

    public function Main():void
    {
    if (stage) init();
    else addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init (e:Event = null):void
    {
    removeEventListener(Event.ADDED_TO_STAGE, init);

    var myText: TextField = new TextField();
    myText.text = “Hello Flash”;
    stage.addChild(myText);
    }
    }

    But when I built the project, I got this error:

    C:\DATA\My Documents\_jim\flash\FlashDevelop\src\Main.as(5): col: 1 Error: The public attribute can only be used inside a package.

    I wondered if you might be able to advise please?

    Thanks!

    • Nandrew

      Hey Jim!

      The screenshot you’re referring to chops off the top line: you need the word “package” on its own line, as well as an extra opening and closing brace to surround everything. If you’re still having problems after that, I suggest you just use the base code template that FlashDevelop *should* offer you (that’s what this article assumes as given), and simply insert the lines circled in red.

      Hope that fixes everything — let me know if you’re still struggling, I’ll check these comments for updates.

  • edixoo

    I honestly could kiss you for this. Your tutorial took me from *FLAILY-FLAILY-OMG-WHY-NO-WORKY?* to “Oh, hey! It’s doing it!” (closely followed by an embarrassing pig-squeal of victory.)

  • Nek

    This tutorial is amazing! Furthermore: you should include the doubts presented in this comments thread in the tutorial itself, because i had the same problems as the other two guys.

    • Nandrew

      Ooh, missed that comment! Thanks, it’s a good idea. I’ve made one or two minor changes in the article to remove ambiguity in these cases.

  • seanmarillion

    Thank you so very much for your help. I just needed a simple startup for learning actionscript with flashdevelop and so many sites had, well I had issues with so many sites. Thank you for your help again! I will email a company in a couple of days and say I just learned actionscript! Well I just needed to get it running. It seems like many other languages and so this gets me going! Sorry, blabbing.

  • mark

    I read through the whole thing but there was no As3 project at all so clicked default. there is no init() though so I was unable to get the project to run

  • falconi

    Hey this is really great! Easy to follow and does exactly what it says on the tin! Hopefully you’ll do more of these, since most tutorials seem to be geared towards people developing in Flash CS3/4

  • Jordan

    Hello.

    Thanks for the tutorial and all, but I’ve downloaded the SDK and I point the FlashDevelop language settings to that folder, but it never retains it (after restarting). This is actually the problem that led me to your tutorial in the first place (FD’s documentation site is rather terse, so I thought maybe I was missing something — well, actually, I’m obviously missing something; I’ve just no idea what it may be). It is the folder where the SDK resides that I’m supposed to point it to, correct? It currently resides in a folder entitled “flash projects” on my desktop (WinXP) — that is, the folder entitled flashsdk_whateverversionitis_orwhatever, with all its requisite extracted flashy SDKness.

    Thanks for any helpful enlightenments you can provide.

  • Rafael

    Thank you so much for this article!! I would have gone crazy trying to figure out by myself how to get started. You are an angel! Thanks again!

  • Herman

    Thanks a lot man! Your peek into the world of non-WYSIWYG Flash development was very informative. 🙂
    Also, auto-completion for the win!

  • Joe

    Awesome article. It’s very clear and was exactly what I was looking for to dive into FlashDevelop. Really easy to read and pretty amusing too. Thanks for writing this up!

    Possible update: I think FlashDevelop (version 3.3.2) comes with Flex SDK now. It installed it in the “FlashDevelop\Tools” directory and looks like it’s the latest to date. Good stuff.

  • nick

    SUPER new here

    first problem i have so far is that i have “untitled”, does that mean i just have to save it

    im not getting the normal start template like the one it shows in your guide, im wondering if i downloaded a newer version. so i copied the text into the given parantheses slots, and it refused to play for me

    for the files on the side, i have no src file on the side, however i have all 3 (bin, lib and src) under the folders: flash creations (self-made file like you instructed), adobeflex SDK for flashdevelop (the SDK i downloaded). there are also other folders and stuff like templates and frameworks under that folder

    need some clarification, kinda stuck now. VERY good guide!

    • Natnat

      You might be going File — New — AS3 Document if you are getting the untitled file. Instead, click the Project button (at the top of the screen, just a few buttons to the right of File) and then “New Project.” Then choose an AS3 project and name it. Make sure your right sidebar thing says Project at the top. Then you should see bin,lib, src. Double-click the Main.as to work with it.

  • Brandon

    Thank you so much! This is very, very well written. I enjoyed reading it and I love how you described the parts of the code (the man with the sign)!

  • Alex Veit

    Best tutorial ever.
    I’m wiping my tears of joy as I type in this little text box =)

  • Sam Jermy

    We need further tutorials with more commands, more detail and in the same format

    Was the first tutorial which is easy enough for a complete beginner to read and find humorous at the same time!

    Please do more (I know this was created a few years ago) or a link to similar

    Thanks

  • komirdo

    Thank you so much for this awesome tutorial!!! I was about to despair on FlashDevelop, but this tutorial made everything clear!

  • iggyvolz

    Wow. Perfect. The last tutorial I found took me HOURS to do this.

    Took me about a day the first time to get a TextField with “Hello world!” to display properly on that white background. The good news is, it’s downhill all the way to the top from there! 🙂

    • iggyvolz

      Oops, didn’t format that correctly. That quote was from Ace_Blue on Kongregate.

  • Kieran M

    Hey Rodain. Many thanks. As a total newbie, i was ready to abandon Flashdevelop because their help pages/wiki sucks! I really enjoyed your humour and style of writing and completely understood everything from the get-go. If you ever write a book on AS 3.0 with FD, let me know 🙂

  • Tijmenio

    Thanks a lot, the only thing I really needed was knowing how to set up the environment and you explained that just perfectly (as opposed to other tutorials)!

  • VylePhinder

    This is great “spring-board” tutorial. A little outdated, as I didn’t have to do the manual sdk install or anything (go, FlashDevelop!), but seriously a great springboard tutorial. The only thing this article needs is a reference to a tutorial that would be good to take from here.

  • Noble

    Thanks so much for taking the time to make this. As VylePhinder said, this is a little outdated now. Looks like Flashdevelop 4.4.1 comes with Flex SDK, though I manually installed it anyway. Also, I didn’t have to import flash.text.TextField. I don’t recall saying when to install the debuggers, so I just installed them last. Thanks again.

  • SuzieQ

    Thanks, Nandrew!

    I am a student in Web Dev Program now and looking for my internship now.
    I did not have any chance to learn this flash scripting, but one of position requires me to be able to do it.
    So, I just started installing the Flash Develop today.

    And, this tutorial is REALLY useful for me who had no idea about FLASH at all!!
    I could get the output as following your instruction.
    Thanks!

Comments are closed.