— tomauger.com

Getting started with ActionScript 3 and Flash using FlashDevelop

FlashDevelop_glossySo you’ve done your research and based on your use cases you think Flash development is the way to go. Flash is by no means a dead horse: sure, you can’t develop web-based Flash content and expect it to display (at all) on iOS mobile devices; sure HTML5 + JavaScript + Canvas seems like a pretty good idea (some time in the future); but you know what? Being able to easily, rapidly and often visually develop and deploy apps and games to the web (SWF), desktop (Air) and all major mobile platforms (Air for Mobile) sounds like a pretty good deal to me.

Okay, so you’re cheap. Don’t be shy: admit it. The price tag of Adobe Suite is a little daunting and you don’t have some $500 to get in the game and try it out. This is precisely why God invented the Open Source movement. Welcome: FlashDevelop.

In this short tutorial, written (and I’m not even kidding) with my mother as the intended target audience, we’re going to cover the very very (very) basics of doing some (extremely simple) stuff in Flash using all Open Source stuff, and not a single piece of Adobe software. (Well, you may want to do some Photoshop to create the graphics – go get yourself Photoshop CS2 for free from Adobe.)

What are we going to learn?

In this tutorial I will be covering:

  1. Downloading and installing FlashDevelop (and dependencies)
  2. Using FlashDevelop to create and compile a simple AS3 (ActionScript 3) project
  3. Embedding and using graphics (bitmaps)

I’m deliberately keeping the scope of this tutorial tight and focused. There’s so much to cover, but this will be enough for the first round.


FlashDevelop (www.flashdevelop.org) is a completely free, Open Source, development environment for creating software using Flash technology. This is all possible because Adobe open sourced the Flash runtime and the AIR software development kit (SDK) that is used to turn ActionScript 3 source code into compiled executable bytecode. That meant that ActionScript 3 programmers no longer had to rely on purchasing commercial products from Adobe in order to create executable content (software) using ActionScript 3 and Flash-based technologies. Thanks Adobe!

I own the full Adobe CreativeSuite (I have a subscription to Adobe Creative Cloud, which allows me to download and use the absoloute latest version of every single piece of Adobe software) and yet I still prefer FlashDevelop for any pure ActionScript 3 development project. I use FlashDevelop professionally and recreationally for projects from interactive demos to online games to app development for iOS (Apple) and Android. I also donate to the project, and you should too if you find yourself using it a lot!

What’s an IDE?

IDE stands for “Integrated Development Environment” and it refers to a piece of software that you use for software development (programming). An IDE includes the following:

  • A good Code Editor that allows you to type your source code
  • A way of managing and organizing Projects
  • A way of compiling and executing the code that you create
  • A way of testing and debugging the code if it has errors

Using an IDE is usually preferable to just using a code editor because it’s more convenient, keeps everything organized and in one place, and usually offers substantial perks and time-saving features that become indispensable to programmers. If you’re interested in a nice tutorial that covers all the major features that makes FlashDevelop great, here’s an older one on Tutsplus.

 Step 1: Downloading and Installing FlashDevelop

FlashDevelop itself is built using the Java programming language. As such, it requires that you have the Java runtime installed on your computer. It’s likely that you already have this installed, but let’s make sure you have the latest version. What you need is the Java SE Runtime. A quick Google search will reveal the download location, but don’t bother: there’s a direct link in the steps below.

  1. Download the Java SE Runtime (at the time of this post, JRE 7)
  2. Accept the License Agreement on the page
  3. Choose the version that’s most appropriate to you (Windows x86 – 32 bit, or Windows x64 – 64 bit; if you’re not sure, choose the x86 version)
  4. Install it.
  5. Mac OSX users are a bit out of luck here, but you’re running BootCamp, aren’t you? Otherwise, good luck with this port or use Philippe’s Bridge.
  6. Download the latest FlashDevelop (as of this post, Download FlashDevelop 4.2.4 RTM) or look for the latest download link on the home page.
  7. Install it.
  8. It will ask if you wish to download the latest Adobe Flex SDK. Yes, you want this, otherwise you have to get it yourself.
  9. Download and install the latest Flash Player with Debugger. You want the ActiveX control content debugger (for IE).
  10. You should be ready to launch FlashDevelop!

Step 2: Your First AS3 Project with FlashDevelop

Okay, assuming all went well, you should be ready to launch FlashDevelop and start coding! If things didn’t go well, well…. it’s kind of hard to anticipate what might have gone wrong. Make sure you read all the error messages carefully.

One thing that happened to me was that FlashDevelop was unable to download the Adobe Flex SDK. It needs this to be able to actually compile your source code (that you type) into the executable bytecode (ie: the .swf file that you can double-click on to actually run your program!). In that case I downloaded the Adobe Flex SDK and manually installed it to an easy-to-find folder that I created right on my C:\ drive. You then have to tell FlashDevelop where it is by going to Tools > Program Settings and selecting “AS3Context” in the left-hand menu. Then look for “Installed Flex SDKs, click on the little “…” button on the right and paste the actual path to the SDK that you downloaded.

Okay, assuming everything went right, let’s create a new Project!

A Project is basically nothing more than a directory that contains all your source code, libraries and other assets specific to your project. It also contains a small configuration file that FlashDevelop uses to store the settings particular to that project. If we make sure to choose the correct Project Type when we create a new Project, FlashDevelop should set this folder up for you automatically with everything in it that you need to get your first program running by just modifying a few lines of code!

  1. Launch FlashDevelop!
  2. You’ll see the Welcome Screen.
  3. Consider Donating to the project.
  4. Using the menu at the top of your screen choose Project > New Project
  5. The New Project wizard will get you going. For this tutorial we’ll create a new AS3 Project. There’s all sorts of other cool templates here, but the AS3 Project is the most pure, barebones and uncluttered development workflow that doesn’t require any commercial software (like Adobe Flash) to work!
  6. In the Name field, give your project a name. It’s traditional to use UpperCamelCase (also known as PascalCase) when naming projects. In other words don’t put spaces between words (smoosh them together) and use Upper Case for each word. So, if you wanted to name your project “My cool project” you should name it MyCoolProject. Got it? Do it.
  7. Choose an appropriate Location on your hard drive to store your project.
  8. Make sure that the Create directory for project is checked – this will create a folder inside your designated location (see the previous step) with the exact same name as your project name.
  9. Press OK. FlashDevelop will now copy all the files it will need into that folder. So easy!

 Step 3: Exploring your Project Structure

So now it’s time to familiarize yourself with the FlashDevelop user interface (UI), or at least the most important parts! Like many IDEs, FlashDevelop splits up your screen real estate into multiple panes. Panes are like windows, in that they are independent of one another, can be resized, and even moved around. The default layout for FlashDevelop is to have a large Code Pane on the left, which currently is showing the Welcome Page, but will eventually show the code that you will be editing and typing; an Output Pane at the bottom, that will show debugging results, error messages and any output that your code traces out; and the Project Pane on the right, which is how you navigate through the file structure that FlashDevelop set up for you when you created the new project.

Let’s explore your project. If you created the default AS3 Project in the previous step, you will see the following folders in your Project Pane:

  • YourProjectName (AS3)
    • bin – Contains your binary files: this is where FlashDevelop puts your compiled executable when you “run” your program
    • lib – (currently empty) Contains library items such as external libraries and pre-compiled SWC code libraries.
    • src – Contains your source files: this will be mostly your .as (ActionScript 3) files that you write specifically for this project

Currently, only bin and src have stuff in them – you can tell because they have a little [+] icon next to them, Windows Explorer-style.

  1. Click the [+] next to the bin folder. You can see that FlashDevelop has populated this folder with a bunch of files. These can all be used after you compile your program. At the moment, there’s not much to do here.
  2. Click the [+] next to the src folder. Currently this only has one file in it: Main.as. This is your main entry point and is the file that FlashDevelop has created for you and designated as the entry point for your program. Some AS3 projects put all their code inside Main.as and be done with it. Most, however, separate functional bits of code into subdirectories and lots of smaller .as files called Class Files. But we can get into all that stuff later.
  3. Double-click Main.as to open it up into your Code Pane.
  4. A new tab is created inside your Code Pane. You’ll notice that “Start Page” is still there in a tab. Just click a tab, and that tab will fill the Code Pane area.
  5. Let’s close up the Start Page since we really don’t need it right now. Right-click the Start Page tab and choose Close.
  6. Now only the Main.as tab is showing in the Code Pane.
  7. Shall we see if everything is set up correctly? Let’s compile this code (even though it doesn’t currently do anything – I know, lots of lines of code to accomplish sweet-jack-all, but hey…
  8. Click the Test Project button in the top ribbon of icons. This is the button with the little blue arrow. An alternative (that I always use) is to press CTRL+Enter instead.
  9. Your Output Pane (at the bottom of your screen) will start to show some incomprehensible lines, describing what the compiler is doing. After a few moments, you’ll either get some kind of error message (Bad News!) or you’ll see a blank window pop up on your screen, with “Adobe Flash Player” in the top right corner. That’s your program. Let’s celebrate!
  10. Behind your Flash Player window you may notice that the FlashDevelop panel layout has changed. It’s switched to debugging context and has a lot more panes in there, that are only useful when there’s a program actually running. Once you close up the Adobe Flash Player window, this should go away and you should return to the familiar 3-pane layout that I described earlier in this section.
  11. Go ahead and close the Adobe FlashPlayer window. Notice how the Debugging Panes disappear and everything goes back to normal.

It’s important to remember, as you test your programs, that you really shouldn’t edit your programs while they are running. Get used to being able to tell the difference between Editing (3-pane) context and Debugging context. If you’re in Debugging context and want to start editing your code, locate the currently running Flash Player instance in your computer’s running tasks and close it. This should automatically tell FlashDevelop to exit Debugging context and you should be good to go.

Step 4: Hello World!

Okay, that was pretty boring, and frankly, if you’re a little skeptical that your program actually ran, I wouldn’t blame you. A blank screen isn’t terribly impressive.

Well, don’t get your hopes up, our first step will simply be to have FlashDevelop trace out some debugging text to let us know our program is alive! Nothing too impressive either, but it’s a first step. I’ll get you to modify the code inside Main.as, we’ll test it out, and then we can look into what’s actually going on with the code that FlashDevelop created for you and put inside Main.as.

  1. Inside Main.as, look through the code. On line 22 you’ll see the following: // entry point. It should be in green. This is a comment and is intended to be a note to any programmer reading the code. Comments are not executed by the compiler, and do not affect the program in any way.
  2. Place your cursor (by clicking the mouse) after the word “point” on the line that says “// entry point”
  3. Now press Enter, twice. This drops you down two lines.
  4. Now type the following:
    trace Hello, World!
  5. Click the Test Project button again, or press CTRL+Enter.
  6. Yikes! A Syntax Error! Sorry. I made you do that. What’s happened is that the line off code you typed is not actually valid ActionScript 3 syntax, and so when the compiler encountered that line, it panicked and threw up an error for you to fix. The Output Pane was replaced with the Results Pane.
  7. Let’s take a moment to orient ourselves to the Results pane. First of all, the Output panes are roll-up panes. There are actually 5 tabs that share the ame physical space in the Output pane: the Logs, Layouts, Output, Results and Tasks panes. Only one will be showing at any time. If you roll your mouse over the Output tab at the very bottom of the screen, you’ll see your Output pane roll up. If you roll your mouse away, it will eventually roll back down. If you lose your Results pane and want to see what that error was again, look for it in the list of tabs at the bottom of the Output pane.
  8. So now let’s look at this Result. A (!) in red indicates that this is a Compiler Error – it actually stopped the compiler from completing its compilation and your program never even got the chance to run. There are also Warnings and Messages, which will not stop the compiler from running your program.
  9. Next to the (!) you’ll see a number (24). That’s the line number of the line that contains the bad code. This is invaluable. Look up at your code listing in Main.as and sure enough, the line number corresponds to the line of code that you entered.
  10. Next we’ll see the actual error message. This, sadly, is far less helpful and is one of the main frustrations of ActionScript development: the compiler is notorious for obtuse, obscure and otherwise obfuscated error messages. If you’re relying on the compiler error message to tell you what you did wrong, you’re in for a long, long road my friend.
  11. Okay, let’s try something else. Go back to your Main.as code and edit the erroneous line. We want it to say:
    trace "Hello, World!"
  12. Right. Now Test your program again. Success! The Adobe Flash Player window opens up again, letting you know your program compiled and ran. But wait. Did you see the Results tab pop up? Something’s not right.
  13. Close your Adobe Flash Player window and exit Debugging mode.
  14. Roll your mouse over the Results tab. This time we got a Warning. The compiler still ran, but it detected that something was Funky in your code and decided to let you know, in case it’s not what you meant to do.
  15. Indeed, this code is not correct. Next time, we’ll get it right. I promise. Edit Main.as again and fix the erroneous line to say:
    trace ("Hello, World!");
  16. Now Test your project once more.
  17. Sigh. The blank window again. But wait! Look at your Output Pane. (Depending on your FlashDevelop configuration you may need to roll over the Output tab at the bottom of the Output pane). Do you see it? The time-honoured words “Hello World” should appear in the Output Pane’s display.
  18. You did it! Don’t forget to close the Adobe Flash Player window.

Pinning the Output Pane

If you had to roll your mouse over the Output pane in order to see your Hello World text, you might wish to pin the pane open. That will keep it open most of the time. This is useful if you’re going to be traceing lots of messages to yourself as your develop your program. I use it all the time to help me figure out what’s going on in my code.

  1. Roll over the Output tab to roll up the Output pane. At the far right of the Output pane you’ll see a little Thumbtack or Pin icon, right next to the classic X close icon. 
  2. Click the Pin icon, so it’s no longer sideways, but just facing straight down.
  3. The Output Pane is now pinned and should not roll back down when you mouse away from it.

Step 5: Understanding the structure of Main.as

Okay, you’ve got some things working. Let’s understand why things are working. Basically, I’m going to dissect the parts of the Main.as file so you have a better understanding of the structure. Luckily, you’ll be letting FlashDevelop do most of the heavy lifting whenever you create a new project or a new Class file, so you probably won’t have to type this stuff in very often. But it’s absolutely vital, as you learn more ActionScript 3, to understand this structure.

Here’s the code listing for Main.as:

	import flash.display.Sprite;
	import flash.events.Event;
	 * ...
	 * @author Tom Auger
	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
			trace ("Hello, World!");
  1. package
    The first line sets up the package that your code falls under. The package is the namespace of your code and is used to separate your code from other code that your program might be using, such as library code developed by others. We’re not using a package (there’s no text to the right of the keyword “package”), so we’re using the default namespace. The package also describes where inside the src folder your .as file is supposed to reside. If you try to get clever and put an identifier next to the keyword package and save your file, FlashDevelop will grouse and will actually remove your text. This is because the package name must match the folder structure and in this case it no longer does. More on packages some other time.
  2. {
    The curly bracket (“brace“) is one of the most important structural elements in ActionScript 3 and many other popular languages such as C, Java and JavaScript. It indicates a block of code, and is always matched with a corresponding closing bracket “}” (see line 29 for the closing bracket of this block). This block is the package block and says that all the code that sits between the opening “{” and closing “}” braces belong to the package identified on line 1. You’ll also notice that all the code inside these braces are indented. This is to help the programmer visually identify that this code is nested and belongs within the braces.
  3. import flash.display.Sprite;
    The funny thing about the way the ActionScript Compiler works, is that it knows next to nothing about ActionScript unless you import it first. On this line, FlashDevelop is importing the native object type Sprite, because it wants to use that object later on in the code (line 10). For every Flash object that you’re going to use in your code, you have to have a corresponding import statement at the top of the file (inside the package) to tell the compiler to go fetch that code and compile it in. Fortunately, FlashDevelop inserts these lines in for you (most of the time), so you’ll rarely be writing your own import lines.
  4. import flash.events.Event;
    Same as line 3, except we’re importing the Event object that’s used on lines 16, 19 and 21. Notice that we only have to import it once, even though we use Event multiple times later in the code.
  5. (blank line for readability)
  6. /**
    This is the beginning of a ASDoc comment block. This is not a required bit of code, but something FlashDevelop puts in there to be helpful. Anything between this line and the closing “*/” is ignored by the compiler
  7. * …
    FlashDevelop is suggesting that maybe you type in a description for your program here. Feel free to put whatever you want in there.
  8. * @author Your name
    FlashDevelop has helpfully inserted what it thinks the author of this code is. Feel free to change this or ignore it altogether.
  9. */
    Closes the ASDoc comment block
  10. public class Main extends Sprite
    Okay, now it gets interesting. This important line identifies the Class structure. At the moment I won’t go into details, other than to say that the name of the class (in this case “Main”) MUST CORRESPOND to the file name (in this case “Main.as”). If you change one, you must change the other.
  11. {
    This brace opens the class block. All the code between this brace and the corresponding closing brace “}” on line 27 fall inside this class. Note that the code after this brace is even further indented to show it’s nested inside the class block.
  12. (blank line for readability)
  13. public function Main():void
    This is the “real” entry point of your program! This special function, which has the exact same name as your class name (Main) is called the constructor for your class. This function gets automatically called by Adobe Flash Player as soon as its finished setting itself up. If you put code inside this function it will get run when your program starts up.
  14. {
    Opening brace for the Main function block. Code inside this block is even further indented
  15. if (stage) init();
    Well! The first line of custom (non-required) code. FlashDevelop puts this (and the next) line of code in to make a more reliable Entry Point for your code. You could remove this line (and the next) and your program would still run, but unless you know how the Flash runtime works really well, you might be stumped by certain situations where your code doesn’t do what you expect. This line and the next few bits of code are all designed to give you a reliable entry point that will only execute your code once everything has been properly loaded and initialized. This code basically says: “if the ‘stage’ object exists, then execute the init() function”
  16. else addEventListener(Event.ADDED_TO_STAGE, init);
    This is the second half of the statement started on line 15. If the ‘stage’ object does NOT yet exist, we’re going to wait until it does. So we register an event listener that basically defines a condition (“event”) that we’re going to wait for (“ADDED_TO_STAGE”). Only when that even actually happens, will the function “init” be called. So, either the stage exists already, and we jump to init() (line 15) or it doesn’t and we wait for it to exist and then jump to init() (line 16)
  17. }
    Oooo! Our first closing block. This terminates the “Main” function. If it weren’t for lines 15 and 16, that would be the end of it and our program would exit.
  18. (blank space for readability)
  19. private function init(e:Event = null):void
    Here FlashDevelop has inserted our “init” function that gets called either by line 15, or by the event listener on line 16. Either way, once we get here, we know we have a “stage” object, which is required in order to be able to draw stuff and put graphics up on the screen, which, after all, is what Flash development is really all about, right? It’s outside the scope of this tutorial to explain the specific syntax of this function signature. I’ll leave that to the experts, or write future tutorials if more people than my Mom read this (sorry Mom – this stuff takes a lot of time! I’ve been at it for 5 hours so far…)
  20. {
    Opening brace for the init() function
  21. removeEventListener(Event.ADDED_TO_STAGE, init);
    FlashDevelop very nicely cleaning up after itself so that the memory used by the event listener defined on line 16 can be freed up if needed.
  22. // entry point
    A comment line. FlashDevelop kindly telling us that we’re Good To Go! Anything after this line is our business!
  23. (blank line for readability)
  24. trace (“Hello, World”);
    The trace() function tells the Debug Flash Player to spit some output to our Output panel. If you send this program to your friend and she runs the program, she won’t be running the program in the Debug Flash Player, and so she won’t see this output. trace() statements are for developer’s eyes only and are useful for displaying runtime information that gives you some clues as to what your program is doing now! Note that:

    • “Hello World!” must sit inside the round brackets “()”. This is the argument or parameter that is passed to the trace function
    • “Hello World!” must be enclosed in quotation marks, usually double quote marks “. This lets the compiler know that it should not try to look for a function called Hello and another called World!, but instead, treat that whole piece as a string literal, in other words – just treat it like the text that you typed!
  25. }
    Closing brace for the init() function
  26. (blank line for readability)
  27. }
    Closing brace for the Main class
  28. (blank line for readability)
  29. }
    Closing brace for the package


Part 5: Embedding Graphics

Okay, Flash development isn’t all that much fun unless we have some graphics on the screen. One of the weirder parts of FlashDevelop is figuring out how to get graphics and assets into your Project. So I’ll cover the most basic use-case: getting graphics you created as JPEGs or PNGs (for example, with Photoshop) into your Project so that you can place them and manipulate them within your program!

So first, you’ll need to take a break (you probably need one anyway) and create a little graphic, or download something from the interwebs. Just don’t make it too big. 200px x 200px should be fine, or thereabouts. Your mileage may vary! Make sure this file is a PNG or JPG file.

Okay, you have your graphic file ready? Let’s begin.

  1. Let’s create a folder inside our Project to store our graphics. In keeping with the three-letter naming convention, let’s call this folder img.
  2. In the Project pane, right-click the name of your poject (the very first entry in the Project tab, with an icon that looks kinda like a LEGO block.)
  3. Choose Add >New Folder
  4. Name the folder img (you can actually name it anything you like!)
  5. Now, on your computer’s desktop, locate the image file you created. You have two choices: use the Windows Explorer to find your project folder and drag the image file into the img folder you just created, or drag the image file over top of the img folder within FlashDevelop’s Project pane. Yes, you can actually drag a file from your desktop into the Project pane and FlashDevelop will copy that file for you. Very sweet.
  6. You’ll know this was successful, when the img folder now has your graphic inside it, in the Project pane.
  7. Now, inside the Main.as code editor, with your mouse, place your cursor on the empty line 13, right after the line that contains the opening brace for your Main class.
  8. In the Project pane, right-click on the image file inside the img folder that you just created.
  9. Choose “Generate Embed Code”
  10. FlashDevelop automatically inserts the following line of code into your Main.as code editor:
  11. Make sure that this [Embed] code sits inside your Main class. See my code example below to verify your results if you’re getting errors.
  12. Press Enter to drop down to the next line
  13. Type the following:
    internal var MyImage:Class;
  14. It’s really important that this code is on the line DIRECTLY UNDERNEATH your [Embed] code.
  15. Press Enter to drop down a line for readability.
  16. What you’ve done is you’ve linked the [Embed]ded graphic to this new class you called “MyImage”. From now on, when you say “MyImage”, the Flash compiler knows you’re referring to that graphic.
  17. Now, go down to line 26 – the one that has your “Hello World” on it. Press Enter to drop down a line.
  18. It’s important that you type these lines rather than paste them, because when you type them, FlashDevelop will automatically generate the import lines it needs. If you paste the code instead, the import lines will not be generated and you will get errors when you try to compile and run your code.
  19. Type the following:
    var myBitmap:Bitm
  20. Do you notice that once you typed the second “Bitm” FlashDevelop pops up a “hint” list? The first item in that list is “flash.display.Bitmap”. FlashDevelop has scoured all the Flash objects that are available for importing and based on what you typed, selected the most likely candidate.
  21. Press Enter to accept FlashDevelop’s suggestion. This auto-completes the word “Bitmap” in your code, but also (and more importantly) adds the “import flash.display.Bitmap;” code to line 3 at the top of your Main.as code.
  22. Keep typing.
    var myBitmap:Bitmap = new My
  23. FlashDevelop’s auto-complete pops up again and helpfully suggests you might want to insert MyImage here. Exactly! press Enter. FlashDevelop knows about MyImage, because you declared it on line 14 above! Are you loving FlashDevelop yet?
  24. Finish the line:
    var myBitmap:Bitmap = new MyImage;
  25. Please don’t forget the semicolon “;” at the end of the line. The semicolon is a required syntax element and you will get errors if you forget it!
  26. Now press Enter to drop down a line.
  27. Now type (you can use the auto-complete if you want!)
    addChild( myBitmap );
  28. That’s it! Test your code. With any luck, you’ll see your image in the top-left corner of the Adobe Flash Player window!

If you ran into hiccups, check your code against mine, below. Good luck!

	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.Event;
	 * ...
	 * @author Tom Auger
	public class Main extends Sprite 
		[Embed(source = "../img/FlashDevelop_glossy.png")]
		internal var MyImage:Class;
		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
			trace ("Hello, World!");
			var myBitmap:Bitmap = new MyImage;
			addChild( myBitmap );
  • Marion A.

    That is encouraging, Thomas. Your father wishes me good luck.
    But seriously, it looks like great help to me to start getting back into “working behind the scene”

    Thanks, and I will keep you posted. Mmmmmmmmmm

  • Marion A.

    Thanks, It Worked!
    Now how does it move?????????

  • Syed Wasi Haider

    Hi Thomas,

    This tutorial has been really helpful in getting me started. I want to develop apps for android so I was wondering if you could talk a little bit more about that.


  • Colin

    Desperately need a tutorial for moving projects such as this Into air. You seem great at doing well explained tuts: How does one take an already built FD project with no AIR in it at all, and get it to work in AIR / use AIR extensions for controller support and such?>

  • http://www.tomauger.com Tom Auger

    Hm, the problem is less about how to get it to compile for AIR – I would simply start a new AIR project from scratch , then copy in my classes and other SRC files from your previous project. The problem is more about making sure your existing code is leveraging the classes and methods for the AIR target. Having said that, typically code not created for AIR will compile for an AIR target without problems. It’s going the other way that can be problematic.

  • How Horrifying

    How did your mother feel reading this, knowing that she was the target audience?

  • http://www.tomauger.com Tom Auger

    See her comments, below. Why, what’s your problem?

  • Great tutorial

    I had to comment and say that I already captured a lot of this information from a flash develop tutorial but none of the “why”. This tutorial helped make some fundamentals of AS3 that you likely can’t find simplified on the internet quite clear without having to get a CSE degree.

    Judging by monthly posts you appear quite busy, but if you have any links to pure AS3 coding tutorials or interest in doing some more, I would be grateful.
    I’ll check back here.


  • Tutorial
  • Pizza

    Is there a part 2 of this? And maybe a 3 and a 4 and so on? This tutorial was exactly what I was looking for.

  • Chillin Hippo

    Awesome tutorial!
    I have a problem though. My FlashDevelop is acting up, I cannot see the trace text in the output, nor can I use brake points (I can place them but nothing happens). I see no difference in FlashDevelop when it should be in “debug mode” (as you said it would be different). And to finish it all up, aparently my codes still work (I could make the picture show). Do you know why this is and what I can/should do about it?!?

  • EmDash

    This is, without a doubt, the best programming tutorial I have ever seen. I prefer video tutorials because I can learn faster from them, but this was incredibly thorough. This was fantastic, I honestly haven’t ever seen a better tutorial for programming, you should write more, I’d pay you to write more. You should write them for a living, start up a patreon or something, who knows. Become a programming teacher. This was really a great tutorial and I hope you make more. I’d love to learn from you.

  • Xan

    Thanks for this tutorial – If you can keep up with this type of writing, you should consider writing tutorial books – it’s much better to parse this than those so called tutorials out there =D

  • A Very Grateful Guy

    I’m so grateful for you’re amazingly good tutorial. If you didn’t exist, I might’ve quit trying to be a developer.

  • http://www.tomauger.com Tom Auger

    Wow, thanks for the great comment. You’re right, stoopit busy with work @ Zeitguys (http://zeitguys.com) but I should definitely try to do more. Currently teaching a dev course for PHP / WordPress so any tuts I do in the near future will more likely be focused on PHP / JS but we’ll see. Encouragement from readers like you is one great way to motivate a guy to stay up late and write a post! Thanks again!

  • A First-Timer’s Must-Read!

    This is a fantastic tutorial. As somebody with next to no programming knowledge (and zero experience), this has been a huge step in getting me past the intimidating face of FlashDevelop, and multiple supporting downloads.

  • http://www.tomauger.com Tom Auger

    Hey thanks! These kind of comments make me want to find the time to make more of these tutorials. Appreciate you taking the time to comment!

  • Ganesh Patil

    Really great tutorial. Plz plz plz….let me know when you write next parts.

  • Mikkel

    Great Tutorial, thanks a lot for taking the time to make this. Helped me identify what I had done wrong setting up for as3 development.

    However do note that the install procedure has changed slightly since this was written and that there no longer is a lib folder in the project. Instead there is a References folder.

  • Beatriz Ospina

    I am new at this I do not get the lib item, I know I can put it in but I do not know where, if under something.

  • part1

    I have just stared with FlashDevelop and ActiveScript. In my little test app I try to render TextArea control from mx library. My code compiles but when I run it Flash shows just blank page when my code. Interestingly enough, if I replace mx.controls.TextArea with flash.text.TextField it actually works OK. I placed mx.swc in the same bin folder where my project’s swc exists but it did not help.

    Here is the fragment of my test-project code that does not produce any visual result :

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

    // entry point
    var aText: mx.controls.TextArea = new mx.controls.TextArea();
    aText.x = 50;
    aText.y = 350;
    aText.width = 400;
    aText.height = 250;
    aText.wordWrap = true;
    aText.visible = true;
    aText.htmlText = ‘Lorem ipsum TEST

    addChild( aText );
    Any help would be greatly appreciated.
    Thank you

  • http://www.tomauger.com Tom Auger

    I would recommend StackOverflow.com for this kind of question! You’ll get a lot more (and quicker support)! Good luck.

  • Michael Leon Treat

    I have been trying to learn this stuff forever! This was a GREAT tutorial. I can’t tell you how happy I am that I finally got something to happen! I’ve been excited to learn to develop flash games but I had no clue where to start. I floundered my way to finding out about FlashDevelop, but I’ve uninstalled it 2 times already because I couldn’t get anywhere with it. This has helped me out a ton. Thank you so much for the great step by step instruction!!

  • http://www.tomauger.com Tom Auger

    Thanks Michael! Your encouragement might just get me to try to find the time to post more!

  • Bruce

    You did a great job. I think this is the best tutorial for as3+flashdevelop.
    Thanks a lot