March 12th 2006 | Jens C Brynildsen
You may have heard of Open Source alternatives to Adobe Flash and thought 'maybe I should try this'. Believe me - you should. FlashDevelop is the best Open Source editor I've seen. It really has it all - it's developed by the Flash community, it's fast, it's free and it will even make you a better coder.
Formerly there was no alternative to using Flash. The built in actionscript editor in the Flash IDE leaves much to be desired, but there are many alternatives ranging from the free SEPY and SCITE to commercial tools such as PrimalScript. Some of these can also use the Open Source compiler MTASC to create SWF files directly from the editor. FAME(S) is a popular collection of tools that work together to create a complete alternative to the Flash IDE.
Open Source wins ground in every camp these days. Adobe has chosen the Open Source editor Eclipse as the IDE for Flex 2. The Flex 2 IDE is actually Eclipse plus several extensions to it such as the new compiler, custom panels, code hints and more. There are many other extensions for Eclipse that will ease your Flash development ranging from the commercial FDT to several Open Source alternatives.
I've tried and used several editors. Once you get used to one, you usually stick with it. Changing editors is hard and the main reason is that the editor is a major part of your workflow. Changing workflow is hard, but if a tool enhances your workflow it's easier to switch. Up until now I've always used my editors together with Flash. You edit your scripts and then ALT-Tab back to Flash to compile. Using FlashDevelop (FD), I only open the Flash IDE to compile components.
Here the other day, I saw a blog post by Keith Peters mentioning FD. That sure was a rave review so I downloaded it and boy was I surprised. This was very unlike setting up FAMES. Just download, click install and open a new project. That's all.
Here's a short description of how to make the classic Hello World program. If you want to try this yourself, download and install the latest version of FD. After the setup has finished, FD will start for the first time.
The programs layout is classic. On the top is a button-bar with access to major functions. On the left is your code editing window and on the right is a set of panels you can toggle. Open the Project menu and choose New Project.
This dialogue will let you choose from several presets. Just use the default settings for now. Enter a name for your project, choose a folder to store the files in and press OK. In your project panel on the right there is now two folders called classes and library. Expand the classes folder and double click the main.as file residing there.
This file is the equivalent of the first frame in Flash. There is no timeline, only this one ActionScript file. Does this sound odd to you? If you show this setup to a Java or C++ coder they will recognize this. Most programming languages use a file like this to tell the compliler where to start. It's great to have this in ActionScript as well.
Below the editing window you'll find the panels Output, Results and Snippets. The two first will open when required and contract unless you "pin" them to force them there all the time. This is a great way to see output when it happens and to save space when not required.
To make the Hello World program, just enter these lines in the static main function:
static function main()
_root.t.text = "Hello, world!";
Now press CTRL+Enter to start building the SWF. The Output panel opens a short second and voila! - there's your SWF. Want to add an image? Right click your library folder and choose Add > Existing File to browse for a file. The file is then copied to your library folder. Right click the file and choose "Add to library". The image is now "automagically" inserted into a SWF (using SwfMill) and given an instance name. Now you can put the image on stage using attachMovie:
static function main()
_root.t.text = "Hello, world!";
The first time you open FD, it'll take a little time since the .NET FrameWork is loaded. FD is really solid and stable, and it feels snappy to work with. All the features you expect are there and then some more. Find and replace, search across multiple files, class browser panel, code snippets, string manipulations, trace statements for debugging, syntax support for other formats (jScript, HTML, XML, CSS and text), quick conversion to intrisic classes, smart preloaders, code validation without compiling and much more. A practical feature that I've never used before is bookmarks. You can bookmark any line in any script and then jump quickly between them. Will certainly save me some time.
Select a variable and press F4 to go straight to the variable declaration. If you select a class and press F4, the class file will open directly. A great timesaver when exploring the class tree of the UI Components.
FD is chock full of genuinely useful features. One great example of this is that if you right click a library asset (such as the image we just inserted) and select Options, you can not only change the library ID, but you can also check for changes in the file. If the asset has changed, it's automatically copied from it's original location.
The code hinting in FD is great! FD keeps track of what kind of objects you work with and presents code hints that fit. This is not just for the native Flash classes, but also for any other imported class no matter who made it. Should you lose the hinting, just press CTRL+shift+space and the hints are back on.
The editor has code folding but it also supports custom region folding allowing you to fold any part of the code. The auto-complete functions will make you smile. When making a block comment, FD will automatically add the required space and start chars until the block is closed.
The Projects panel keeps your assets well organized. You are not forced to follow the suggested classes/library structure either. Just drag and drop files to a new location in the project and they'll still work fine.
FD is built more or less like a big plugin structure. This makes it extremely easy for C# developers to extend it. The FD community already has created several nice additions. What is special with FD is that it's an Open Source C# program based on the .NET framework. Few Open Source projects are based around Microsoft technologies, but there are a lot of good C# coders out there and there are good Open Source solutions for C# also. The bad thing about this is of course that FD is PC only.
When you use FD with the V2 components, you'll have to toggle "Use MX" on in the project preferences. To use the components in FD, just drop them into a FLA and export the SWF containing it. Add it to your library and use attachMovie when you want to use it in your code. Some components will throw warnings saying that they require certain classes. You can silence the compiler by referencing the missing classes like this:
var foo = com.somepackage.someclass;
Other components may not compile at all unless you modify them. MTASC is a stricter compiler than the one used in the Flash IDE, so files that contain bugs may throw warnings and fail despite working in Flash.
One thing to keep in mind is that "Static Main" is a static class. Due to that, it can only set up instances and fire up your app. Commands such as doLater() and acccessing variables won't work here. A better use of the main-function is to create an instance of your main application class such as this:
static function main()
var myApp:MyGreatApplication = new MyGreatApplication(_root);
Here we pass in the root-object as a reference for what to attach movieclips to later. This will make it really easy to change the location later since it's only written in one place.
What if someone requires a FLA and you made the project with FD? It's not that hard to toggle between FD and Flash. Just open a new Flash file and paste the contents of your main function on the first frame. Then import the required assets to your library and save the FLA. That's about it. Due to this, there's really no risk involved. You can easily switch back if you need to but I don't think you will need to. Once used to this way of developing, you'll miss it sorely when you have to open old projects in the Flash IDE. Speaking of that, you can use FD to edit external actionscripts even if you use Flash for everything else. Hitting the F6 key in FD will switch to Flash and compile the currently open movie inside the Flash IDE. Pretty sweet!
No. The more people using Flash the better. We Flashers often think that the world revolves around our personal Flash-sphere, but it's really not like that. In the real world, AJAX is the cool guy and Flash is the really clever cousin that can do everything, but is too nerdish to be invited to the parties. Lately, Flash has gathered extra press because of the Flash Open Source movement. Flash news usually spreads across the same channels, but due to Open Source, Flash now gets coverage in other publications too.
The bigger the Flash eco system gets, the better for Adobe, so they are very positive towards Open Source Flash. One sure sign of this is that the Flex 2 compiler will be free. This will open up for it to be integrated into other products such as future versions of FD. Many users will always want "the original", but they appreciate there being an alternative. Cost is also a factor. Others residing in some low cost countries have the yearly wage of a weeks work compared to the western salaries. Buying a $699 Flash license is not an option for them. Because of Open Source, they now have a great alternative to using pirated software.
Having just one program for it all versus switching between an editor and Adobe Flash is a great timesaver and makes for a great workflow. You could use Flash for code based design, but that would leave you with the internal editor and it really isn't very good when compared to any of the alternatives.
What is really great about FD is that it forces you to seperate code from design. There's absolutely no way to put code inside a FLA just "because it was practical". You more or less have to design things as it ideally should be - as well structured classes. Now FD can't help you building the classes, it will only aid you by not getting in your way and speeding up the development process. Since FD uses MTASC, it'll also force you to become better at declaring variables, thus doing things more correctly.
How good is it then? There is a limit to how much a text editor can do, but this one really does it all. I've now used FD for two months and I'll not start using my old editor or Flash again. This is the way I want to work as a programmer. I really don't want a timeline. I'd rather use tweening libraries since that makes my code flexible and easy to change. For me, using FD is the next logical step towards Flex 2 and AS3 and speaking of that - the makers of FD are already looking into adding AS3 support.
As with any new software, you'll have to put in a bit of time to learn it but compared to other alternatives, this is really minimal. Just install and try a bit, then go to the FlashDevelop Forums to learn more. Here you'll find answers to most of your questions and links to other resources. The current version is 2.0 Release candidate 1. Don't let that scare you. The software has been stable the last two months already and I've never had a crash.
Click here to download and try the latest release yourself
Jens has been working with Flash since version 3 came out. Since then, he's been an active member of the Flash community. He's created more than a hundred Flash games (thus the name of his blog) but he also creates web/standalone applications, does workshops and other consulting. He loves playing with new technology and he is convinced that the moment you stop learning you die (creatively speaking). Jens is also the Editor of this website.