Tutorial: AS3 in FlashDevelop
6th August 2006
[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:
最近在bit -101的blog上看到他一直在寫關(guān)于用FlashDevelp開發(fā)AS3的文章,今天看到了這篇教程,照著做了一下,確實(shí)成功了,呵呵。下面我簡單的說一下配置步驟:
原文請見: http://www.bit-101.com/blog/?p=849
第一步,安裝所需文件
• 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/
正常安裝FlashDevelop
解壓Flex2 SDK
將ASCompletion.dll放到FlashDevelop 的插件目錄中
將Intrinsic Class Files 放到你所需的地方(不過我后來發(fā)現(xiàn)這些類文件需要放在與你的as3項(xiàng)目同一個(gè)盤符里,后面會說到)
一個(gè)完整的開發(fā)環(huán)境你還需要安裝以下東西
• Apache Ant http://ant.apache.org(這個(gè)我一直打不開,我在pchome下載到的)
• 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
關(guān)于安裝 apache ant 可以參考這里http://www.bit-101.com/blog/?p=627
簡單說下ant的裝 :
下載后解壓,假設(shè)你放在 c:/ant
然后到 我的電腦-屬性-高級-環(huán)境變量
在上面一部分 點(diǎn) 新建變量名填A(yù)NT_HOME 變量值填c:\ant 注意不要寫成c:\ant\
下面一部分,找到Path 點(diǎn)編輯在最后加入個(gè)分號,然后輸入 c:\ant\bin
確定就行了
RunCommand插件同樣放到FlashDevelop 的插件目錄
Templates 模版文件放到FlashDevelop安裝目錄/data/oject Templates/ 目錄中
第二步: Tweaking the Environment a bit.(不會翻譯了……)
在ToolBar.xml 文件中添加下面這一行代碼
- <button label="ANT Build" click="PluginCommand" image="54" tag="Run;SaveAll;ant" shortcut="F7" />
ToolBar.xml 在FlashDevelop 的 Settings 文件夾中
如果要在FlashDevelop 中使用trace將如下代碼保存成 xtrace.as, 放在
FlashDevelop\Library\org\flashdevelop\utils 目錄中
- package org.flashdevelop.utils {
- import flash.system.fscommand;
- public function xtrace(msg:Object):void {
- fscommand("trace", msg.toString());
- }
- }
第三步 創(chuàng)建一個(gè)項(xiàng)目
全部設(shè)置好后,重啟一下flashDevelop
創(chuàng)建一個(gè)新的as3項(xiàng)目 選好路徑命名后,你的項(xiàng)目就建立好了
接著要給這個(gè)項(xiàng)目添加一個(gè)as3類路徑 點(diǎn)擊project-properties 打開后選擇Classpaths 選項(xiàng)卡 點(diǎn)Add 瀏覽到剛才所說的Intrinsic Class Files就行了(我在做的過程中項(xiàng)目和Intrinsic Class Files不再同一個(gè)盤符中就提示出錯(cuò),然后我將其放到和我的項(xiàng)目的同一個(gè)目錄中就ok了).
如果要使用xtrace功能,打開項(xiàng)目中的build.xml文件加入下面這行代碼
- <arg line="-source-path=‘C:/Program Files/FlashDevelop/Library‘"/>
找到第26行
以下[28]就是我們加入的
- [26]<target name="compile">
- [27] <exec executable="${flex2.dir}/${compiler}">
- [28] <arg line="-source-path=‘D:/Program Files/FlashDevelop/Library‘"/>
打開build.properties 修改flex2sdk的路徑和其他的路徑,這些應(yīng)該不用多說了,呵呵
現(xiàn)在打開App.as文件,如果要使用xtrace 就要導(dǎo)入這個(gè)方法
import org.flashdevelop.utils.xtrace;
然后你就可以使用了,比如
xtrace("hello world");
然后點(diǎn)擊Ant Build 按鈕,就ok拉,呵呵

偶翻譯的還是很簡陋的,e文比較差…..,只是以筆記的形式寫了下來,具體還是建議到
http://www.bit-101.com/blog/?p=849