Beginner’s Guide to FlashDevelop – Basix

Two common misconceptions about Flash Professional: first, you have to buy it in order to make Flash apps and games; second, it's a decent tool for writing code. Totally untrue.

In this article, we'll see how to use the free Windows application FlashDevelop to work on Flash projects -- both with and without Flash Professional.

What's So Great About FlashDevelop?

You can create Flash projects with any text editor, so what makes FlashDevelop so special? Here are my top six favorite features:

Code Completion

Type someMovieClip.got and it'll offer gotoAndPlay() and gotoAndStop() as possible options to choose from. You can continue typing to narrow the choice down, or use the arrow keys to select a specific option, then hit the Tab key to make FlashDevelop automatically write the rest of the keyword.

Also, FlashDevelop can match text from anywhere within the keyword, so someMovieClip.pla will offer both play() and gotoAndPlay() as possible options.

Automatic Imports

Type myMovieClip = new MovieClip(); and FlashDevelop will automatically add import flash.display.MovieClip; to the correct place at the top of the class file.

This also works for classes that aren't built in to Flash, including classes that you've written yourself. If your project contains the class com.activetuts.examples.ExampleClass then you can type var myExample:com.activetuts.examples.ExampleClass; and FlashDevelop will import the class and shorten that line to var myExample:ExampleClass;. (Of course, thanks to code completion, you only need to type var myExample:com.act«Tab».ex«Tab».Cla«Tab»;.)

Our higher-level tutorials on Activetuts+ often don't explicitly mention the import statements, since we assume that you're using a code editor that takes care of this for you.

Automatic Class Creation

To create this com.activetuts.examples.ExampleClass class, you can right-click a folder within FlashDevelop and select Add | New Class...:

The New Class dialog will appear:

You can type the desired package name into the Package field (even if the \com\activetuts\examples\ folder structure doesn't exist) and the desired class name into the Name field. FlashDevelop will then create the folder structure (if needed) and a new AS file, ExampleClass.as:


package com.activetuts.examples 
{
	/**
	 * ...
	 * @author MichaelJW
	 */
	public class ExampleClass
	{
		
		public function ExampleClass() 
		{
			
		}
		
	}

}

(Note that here it's automatically added a multi-line comment with my name and space to write a little information about the class -- neat.)

If you wanted to extend an existing class -- like, say, the Rectangle class -- you could specify this in the New Class dialog by clicking the Browse... button next to the Base Class field:

If you check "Generate constructor matching base class" it'll give the class the same arguments as the Rectangle class that it extends:


package com.activetuts.examples 
{
	import flash.geom.Rectangle;
	
	/**
	 * ...
	 * @author MichaelJW
	 */
	public class SuperRectangle extends Rectangle
	{
		
		public function SuperRectangle(x:Number = 0, y:Number = 0, width:Number = 0, height:Number = 0) 
		{
			super(x, y, width, height);
			
		}
		
	}

}

Likewise, if you specified some interfaces for the class to implement, you could tell FlashDevelop to automatically create stub functions for each of the methods in those interfaces.

Automatic Object Creation

Do you ever type the name of a variable or function before you've created it? I do this all the time with event handler functions when defining a listener. I'll write something like:

1
2	menuButton.addEventListener(MouseEvent.CLICK, onClickMenuButton);

...when I haven't yet defined the onClickMenuButton() handler function.

Well, in FlashDevelop, all you have to do is move the text cursor over the as-yet-undefined keyword and press Ctrl-Shift-1 to bring up this menu:

Hit enter, and FlashDevelop will automatically create a new function, with the correct parameter set up in the signature:


public function ExampleClass() 
{
	menuButton.addEventListener(MouseEvent.CLICK, onClickMenuButton);
}

private function onClickMenuButton(event:MouseEvent):void 
{
	
}

You can do the same for variables you haven't defined, private variables for which you want to define public setters and getters, and more. Ctrl+Shift+1 is FlashDevelop's most powerful shortcut; check out this page of the official documentation and the comments below this article to find out more.

Code Refactoring

Let's say you've created a method called refresh(), but over time you alter what exactly it does so that it's not just refreshing the data but updating it, too. To keep your code accurate, you want to rename the method to update() -- but how? You can't just do a Find/Replace and change all instances of refresh to update, and finding all the places in the entire project where that class's refresh() function is called would take forever.

Enter the Refactor menu. Just right-click any function or variable name and select Refactor | Rename...:

All references to the function, across the entire project (including the function itself), will be renamed to whatever you enter.

The Refactor menu lets you do more, like remove import statements that were once necessary but are now unused, though the Rename... method is the one I use most.

Task Tracking via Comments

Sometimes while developing you'll find a bug that occurs just one time in a million, under very specific cases, and it's not worth spending hours fixing it. So you slap a quick workaround on there and make a mental note to come back to it later. Of course, it's difficult to keep track of mental notes...

In FlashDevelop, you can keep track of these by writing comments prefixed with //FIXME:, and they'll show up in the Tasks panel. So, this:


public function load():void
{
	//FIXME: Causes app to crash if loaded on Feb 29th during a solar eclipse
	displaySkyline();

...gives you:

It's also possible to use other prefixes. //TODO: and //BUG: are supported by default, but you can add your own.

Big Deal

Okay, sure, Flash Professional does a lot of that. But FlashDevelop does it better; for example, Flash CS3's auto-completion requires you to type the capitalization exactly the same as the keyword you're trying to find, so someMovieClip.gotoand won't match anything. Flash CS5's editor is much better that previous versions of Flash, but still has a way to go.

Looking at these as a list, they may not seem like a big deal. Who cares if you can shave a few milliseconds off the time it takes you to write a line of code? How hard is it to add an import statement yourself? What's wrong with writing an event handler function on your own?

This is missing the point. See, all of these tasks are tedious; they're gruntwork, not programming. Automating and streamlining them frees you up to just code, without having to think about writing code. The FlashDevelop user interface helps out in the same way: it feels a lot easier and faster to use than Flash Professional's (which is not surprising, since it's based on Visual Studio's excellent UI).

FlashDevelop has plenty of other features, and since it's open source the community often creates more plugins and extensions, giving it even more functionality. You can also alter the settings to make it follow your own coding conventions, to put you at ease.

Now you've seen what FlashDevelop can do, let's look at how to get started.

Installing FlashDevelop

You can install FlashDevelop the way you would any other Windows application. First, download the latest installation file from the relevant thread on this forum. There's always a direct link to the download page on the FlashDevelop homepage, as well.

Once you've downloaded it, simply run the EXE and follow the instructions to install. If it asks you whether to install the Flex SDK, say yes.

FlashDevelop is not currently supported on any other platform but Windows, unfortunately, but it is possible to run it on Mac OS X using Parallels. See this forum thread for more details.

EDIT: Mac/Linux support is coming.

You should also install the latest Java runtime and the latest debug Flash Players.

When you first run FlashDevelop, it'll look something like this:

It may not look exactly the same, since I've customized the layout of mine, but it'll have the same basic elements. You can choose which panels to show by selecting them in the View menu, and drag them around the UI to lay them out as you please. Move them to an edge of the window to make them snap to that edge. Some panels have a "pushpin" icon; clicking this toggles auto-hide, where the panels will slide out of view when not in use, and reappear when you hover over their icon.

There are three main ways to use FlashDevelop:

Completely on its own, with no need for Flash Professional
Alongside Flash Professional, using Flash CS3+ to export assets while FlashDevelop handles the overall project
As a code editor, using Flash Professional to manage and compile the project

Different workflows will be suitable for different people. If you're already using Flash Professional for all your projects, you'll probably find it easiest to keep doing that but switch to FlashDevelop as your main code editor (Option 3). If you don't own Flash Professional -- perhaps you're new to Flash -- you might as well start by using FlashDevelop on its own (Option 1). If you're a coder and you work with a designer who uses Flash Professional for layout and animation, then using the two tools side by side will give you each what you need (Option 2). The three workflows produce slightly different projects, so if you work with other programmers, make sure to check what's acceptable with them before you potentially cause a mess.

Personally, I started with Flash Professional on its own, then quickly switched to Option 3, and now I use either Option 1 or 2 for my own projects (as appropriate), and occasionally need to use Option 3 for freelance work. It's definitely worth knowing all three of them, so we'll go through them in turn.

Option 1: FlashDevelop Alone

In this workflow, you don't need a copy of Flash Professional; you'll use FlashDevelop to write all your code, import and embed all your assets (graphics, sounds, and so on), and compile your project.

Setup

For FlashDevelop to be able to compile a Flash project, you'll need to install the free Adobe Flex SDK. There's a little confusion about this, so let me clear it up: using the Adobe Flex SDK does not mean that you need to use the Adobe Flex framework or MXML; nor does it mean that you have to use Adobe Flex Builder (now called Adobe Flash Builder). At this stage, you can think of the Adobe Flex SDK as just a tool that lets FlashDevelop turn your code into an actual Flash SWF file.

With luck, you'll have installed the Flex SDK as part of the FlashDevelop installation process. If so, skip to the Creating a New Project section. Otherwise...

Download the "latest production quality release" from the Flex SDK homepage. (Get the version labeled "Adobe Flex SDK" or "Free SDK" rather than "Open Source Flex SDK".) Unzip it somewhere on your hard drive; place it somewhere generic, rather than in the folder for one specific Flash project.
Now, in FlashDevelop, click Tools | Program Settings and select AS3Context from the list on the left. In the Language | Flex SDK Location section, click the text box and then click the button marked "..." which appears. You'll be given a file browser dialog; use it to navigate to the root folder of the Flex SDK. (This is the folder that contains the subfolders called "ant", "asdoc", "bin", and so on.
Next, still in Program Settings, select FlashViewer from the list on the left. In the Misc | External Player Path section, browse to \runtimes\player\10.1\win\FlashPlayer.exe within the root folder of the Flex SDK. (This is correct at time of writing, when Flash Player 10.1 is the latest version. In the future, this may change.)
Close the Program Settings.
Click Tools | Flash Tools | Documentation Generator | Settings and set the ASDoc Location to the \bin\ directory within the root folder of the Flex SDK.
Click Save Settings, then close the ActionScript Documentation Generator window.

There are other ways to configure the Flex SDK; check out this section of the official wiki for more details.

Creating a New Project

FlashDevelop is now ready for you to use. Create a new project by clicking Project | New Project.... The following dialog will appear:

Which to choose? Well, "Flash IDE" refers to Flash Professional, so we can't use that. The AIR Projector projects are all for creating standalone AIR applications, rather than SWFs that can be run in a webpage, so ignore those. "Flex 3 Project" and "Flex 4 Project" sound likely, since we're using the Flex SDK, but these are for projects that use a Flex Framework, rather than just the Flex SDK. That's useful for some projects, but not necessary, and beyond the scope of this tutorial.

The choice is between "AS3 Project" and "AS3 Project with Preloader"; they are the same, except that the latter option includes all the basic code and setup required for a loading screen. Select "AS3 Project with Preloader", then enter a name for your project, and select a location for the files to go.

Three folders will be created: bin, lib, and src.

For more information on these, check out Daniel Apt's Quick Tip: How to Organize Your Flash Project Files. Put briefly: code files go in \src\, SWF files get output to \bin\.

Testing the Project

If you load \src\Preloader.as, you'll see several // TODO comments, marking points where you can add your own code for showing, updating, and hiding a custom loader. Once the entire project has loaded on the user's computer, the startup() function will be run; this will create a new instance of the \src\Main.as class, so let's take a look at that:


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

	/**
	 * ...
	 * @author MichaelJW
	 */
	[Frame(factoryClass="Preloader")]
	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
		}

	}

}

Without going in to too much detail (see this Quick Tip for a little more explanation on what's going on in this class), the // entry point comment is what's important here. This marks the spot where all the code and assets are fully loaded and has started to run.

We can test the project by adding a simple trace() statement immediately after this line, like so:


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

	/**
	 * ...
	 * @author MichaelJW
	 */
	[Frame(factoryClass="Preloader")]
	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("Project is running fine!");
		}

	}

}

Click Project | Test Movie and FlashDevelop will compile the code into a SWF, then run that SWF. The Flash Player window will appear:

...but it'll be blank, because we haven't told it to display anything. However, check the Output panel within FlashDevelop (click View | Output Panel if it's not already visible):

Great!

Embedding Assets

In Flash Professional, we can add images and sounds to a Flash project by dragging them in to the library, and refer to them in code by setting their Linkage properties within the library. In FlashDevelop, the process is a little longer; here's a quick overview:

Let's suppose you have a JPEG, and you want to display it within the SWF. First, move it to the \lib\ folder. Then, in the Project panel, right-click the image and select "Add to Library":

The image's filename will turn blue to indicate that it is now in the library.

In Main.as, above the constructor function, add this line:


public class Main extends Sprite
{
	public var ActivetutsLogo:Class;
	
	public function Main():void
	{
		if (stage) init();
		else addEventListener(Event.ADDED_TO_STAGE, init);
	}

(Of course, you should call this class something relevant to the image file that you're using, rather than ActivetutsLogo.)

We'll use this class to contain the image file itself, as a Bitmap. To link the two together, insert a new blank line above public var ActivetutsLogo:Class;, move the cursor to it, right-click the image in the Project panel again, and select "Insert Into Document". A new line will be added to the class:


public class Main extends Sprite
{
[Embed(source='../lib/Activetuts.jpg')]
public var ActivetutsLogo:Class;

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

You've now defined ActivetutsLogo as a class that extends Bitmap and contains the image. (It's important that the [Embed] tag is on the line immediately above the line that declares the variable; that's how Flash knows that the two are linked.) Now you can display the image in the SWF. To do so, move to the init() function, below the trace() statement you added earlier, and add these lines:


private function init(e:Event = null):void
{
	removeEventListener(Event.ADDED_TO_STAGE, init);
	// entry point
	trace("Project is running fine!");
	var activetutsBitmap:Bitmap = new ActivetutsLogo();
	addChild(activetutsBitmap);
}

Run the project (Project | Test Movie) and you should see your image inside Flash Player:

Success! Follow the same basic steps to embed other types of assets, like music. See this section of the Flex documentation for more details.

Now, if you're completely new to Flash, all that talk about classes and whatnot probably went over your head. Don't worry! This is a guide to FlashDevelop, rather than to Flash or AS3, so I've skimmed over some of the details. You can pick them up from other Basix tutorials on the site.

Option 2: FlashDevelop with Flash Professional Assets

This workflow is ideal if you're working with a Flash designer or animator who uses Flash Professional to create their assets. It essentially lets you embed the libraries from one or more FLAs inside your FlashDevelop project.

Creating a New Project

Create a new project following exactly the same instructions as for Option 1, but ignore the Embedding Assets section. You can embed assets using that method if you prefer, but you don't need to.

Open Flash Professional. I'm using Flash CS3, but any version above that will work, too. Create a simple movie clip, which in turn contains some other movie clips; I've created a basic menu using a gradient background and some buttons made with my Buttonizer panel:

Give the menu symbol a linkage name of SimpleMenu. Inside the symbol, give each button a relevant instance name (I've gone for startButton, stopButton, and infoButton).

Save the FLA in your project's \lib\ folder. Now, still in Flash Professional, click File | Publish Settings..., click the Flash tab, and check the "Export SWC" box. In the Formats tab, uncheck every box apart from Flash. Press OK, then click File | Publish. Your \lib\ folder will now contain a FLA, a SWF, and a SWC.

Adding the SWC to your FlashDevelop Project

The SWC is the key to this workflow. It's a file that contains the library of the FLA, in a format that FlashDevelop and the Flex SDK can read.

(Okay, technically it doesn't necessarily contain the whole library, as you can force certain symbols not to be exported by changing certain settings -- but that's not important right now.)

Switch to FlashDevelop and right-click the SWC in the \lib\ folder. Click "Add to Library".

So far, it's just like embedding a JPEG, right? Well, this is where things change. First, check out what happens if you click the little plus sign next to the SWC:

We can see all the classes available to the FLA, and all the symbols that were given a linkage name. The buttons aren't there, but don't worry.

Let's add an instance of the menu to the SWF. Add two new lines immediately after the trace() statement that you added earlier:


private function init(e:Event = null):void
{
	removeEventListener(Event.ADDED_TO_STAGE, init);
	// entry point
	trace("Project is running fine!");
	var menu:SimpleMenu = new SimpleMenu();
	addChild(menu);
}

Run the project:

Excellent. We've managed to take the menu straight from the SWC file, add it to a separate Flash project, and display it in that project's SWF.

As you can see, the buttons remain in the menu, even though we can't see them inside the SWC file. This is because the buttons are inside the SimpleMenu object; we still have complete access to them via FlashDevelop, albeit only through the SimpleMenu. This comes in very handy -- for example, immediately below the two lines of code you just added, type menu.button:

Assuming you named your buttons in a similar fashion to mine, you'll see that they all exist as properties of the menu object, because we gave them instance names. This means that we can access everything from the SWC via code, like so:


private function init(e:Event = null):void
{
	removeEventListener(Event.ADDED_TO_STAGE, init);
	// entry point
	trace("Project is running fine!");
	var menu:SimpleMenu = new SimpleMenu();
	addChild(menu);
	menu.startButton.addEventListener(MouseEvent.CLICK, onClickStart);
	menu.stopButton.addEventListener(MouseEvent.CLICK, onClickStop);
	menu.infoButton.addEventListener(MouseEvent.CLICK, onClickInfo);
}

private function onClickStart(a_event:MouseEvent):void 
{
	//do something
}

private function onClickStop(a_event:MouseEvent):void 
{
	//do something else
}

private function onClickInfo(a_event:MouseEvent):void 
{
	//do a third thing
}

This separates the FLA from the code. The designer could completely overhaul the graphics, and as long as there's a SimpleMenu symbol containing a startButton, a stopButton, and an infoButton, the project will still work. Plus, the project can contain multiple SWCs; when building a game, one designer could work on a User Interface FLA containing menu layouts, while another works on a different FLA containing character animations. Backgrounds could be high-res JPEGs, added to the project using the [Embed()] tag. It's a great workflow.

For more information on SWCs, check out this tutorial.

Option 3: FlashDevelop as Flash Professional's Code Editor

The third workflow is the simplest. In this scenario, FlashDevelop is used merely as an editor for the AS files of a Flash Professional project. You still get most of the benefits of FlashDevelop's features (code completion, automatic imports, and so on), but are reliant on Flash Professional for compiling the project and maintaining the library.

Creating a New Project

It's very simple to create a project for this workflow. In FlashDevelop, click Project | New Project and select Flash IDE Project.

Pick a blank folder and give the project a name. Then, inside that project, create a new FLA.

That's it! Set up your folder structure however you like, and don't forget that even though you'll be using FlashDevelop to edit all your classes, you'll still need to link your document class to your FLA.

When you run the project in FlashDevelop, it'll switch to Flash Professional and publish the SWF. You should still be able to receive the output of trace() statements in FlashDevelop's Output panel.

Using FlashDevelop for an Existing Project

If you've already started a Flash Professional project without FlashDevelop, you can still use FlashDevelop as your main code editor. Follow the same steps as above, by creating a new Flash IDE Project within FlashDevelop, but instead of selecting a blank folder, select the folder where your FLA and other project files are located. You'll be given a warning:

...but you can safely ignore this; FlashDevelop won't overwrite any existing files (unless you already have a FlashDevelop project in that folder). Click OK, and you'll get the same result as if you'd been using FlashDevelop from the start of the project.

Donating

FlashDevelop is completely free and open source. This is made possible by donations, so if you find it useful, consider sending the team a few dollars. They are currently doing a donation drive while gearing up for Version 4.0, so I'm sure whatever you can give would be extra-appreciated right now.

Any Thoughts?

That covers the basics, but I know there's a lot more to FlashDevelop. What essential features and plugins have I missed out? Please share in the comments :)

1
2	package com.activetuts.examples
3	{
4	import flash.geom.Rectangle;
5
6	/**
7	* ...
8	* @author MichaelJW
9	*/
10	public class SuperRectangle extends Rectangle
11	{
12
13	public function SuperRectangle(x:Number = 0, y:Number = 0, width:Number = 0, height:Number = 0)
14	{
15	super(x, y, width, height);
16
17	}
18
19	}
20
21	}

1
2	package
3	{
4	import flash.display.Sprite;
5	import flash.events.Event;
6
7	/**
8	* ...
9	* @author MichaelJW
10	*/
11	[Frame(factoryClass="Preloader")]
12	public class Main extends Sprite
13	{
14
15	public function Main():void
16	{
17	if (stage) init();
18	else addEventListener(Event.ADDED_TO_STAGE, init);
19	}
20
21	private function init(e:Event = null):void
22	{
23	removeEventListener(Event.ADDED_TO_STAGE, init);
24	// entry point
25	}
26
27	}
28
29	}

1
2	package
3	{
4	import flash.display.Sprite;
5	import flash.events.Event;
6
7	/**
8	* ...
9	* @author MichaelJW
10	*/
11	[Frame(factoryClass="Preloader")]
12	public class Main extends Sprite
13	{
14
15	public function Main():void
16	{
17	if (stage) init();
18	else addEventListener(Event.ADDED_TO_STAGE, init);
19	}
20
21	private function init(e:Event = null):void
22	{
23	removeEventListener(Event.ADDED_TO_STAGE, init);
24	// entry point
25	trace("Project is running fine!");
26	}
27
28	}
29
30	}

1
2	private function init(e:Event = null):void
3	{
4	removeEventListener(Event.ADDED_TO_STAGE, init);
5	// entry point
6	trace("Project is running fine!");
7	var menu:SimpleMenu = new SimpleMenu();
8	addChild(menu);
9	menu.startButton.addEventListener(MouseEvent.CLICK, onClickStart);
10	menu.stopButton.addEventListener(MouseEvent.CLICK, onClickStop);
11	menu.infoButton.addEventListener(MouseEvent.CLICK, onClickInfo);
12	}
13
14	private function onClickStart(a_event:MouseEvent):void
15	{
16	//do something
17	}
18
19	private function onClickStop(a_event:MouseEvent):void
20	{
21	//do something else
22	}
23
24	private function onClickInfo(a_event:MouseEvent):void
25	{
26	//do a third thing
27	}