Tutorial: AS3 in FlashDevelop

« FlashDevelop getting AS3 Support!

Flash 2: It’s Cinchy! »

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.
• Flex2 SDK https://www.adobe.com/cfusion/tdrc/index.cfm?product=flex
• New ASCompletion.dll http:///downloads/releases/ASCompletion-v1.0.1.zip
• Intrinsic Class Files http://www./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.
• The RunCommand plugin http:///downloads/releases/RunCommand-v0.1.zip
• My AS3 and Flex 2 Project Templates http://www./flashdevelop/ProjectTemplates.zip

There‘s some info here on installing Ant: http://www./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:

PLAIN TEXT

XML:

1. <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:

PLAIN TEXT

Actionscript:

1. package org.flashdevelop.utils {
2. import flash.system.fscommand;
3.  
4. public function xtrace(msg:Object):void {
5. fscommand(?trace?, msg.toString());
6. }
7. }

 

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:

PLAIN TEXT

XML:

1. <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:

PLAIN TEXT

Actionscript:

1. import org.flashdevelop.utils.xtrace;

 

And then you can just trace like so:

PLAIN TEXT

Actionscript:

1. 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./community/viewtopic.php?t=757

http://www./community/viewtopic.php?t=796

http://www./community/viewtopic.php?t=725

http://www./blog/?p=842

http://www./blog/?p=843

http://www./blog/?p=845

http://www./blog/?p=846

http://www./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./community/viewtopic.php?t=287

 

 

原文请见: http://www./blog/?p=849

 

 

最近在bit -101的blog上看到他一直在写关于用FlashDevelp开发AS3的文章，今天看到了这篇教程，照着做了一下，确实成功了，呵呵。下面我简单的说一下配置步骤：
原文请见: http://www./blog/?p=849
第一步，安装所需文件
• FlashDevelop http://www.
• Flex2 SDK https://www.adobe.com/cfusion/tdrc/index.cfm?product=flex
• New ASCompletion.dll http:///downloads/releases/ASCompletion-v1.0.1.zip
• Intrinsic Class Files http://www./fdas3/

正常安装FlashDevelop
解压Flex2 SDK
将ASCompletion.dll放到FlashDevelop 的插件目录中
将Intrinsic Class Files 放到你所需的地方(不过我后来发现这些类文件需要放在与你的as3项目同一个盘符里，后面会说到)

一个完整的开发环境你还需要安装以下东西
• Apache Ant http://ant.（这个我一直打不开，我在pchome下载到的）
• The RunCommand plugin http:///downloads/releases/RunCommand-v0.1.zip
• My AS3 and Flex 2 Project Templates http://www./flashdevelop/ProjectTemplates.zip
关于安装 apache ant 可以参考这里http://www./blog/?p=627
简单说下ant的装 :
下载后解压，假设你放在 c:/ant
然后到 我的电脑－属性－高级－环境变量
在上面一部分 点 新建变量名填ANT_HOME 变量值填c:\ant 注意不要写成c:\ant\
下面一部分，找到Path 点编辑在最后加入个分号，然后输入 c:\ant\bin
确定就行了

RunCommand插件同样放到FlashDevelop 的插件目录
Templates 模版文件放到FlashDevelop安装目录/data/oject Templates/ 目录中

第二步: Tweaking the Environment a bit.(不会翻译了……)

在ToolBar.xml 文件中添加下面这一行代码

PLAIN TEXT

XML:

1. <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 目录中

PLAIN TEXT

Actionscript:

1. package org.flashdevelop.utils {
2.     import flash.system.fscommand;
3.     public function xtrace(msg:Object):void {
4.         fscommand("trace", msg.toString());
5.     }
6. }

 

第三步 创建一个项目
全部设置好后，重启一下flashDevelop
创建一个新的as3项目 选好路径命名后，你的项目就建立好了
接着要给这个项目添加一个as3类路径 点击project-properties 打开后选择Classpaths 选项卡 点Add 浏览到刚才所说的Intrinsic Class Files就行了(我在做的过程中项目和Intrinsic Class Files不再同一个盘符中就提示出错，然后我将其放到和我的项目的同一个目录中就ok了).
如果要使用xtrace功能，打开项目中的build.xml文件加入下面这行代码

PLAIN TEXT

XML:

1. <arg line="-source-path=‘C:/Program Files/FlashDevelop/Library‘"/>

找到第26行
以下[28]就是我们加入的

PLAIN TEXT

XML:

1. [26]<target name="compile">
2. [27]        <exec executable="${flex2.dir}/${compiler}">
3. [28]            <arg line="-source-path=‘D:/Program Files/FlashDevelop/Library‘"/>

 

打开build.properties 修改flex2sdk的路径和其他的路径，这些应该不用多说了，呵呵

现在打开App.as文件，如果要使用xtrace 就要导入这个方法
import org.flashdevelop.utils.xtrace;
然后你就可以使用了，比如
xtrace("hello world");
然后点击Ant Build 按钮，就ok拉，呵呵

偶翻译的还是很简陋的，e文比较差…..，只是以笔记的形式写了下来，具体还是建议到
http://www./blog/?p=849