FlashDevelop: A Must-Have for Flash Developers

FlashDevelop Logo

And now for another programming related article, I’d like to recommend an essential tool to all Flash Developers out there called FlashDevelop. It is an open source code editor available for free at http://www.flashdevelop.org/

The best part about this software in my opinion, is that it allows you to code Flash apps and games without needing to pay for the Flash IDE. Currently I do still use Flash CS5 but only for graphics and exporting executables – lately I’ve started to use solely FlashDevelop for everything else. Keep in mind that I’ve been using Flash since MX 2004, and as much as I like Flash you learn to hate the IDE after years of bugs, crashing, and lost work…

Anyway, I will list the features I find most attractive as a Flash developer:

  • It’s Free
  • Code auto-completion as you type (far above the Flash IDE capability)
  • Very customizable (Tons of options and plug-ins)
  • Fast exporting (none of the overhead of Flash IDE)
  • Simplicity (Make a project file, write code, done)

I could go into more detail but if you code ActionScript and haven’t heard of this program I want you to download it and see for yourself. Even if you don’t use its more advanced features it’s still a great code editor for AS2/AS3. When you install, just make sure at least these 3 boxes are checked:

FlashDevelop Install Screen(Click to enlarge)

The Flex SDK is what allows you to export SWF files without needing the Flash IDE. The AIR SDK allows you to alternatively export your Flash project in the Adobe AIR format, a growing platform for desktop-based Flash games. Lastly, the Flash Player included with Flash Develop is what allows you to debug your projects if you are not testing through the classic Flash IDE.

It’s important to understand that the Flash platform itself is no longer something that is only accessible via Adobe’s latest Creative Suite products. The Flex SDK itself contains all of the resources needed to make a Flash game, and I feel that a lot of newcomers to Flash may not realize this which is the main reason for this article. Though I have to admit, the Flash IDE makes it a whole lot easier to handle graphics and animations….

A Quick “Hello World” App

To conclude this article I will write a simple HelloWorld application so you can at least know how to get started. I’ll be posting up things like code samples and tutorials at a different time. Assuming you installed FlashDevelop as described above, you should be able to start a new project right away. Simply go to Project->New Project in the menu bar, and fill out the form as follows:

FlashDevelop New Project Window(Click to enlarge)

I have chosen “AS3 Project”, named it “HelloWorld”, and chose a folder for it on my computer. The “Package” part can be left blank. Then click OK.

Next, you should have a Project panel on the right. If you don’t see it, on the menu bar click View->Project Manager:

Flash Develop Project Window(Click to enlarge)

Several files and folders have been generated for you, but we are only concerned with Main.as which is set to your Document Class by default. This is where your Flash application begins when you test it. If you open up Main.as there will be some pre-generated code inside. We can modify it to add a “Hello World” text box to the screen as follows:

package 
{
	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);
			// entry point

			//At this point, your code is guaranteed to be ready to go

			//Make the text box
			var textBox:TextField = new TextField();
			textBox.text = "Hello World!";

			//Move the text box to a decent spot
			textBox.x = 150;
			textBox.y = 150;

			//Add to stage
			addChild(textBox);
		}
	}
}

And that’s it! You can click the Test Movie button and you should see the following:

FlashDevelop Test Movie(Click to Enlarge)

All done. If you happened to hand-type the code, you might notice that while typing out “Textfield” FlashDevelop auto-generates the “import flash.text.TextField;” at the top of the file. This is one of the things I love about FlashDevelop since you never have to worry about missing references which can cause you serious headaches.

Anyway, hopefully this article gets you interested in FlashDevelop. I’m not going to go any further into actual coding since I only want to demonstrate how simple it is to set up. As I said above, actual programming tutorials will appear in future articles.