[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:
[xml]< button label="ANT Build" click="PluginCommand" image="54" tag="Run;SaveAll;ant" shortcut="CtrlF7" />[/xml]
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:
[as]
package org.flashdevelop.utils {
import flash.system.fscommand;
public function xtrace(msg:Object):void {
fscommand(�trace�, msg.toString());
}
}
[/as]
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:
[xml]< arg line="-source-path='C:/Program Files/FlashDevelop/Library'" />[/xml]
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:
[as]import org.flashdevelop.utils.xtrace;[/as]
And then you can just trace like so:
[as]xtrace(“hello world”);[/as]
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:
I followed you instruction step by step, but got a error when I press F7 to bulid the template App.as file:
App.as:1: characters 0-7 : parse error Unexpected packageI’m a total newbie on as3 and fd, and would you mind to shed a light on what the problem might be here?
Fantastic! Thank you so much for this guide!
Gavin, did you change your keyboard shortcuts? It sounds like MTASC is doing a syntax check when you hit F7, rather than Ant running the build.xml file.
Keith, you should put another unused shortcut in your tutorial – like CtrlF7, then it can be interesting to mention that it’s possible to change the shortcuts.
Good point Philippe. Changed it.
Great tutorial! Thanks!
I was able to compile/run an AS3 project with no glitches whatsoever. Great work.
Looking forward to MXML completion 🙂
Cheers,
Pedro.
Awesome news! Thank you a lot for your effort in moving open source flash so forward 😉
I wrote a step by step to use Flash Build instead of ant with the Flex 2 SDK.
Here: http://smurfmx.selfmedicatedandlivinginabucket.com/2006/08/using-flex-2-sdk-with-flash-develop.html
Hi,
I’ve followed your instructions exactly and have set up FlashBuilder.
However when compiling an example using xtrace i don’t see any output (I’ve created the xtrace.as file, included the Library folder in my classpath and have the source-path arg element in my ant build task and i’m viewing the swf in a tab)
Where should the xtrace traces appear?
I can get graphics to display but no traces!
Thanks,
Using your templates and they are really useful and extendable too. Ant opens up customising and I have been using it a lot recently and added SWFMill and Ming to your build.xml and they work nicely too. Thanks for the tutorial.
Thanks for the great tute Keith, I’m having the same issue as Ed, everything appears to compile fine but my xtrace doesn’t display anything in the output panel?
I think that the hyperlink to the File ASCompletition.dll is wrong, it should be http://flashdevelop.org/downloads/releases/archive/ASCompletion-v1.0.1.zip
Great Tutorial, Edgar
Hi
I’m getting the following error….any suggestions?
build.xml:29: Execute failed: java.io.IOException: CreateProcess:
etc etc
error=3
Jim,
I got the same error at first – The flex SDK download zip has the directory name as flex_sdk_2, but in the project template build.properties file it’s called flex_2_sdk (the 2’s moved). Renaming your flex sdk directory will fix it.
PS Big thanks 101! AS3 here we go!
“Jo Says:
November 10th, 2006 at 7:24 pm
Jim,
I got the same error at first – The flex SDK download zip has the directory name as flex_sdk_2, but in the project template build.properties file it’s called flex_2_sdk (the 2’s moved). Renaming your flex sdk directory will fix it.”
At last I have found the decision of the problem!
Thanks your community!!!
The link to the runcommand plugin seems to be down?
http://flashdevelop.org/downloads/releases/RunCommand-v0.1.zip
Does anyone know where to get it?
Thanks for a nice tutorial!
Chribbe,
I had the same problem; the direct link doesn’t work because there is a newer version. Just chop “RunCommand-v0.1.zip” from the URL and you’ll get a directory with the newer file.
For the moment (until an even newer version), this link works:
http://www.flashdevelop.org/downloads/releases/RunCommand-v1.1.0.zip
-glenn
Has anyone gotten FlexUnit to work with FlashDevelop at all? I am using an Ant build script to try to build the FlexUnit demo on Darron Schall’s blog, but have been unsuccessful at doing so. When I run the Ant build script I got from this blog, it looks like it is compiling successfully, but the swf is not generated. So instead I ran the compiler from the command line using:
C:\Documents and Settings\Me>mxmlc -sp=”C:/Flex2/flex_2_sdk/frameworks/source/mx
/core” -library-path=”C:/Flex2/flexunit/bin/flexunit.swc” -default-frame-rate=24
-default-background-color=0xFFFFFF -default-size 550 400 -o=”C:/SVN/AgCg/Action
Script3/Projects/FlexUnitDemo/deploy/ExampleTestRunner.swf” — “C:/SVN/AgCg/ActionScript3/Projects/FlexUnitDemo/src/ExampleTestRunner.mxml”
and got this:
Error: Can not resolve a multiname reference unambiguously. mx_internal (from C:\Flex2\flex_2_sdk\frameworks\source\mx\core\mx_internal.as) and mx.core:mx_internal
(from C:\Flex2\flexunit\bin\flexunit.swc(mx/core/mx_internal)) are available.
Just wondering if anyone has had the same problem.
Alternatively, has anyone gotten ASUnit working with FlashDevelop? Let me be specific here as there seem to be vast differences between the AS2 and AS3 ASUnit libraries, I am using AS3. Can’t get that to work either. I am a C# developer and a huge fan of TDD. I’d like to get it working in my FD projects as well.
Thanks,
Robert
Figured out what my problem was. I was using -library-path just like the documentation says, but I should have been using -include-libraries. Go figure.
hi im total new to as3 and flashdevelop, is there a way to compile .as files into .swf files without tweaking the environment?
the first, required steps i have done, but when click on mtasc build, there´s no output swf?
ND, what do you mean by “tweaking the environment”? Minimally, you do need to have the Flex 2 SDK installed and set up within FlashDevelop. Actually, this tutorial is a bit outdated, as a lot of improvements to this workflow have been added to FlashDevelop since I wrote this. I suggest you follow the directions on the FD site.
i have installed the flex 2 sdk and flashdevelop. pathes are ok, and there is no failure when using the mtasc button, but do i have to do step 2 which can be read above?
how do i get the fla or swf file from the .as file?
Everything working, thanks for the tutorial!!!