EVOLVE

Learn & Interact with the ActionScript World

Subscribe via E-Mail

Setting Up Eclipse & FDT3

There are some things that I want to write about on this blog that I feel like I can’t do as of yet because some of them are geared more towards Eclipse/FDT3 users or at least the way I use those tools. That being said, I figured I should give a rundown of how I install Eclipse and FDT3 and how I set up my environment. FDT comes with a hefty price tag, that’s for sure, but it’s well worth it if you are serious about Flash development. If you just want to try it out, there is a 30-day trial so you can use that for now.

NOTE: Click on the images to see larger versions.

For those that don’t yet know, Eclipse is originally a tool used to program Java. It has things called Perspectives, which could probably be called Plugins, that basically lets you use Eclipse to edit code of other languages while getting all the advantages of using a tool like Eclipse. Eclipse runs on the Java framework so it is available on both Mac and PC. FDT3 (Flash Development Tool version 3) is a tool developed by Powerflasher which is basically a perspective for Eclipse to edit ActionScript code. In conjunction with the Flash CS3 IDE it becomes very powerful. One thing to note, however, is that you can only develop strictly object-oriented code in FDT as it does not work with timelines and all that. It is purely for ActionScript development. Let’s get started.

Step 1: Downloading & Installing Eclipse
So the first and most obvious step is to install Eclipse. You can download Eclipse from the Eclipse homepage by clicking on the Downloads link in the top navigation and clicking on Eclipse IDE for Java developers. Here you can download from any mirror you like (I just selected the default). After you’ve downloaded the file you should have a zip of the program saved somewhere on your computer. Let’s locate that zip file and extract it.

You’ll notice that it unzips into an eclipse folder and there is no setup file. This is the program, nothing else to install. Because it runs in the Java runtime there is no setup to run. At first this was kind of odd to me but it’s actually pretty useful as you can version your eclipse installations and run a couple of different ones at once. For now, however, we will just run one.

Let’s simply go ahead and drag the folder where we want to keep our installation. I am on a Mac so I’m going to drag it into my Applications folder but you PC users can just drag it to Program Files or wherever you want to keep the installation files. Believe it or not, we are done installing Eclipse. Pretty easy, eh?

Step 2: Installing FDT3
Installing perspectives or addons in Eclipse is a little different than you’ll probably be normally accustomed to. They are downloaded through Eclipse itself and installed for you rather than you manually downloading files and installing them with a setup file. Let’s open up Eclipse.

You’ll be greeted with a window that asks you to select a workspace. In eclipse, workspaces are basically like projects. Personally, I create a new workspace for every project that I have to keep everything nice and separated. I have a folder on my hard drive called Projects and that is where I keep all my workspaces. How you set your file structure up is entirely up to you. I’m going to set up a new folder for this exercise called Eclipse Setup in my Projects folder. You can also choose to use this workspace as the default so that you don’t get asked what workspace you want to load every time Eclipse starts, but I prefer that because I switch workspaces often so I’m going to leave that unchecked.

When you click OK, Eclipse will go through it’s usual start-up and you will be greeted with a Welcome screen. I usually just exit out of this top (on the top left side) and it brings up the Java perspective. Of course we don’t really care about Java so let’s get started in installing FDT. Go to Help > Software Updates > Find & Install and select Search for new features to install. Click Next and you will be greeted with a window that probably won’t make any sense. If you’d like, you can refer back to all these update sites in the future but for now let’s click on the New Remote Site button. This will bring up the New Update Site window and here is where we will input the information for downloading FDT. As of this writing, the site we want to download from is located at http://fdt.powerflasher.com/update/. For the name, let’s put in FDT and that address in the URL field. Then click OK. When you’re back at the Install window, click Finish.

Next you will see the Updates window where we will select what things we want Eclipse to update. Let’s check FDT and click Next. On the next screen just check the license agreement box and click Next. Then click Finish. The Update Manager window will pop up and download the appropriate files for FDT. The What’s New window will pop up for FDT and here you can read the updates that have happened in the most recent versions. Let’s click OK and move on. In the Verification window you will be asked if you want to install what you just downloaded. Usually these downloads are not digitally signed but we trust the source so just click Install All and Eclipse will do its thing. When it asks if you want to restart, click Yes. Eclipse will now restart and ask for your workspace again (if you didn’t check the default box initially). Select your workspace and you will be headed into the Java perspective again. We now have FDT installed so let’s move on to the next step.

Step 3: Setting FDT3 Up
When we are in Eclipse we can get to the FDT perspective in two ways. You can either go to Window > Open Perspective > Other and select Flash FDT from the popup window or click the Perspectives button on the top right and select Other > Flash FDT. If you get greeted by a very cryptic Not enough memory window like I just did, see this post about how to fix that.

Let’s click the Try FDT button (unless you have a serial number, go ahead and enter that). We are now in the FDT perspective and can begin using it. I normally minimize all the windows except the Flash Explorer so that I can get to my files easily. How you want to set up your workspace is entirely up to you.

The first thing I like to do when I install Eclipse is set up my preferences. I’m not a fan of the default colors and things like that so I like to set them up the way I like them. You can do that by going to Eclipse > Preferences. There are settings for General usage in Eclipse as well as FDT specific preferences. There are SO many preferences you can set here so I won’t go into detail on this, you can play around yourself, but I want to point out two things here.

The first is in General > Workspace > Linked Resources. These are code libraries you can add to your projects that will allow you to store all your files in one spot but use them in all of your projects. It basically acts as a gateway between a central location on your computer for usage in all your projects. What I normally do is set up a centralized code bank on my hard drive and link it in here to use in all projects that require it. It’s very easy to set up a new linked library. Just click the New button, then give it a name (mine is AS3CodeBank) and click the Folder button to select the location of the files on your hard drive. Then click OK and you can now use this in any project you like in the future.

The second thing I’d like to point out is under FDT > Editor > Templates. These are like snippets that you may be familiar with from tools such as SE|PY or FlashDevelop except that you can put in wildcards for a bunch of different things. For instance, I have a class snippet (I edited the default class snippet) that lays out my class template for me with the click of a button (Ctrl+Space to be exact and start typing class and hit Enter when class is highlighted). This always saves me a LOAD of time because my class template is rather extensive. It also puts in the wildcards for me, like class name wherever I specify it and other things, all the way down to where I want the cursor to appear when I load up my template. It is a huge timesaver to have tools like this at your disposal.

Step 4: Creating a Project
Now what you want to do is start a new Flash project. To do this, right-click in the Flash Explorer and go to New > New Flash Project. I normally like to work in a source/deploy folder structure so I’m going to call this folder source. I’ve also loaded up my FDT3 preferences (which you can get from the downloads page) before starting this project so I have all my linked resources and libraries available to me when creating a new project. Select ActionScript 3 from the Project Language area if it isn’t already selected and in the drop down let’s use CS3 for the core library. This basically brings in all the CS3 core class files for usage in our FDT project. It is the equivalent of setting the CS3 folder as a project classpath in Flash. Then click Next.

In the next window we can set our linked libraries and source folder. Click Add Linked Libraries and then Add. I’m going to select my AS3CodeBank, GreatWhite, and fl libraries by Ctrl+Clicking them, and then clicking OK and then Finish. When you’re back at the Flash Project settings dialog, click Create Source Folder and name it /src and click Finish. This is my own convention but basically what this does is creates a folder to hold all your project specific class files for this project. Note that the /src folder will be added to your hard drive by FDT (inside of the workspace Eclipse Setup/source/src) so this defines your folder structure for your project. Let’s click Finish again and we have now set up most of our source folder. I’m also going to add an fla folder to hold my FLAs by right-clicking on the source folder in the Flash Explorer and going to New > Folder. I’ll name my folder fla and click Finish. This is what your Flash Explorer should closely resemble now.

Lastly, I’m going to create my output folder, deploy. Right-click anywhere in Flash Explorer (but not in the source folder area) and select New > Project. I don’t set my deploy folder as a Flash Project because it doesn’t contain source folders, linked libraries, or FLAs so it can just be a generic project. In the New Project wizard select General > Project and click Next. Give it the name deploy and click Finish.

I then create my output folders in my deploy folder. I usually have a swf folder for my SWF files and an xml folder for my XML files, but you can put in whatever folders you like and organize it however you want; it’s all up to you. Here is our updated Flash Explorer view.

And now we are done! It is important to note something about the Eclipse preferences and that is that they do not carry over from workspace to workspace. You have to save them out and import them to every new workspace you create. If you want to do this, see this post.

I know this seems like a lot and that is because it is, but it only seems that way because you’re not familiar with Eclipse/FDT3 right now. Once you get used to it this will become second nature and you will realize that the benefits outweigh the negatives when setting up projects. I’ve actually gotten to setting up a project in about 30 seconds now so it really doesn’t take that long and when you start to use all the power of the Eclipse/FDT3 combo you will never want to code in another environment again. The time I save in using these tools is invaluable to me today and I can’t thank Powerflasher enough for creating this awesome (yet pretty pricey) tool.

If you found this post useful, please consider leaving a comment, subscribing to the feed, or making a small donation.

Copyright © 2010 EVOLVE by Matt Przybylski
Powered by WordPress | Hosted by (mt) Media Temple

• Home
• Portfolio
• Stock Flash
• Downloads
• Contact
• FAQ
• About
• Donors