Tutorial: AS3 in FlashDevelop
[Update: Nov. 13, 2007]
Since I wrote this tutorial, FlashDevelop 2.01 has been released, which contains updated versions of the dlls mentioned here. So the steps regarding updating those things are not necessary if you have the latest build of FlashDevelop.
Also, I want to point out that you DO NEED to check the paths in the templates. The path to the Flex 2 SDK that is set in the default template is not the default install path. My bad. I set it to where I happened to install my SDK, which was a bit off of the default install location. If you don't change that in your template, your project will not compile.
[end of update]
Today marks the public release of the new AS3 parsing plugin and completed intrinsic files for the Adobe AS3 classes for FlashDevelop. I believe FlashDevelop now has probably the best AS3 support of any tool out there, other than Flex Builder 2. A future version of FlashDevelop will have more extensive support for AS3 and possiby Flex 2. The plugin and intrinsic classes are really meant as a patch to make it possible to get code completion and hinting in FlashDevelop. But even so, they work pretty damn well.
I'm going to walk you through modifying your FlashDevelop installation so that it is a fully functional AS3 environment. A lot of these steps reflect my personal preferences in how to set things up, so you are free to use as much or as little as you want, or modify it in any way.
Step 1: Install all the tools and files.
First of all, you need to have the following installed:
- FlashDevelop http://www.flashdevelop.org
- Flex2 SDK https://www.adobe.com/cfusion/tdrc/index.cfm?product=flex
- New ASCompletion.dll http://flashdevelop.org/downloads/releases/ASCompletion-v1.0.1.zip
- Intrinsic Class Files http://www.returnundefined.com/fdas3/
Install FlashDevelop as usual.
Take note of where you unzip the Flex 2 stuff. Usually a simple location like c:/flex_2_sdk is good.
Put the ASCompletion.dll in the plugins directory of your FlashDevelop install directory.
Put the class files wherever you want, but take note of their location.
For a fully integrated environment, you should also install the following:
- Apache Ant http://ant.apache.org
- The RunCommand plugin http://flashdevelop.org/downloads/releases/RunCommand-v0.1.zip
- My AS3 and Flex 2 Project Templates http://www.bit-101.com/flashdevelop/ProjectTemplates.zip
There's some info here on installing Ant: http://www.bit-101.com/blog/?p=627
The RunCommand plugin dll should also go in FlashDevelop's plugin directory.
The templates to in FlashCommand's data/Project Templates/ directory.
Step 2: Tweaking the Environment a bit.
First, it's nice to be able to build your project with the click of a button or a shortcut key. Open up the ToolBar.xml file, which you will find in FlashDevelop's Settings folder, and add the following line wherever you like:
-
<button label="ANT Build" click="PluginCommand" image="54" tag="Run;SaveAll;ant" shortcut="CtrlF7" />
Note, this step requires that you installed the RunCommand plugin as described above. You'll probably want to change your shortcut key. Just make sure you change it to something that is unused, or swap things around to free up the key of your choice. I like F7 for compiling, so I rearranged things to support that.
It's also nice to be able to trace into the FlashDevelop output panel when testing a swf in a tab in FlashDevelop. A simple way to accomplish this is to create a trace function that calls fscommand. Create a new file and copy this class into it:
-
package org.flashdevelop.utils {
-
import flash.system.fscommand;
-
-
public function xtrace(msg:Object):void {
-
fscommand(�trace�, msg.toString());
-
}
-
}
Save this as xtrace.as in the Library/org/flashdevelop/utils/ directory of your FlashDevelop install.
Step 3: Creating and customizing a project
Fire up FlashDevelop (or restart it after you've got everything set up) and create a new project.
Choose AS3 Project which should now be in the list of projects.
Give it a project name and location, and leave the checkboxed checked to create a new directory. Your project will be created.
Now you need to add the AS3 classpath to the project. Right-click on the project in the project explorer, and choose properties. In the properties dialog, choose the Classpaths tab and click "Add Classpath". Browse to the directory you put your AS3 intrinsic class files, choose that, and accept it.
If you are using the xtrace functionality described in step 2, you need to add the Library folder to your compiler arguments as a classpath. Open up the build.xml file in your project and add the line:
-
<arg line="-source-path='C:/Program Files/FlashDevelop/Library'" />
along with the other "arg" nodes under the compile target (should be around line 26). Save and close that file.
Open up the build.properties file in your project. Adjust any paths such as the path to where you installed the Flex 2 SDK, and make any other desired setting changes. These should be self-explanatory.
Now open your App.as file and start editing away with full AS3 code completion and hinting! If you want to use the xtrace function, you'll need to import it with the following line:
-
import org.flashdevelop.utils.xtrace;
And then you can just trace like so:
-
xtrace("hello world");
Note, this only works if you are launching the swf in a tab in FlashDevelop.
When you're ready to test it, hit the Ant Build button, which should now be on your toolbar, or hit the shortcut key you chose, and your class should be compiled into a new swf and launched in a new tab (or standalone or html, if you changed that).
Also note that you can change the template files themselves so that you don't always need to do a lot of the above when you create a new project. Anything changed in the templates will be copied to any new project. Um... that's why they call it a template.
Summary
All of the above should take you no more than a half an hour to set up, and it results in a pretty full-featured AS3 coding environment, currently rivaled only by Flex Builder 2 (as far as I know). Many thanks to Philippe at FlashDevelop and Ben Clinkinbeard for making all of this possible.
Links
Here are some various links that may contain some more information on some of the stuff I mentioned here:
http://www.flashdevelop.org/community/viewtopic.php?t=757
http://www.flashdevelop.org/community/viewtopic.php?t=796
http://www.flashdevelop.org/community/viewtopic.php?t=725
http://www.bit-101.com/blog/?p=842
http://www.bit-101.com/blog/?p=843
http://www.bit-101.com/blog/?p=845
http://www.bit-101.com/blog/?p=846
http://www.bit-101.com/blog/?p=847
Alternatives
I also want to call attention to the FlashBuild plugin for FlashDevelop, which is an alternative to using Apache Ant. It is a good tool, and may be easier for many users. Personally, I've used Ant a lot, so I am comfortable with it and find that I can do a lot with it, so that's what this tutorial is based on.
More about FlashBuild:
http://www.flashdevelop.org/community/viewtopic.php?t=287
