[Update: This is an update on my post Complete starter guide for developing Flash projects using Eclipse/FDT. I've also decided to merge the follow up post Complete intermediate guide for developing Flash projects using Eclipse + FDT into this one updated post]

This post is aimed at beginner Actionscripters. It covers all the basics of setting up Eclipse and FDT environment to develop some kick-ass websites in a more structured Object Orientated approach. From managing workspaces to connecting with repositories, this document should be all-inclusive for any new Actionscripter who wants to start doing some serious Flash projects. If I missed something please feel free to comment or send it to me so I can update this post.

Eclipse IDE explained in a nutshell

The Eclipse IDE consist of several graphical user interfaces. Each of these interfaces has a specific purpose. You can decide which interfaces to switch on and off depending on your development needs. The major break down is as follows:

Workspace

The location where all your files will be created. Eclipse has a project explorer which is essentially your project folders & files. You can have multiple workspaces on your machine and switch between them as and when required.

Perspective

This is basically all the interfaces you are looking at when launching Eclipse. As mentioned above you can personalise what you want to see. A perspective is a collection of graphical user interfaces, i.e. views. Similar to workspaces you can have multiple perspectives. The default is Java as Eclipse is primarily a Java development tool. Written in Java for Java.

After installing FDT, Eclipse should open up the Flash perspective by default. This is extremely powerful as I can setup different workspaces for different programming/scripting languages. I can keep all my Java projects together and similarly all my HTML and Flash projects respectively. Each workspace has its default perspective associated to it. I could have different language projects in the same Workspace and just switch the perspective as required. Later in this post I explain how I like to setup my workspace.

Views

Views are the graphical user interfaces that make up each perspective. Views as with perspectives can be customised to the developer's needs. Each workspace remembers what views are in use and therefore you can have specific views for say your Java Perspective and also specific views for Flash. In Java I might not need the SWFViewer View so I can disable it. Similarly in the Flash Perspective I might not require the Junit View.

Getting started

We use the following tools for our Actionscript projects:

• Download the latest Eclipse from http://www.eclipse.org/downloads/ »
• Install the latest FDT using the update site is: http://fdt.powerflasher.com/update
• Webtools for Eclipse http://download.eclipse.org/webtools/updates/ (Optional) Webtools is only required if you want to be able to edit HTML, JavaScript, XML and CSS with code hinting and colour syntaxing. I do not cover this plug-in however after this post you should be well capable of installing this plug-in without any problems.

Installing plug-ins for Eclipse

There are two ways to install a plug-in for Eclipse. The first would be to copy the features and plug-ins folder manually from your plug-in download archive to the root of the installed eclipse location. The second would be to use the update site should one exist for the plug-in you want to install. An update site doesn't always exist as it depends on the author of the plug-in to create one. Basically as oppose to downloading the archive file for the plug-in you download it through the Eclipse interface wizard and Eclipse installs it in the correct location.

It is obviously much better to manage your plug-ins this way. I would advise you use this method always if available. It is entirely possible for you to remove the wrong files and that could have a severe impact on Eclipse itself. Although that is quite a serious warning it is not the end of the world. The good news is that as long as your workspace is in tact, i.e. no files are corrupt etc.; you should be able to install a new version of Eclipse without any problems and set the workspace to point to your old one.

Creating a new Update site

Follow these easy steps to add a new update site:

• Launch Eclipse
• Help » Software Updates » Find and Install
• Select Search for new features to install and click Next
• Click on New Remote Site
• Give the site a descriptive name for easy future reference
• Enter the URL to the site and hit OK
• Check the newly added site and click on the Finish button.
• Usually Update Site Mirrors dialogs will popup if a mirror site is available. Here you can select a mirror location closer to home or check the Automatically select mirrors checkbox and let Eclipse do it for you.
• Hit OK

Due to this you might want to install a plug-in that actually requires (dependant on) another plug-in and an error will appear in the dialog's white space as soon as you select the feature that you want to install. As far as I know this is common with older style plug-ins because creating plug-ins for Eclipse 3x has changed quite a bit since Eclipse 2x. However this does come down to the way the plug-in was created and there isn't much you can do without tracking down this dependency in order for your plug-in to be installed.

Click on Select Required if you are installing a plug-in while searching for Eclipse project updates. By default you should have 2 remote sites after installing Eclipse called Europa Projects updates or Europa Discovery Site. These sites contain updates for the Eclipse IDE and can also help solve some of these dependency issues. If you get an error while trying to install a feature click on Cancel and do the update process again except this time include the above mentioned update sites.

If this doesn't work try unchecking the Show the latest version of a feature only checkbox. Unchecking this will show all the versions available within this feature to show and there might be a previous version you can use.

Important note: For the purpose of this post you shouldn't get this dependency error. By installing the Classic Eclipse Europa IDE release and FDT3 you will have everything you need. The above solution is for future additions you might want to make to your development environment.

Managing Eclipse plug-ins

After Eclipse 3.3 there were some changes in the management of plug-ins. The steps below describes the latest version when this post was updated.

• Launch Eclipse
• Help » Install New Software
• Click on "Available Software Sites"
• Select a feature and click on "Edit" to see more details

Eclipse workspace

It is a good idea to have different workspaces for different clients. By doing this you reduce the amount of projects you have in one workspace as it can fill up quite quickly. Darren Schall has a post specifically about understanding the power of Eclipse workspaces. Having loads of projects in one single workspace can slow Eclipse down as FDT builds each project on start-up to give you any errors in your class files.

Alternatively if this is not how you like to work, then simply make use of "Working Sets". Working Sets are a quick and easy way to filter what is shown in your Project Explorer. There are a few ways of creating Working Sets but the easiest is to click on the little arrow with tool tip "View Menu" and choose "Select Working Set". With this window one can select, add or edit a new Working Set. Use the arrow button to select or deselect a working set.

It is important to know however that a working set will not filter quick search of resources using the Ctrl + Shift + R shortcut. Working Sets doesn't "close" a project it simply hides it. If you want to avoid resources appearing when using this shortcut from other projects in the workspace then you have to either close the other project or using different workspaces.

Eclipse/FDT memory issue

It's not really an issue but rather an adjustment that has to be made for FDT to fully function. When you download Eclipse the default memory allocation for Eclipse is 256Mb. For use with FDT we will have to change this to 512Mb or higher. Don't worry it's very straight forward:

• Browse to your Eclipse installation directory
• Open the file "eclipse.ini" with a text editor and change the line -Xmx512m
• Save it and close.

That's it. Now Eclipse will use 512Mb memory and FDT will be able to fully function. Restart Eclipse and Voila!

Creating a new FDT project

Creating a flash project is a three part process. Choose a name for you project. Select the linked library you want to use. After successful creation assign a source folder where your classes will reside.

• Make sure you are in the Flash perspective. To do this go to Window » Open perspectives » Other
• Select Flash and hit OK
• Go to File » New Flash Project
• Enter the Project name
• Leave the location as default unless you want to change it
• Select which version of Actionscript you want to use
• Select the version of the Flex SDK you want to use. FDT comes pre-installed with the latest stable SDK version so it's merely a choice of whether you want Flex, AIR or pure AS support.
• Click Next
• Add or Edit the src folder. The src folder is where all you classes will be kept. It is treated differently by FDT than other folders as it will be recursed and indexed to give you that magical code hinting you can't live without.
• You can set the default output folder if you wish. This is the destination folder of where the Flash SWF file will be compiled to
• Click Finish

What are the differences between a Linked Library and an SWC?

There is no fundamental difference. An SWC is a collection of classes, i.e. a compiled set of classes. A linked library is reference to a collection of classes that is not compiled but can also be an SWC. An SWC can be setup to be a linked library. This was used in MX days to create components and to distribute a set of classes. Now it is an acceptable format for distributing components and a collection of classes.

Managing SDK's or Core Libraries

This is quite a hard one for lots of people as the UI doesn't seem to be very user friendly. But I will try and explain how the set up works. It is worth mentioning that FDT 4 has some great improvements on this front. So this is more for people like me who are still using FDT3.

When FDT is installed, the core SDK is included. This will be unzipped the first time you run Eclipse with FDT installed. The core libraries are managed in a two part process. The set up of a "Path Variable" and the set up of the Core Library itself. The Path Variable is a variable that points to the destination of the Flex SDK. A Core Library will reference this Path Variable. To see what I'm talking about do the following:

• Windows » Preferences
• Expand FDT
• Click on Core Libraries

Install Flex 4 SDK

If we were to install a new Core Library like Flex 4, we would need to do the following (FDT 3):

• Do the above steps
• Then click on Add
• Select "Flex 3 SDK for FP10" from the dropdown
• Enter a Name for your Core Library
• Click "Browse" for a Path Variable. Now we haven't created a Flex 4 Path Variable yet, so we will do it in this step.
• Click "New" in the new pop-up
• Enter a Name for the new Path Variable
• Browse to the location of the extracted Flex 4 SDK
• Click OK
• Click OK again
• Click OK again

Now we have successfully added a new Core Library however we haven't associated it with any projects.

Change existing Project Core Library

To change the library an existing project uses do the following:

• Right Click on the Project Name in the Project Explorer
• Click on Flash Parser
• Choose a new SDK to use
• Click OK

Automatic building and cleaning projects

Upon launching Eclipse after successfully installing and creating FDT projects, FDT should automatically build the workspace. This means it checking the codes for errors and warnings and displaying them. This also happens when you save a file. You can clean a project and then re-build it, i.e. refresh FDT if you need to force FDT to re-evaluate your classes. Sometimes the last state of errors are displayed if you open a file and only updates when you alter and save the file. This doesn't happen too often but sometimes can.

Building projects automatically can be by simply deselecting the Build Automatically option in the menu under Projects. Similarly cleaning a project can be done here as well.

Code Templates

Tired of typing all those getters and setters? Maybe you use Singeltons often or have a custom Log class. There is no reason to do al that typing. FDT has some built-in templates but here is how you add your own custom ones.

Adding a getter & setter template for AS3

• Window » Preferences
• FDT » Editor » Templates
• New
• Name: gettter (This will be what you type in to activate this template with Ctrl+SPACE so keep it short and easy to remember)
• Type: AS3
• Description: getter & setter: Create getter & setter methods

Pattern:

public function get ${var}():${type}
{
    return _${var};
} 
public function set ${var}( value:${type} ):void
{
      _${var} = value;
}

Problems

I got 99 problems... Well, there's no need for 99 as you can switch them off. Apart from the strict compiler setting, you can actually set what type of errors you want FDT to make visible. Now you may wonder why you would want to do this but in some cases you might have an AS2 and AS3 project running in the same Workspace, and for AS2 you want to allow untyped member access as that is what you are used to. Seeing all these errors while you project still compiles is a bit annoying. Go ahead. Turn them off.

• Windows » Preferences » Problems

Local history

The local history has definitely saved a few asses in its day. Eclipse keeps an internal history of all modifications made to your files. Obviously this is not as persistent as a version control repository. Nonetheless having this always available is an incredibly strong feature for any development environment. To set the preferences for the local history:

• Windows » Preferences
• General » Workspace » Local history

Compare files

Probably the coolest feature of Eclipse. Comparing two files with the differences highlighted. The Compare With view allows you to compare files from the local history, with a specific revision in the version control repository or with another file in your project. Nothing compares.

• Right Click on file
• Select Compare With local history or from the latest revision from version control

Search

A great advantage of coding with FDT is that all your classes are external, which means all files are text files. Search functionality is ever present in all Actionscript IDE's, although I have yet to see any IDE match Eclipse. A search feature is vital with maintenance, especially if you don't know the project. Apart from the normal Find and replace within a single file, Eclipse has an advanced search that will make maintenance and updating a breeze. Searching for a single file:

• With the text editor focussed, i.e. the cursor is active
• Hit Ctrl + SHIFT + R
• Type in the filename you want

To search within a file:

• Select the folder you want to search within, no selection the search will happen through the entire workspace
• Ctrl + H
• With the first tab selected, "File Search"
• Enter the search string in Containing Text
• In the scope group select if you want the entire Workspace search or set the current folder as the starting point for recursion by selecting Selected resources. Enclosing projects will do a recursive search within the current project.

TODO or not TODO

This feature is not only useful for solo Actionscripters but also for teams to manage what still needs to be done on a project. By using comments and typing the words "TODO:", the comment is added to a pool of comments which can be seen by the TODO view. This is especially useful for all those mental notes a developer has. Imagine writing thoughts down but for everyone to see. Anyone who opens the project can see what is on the TODO list. This very often helps with maintenance on tight deadline projects where shortcuts or amends take precedence of a solid foundation solution. By making a note of these hacks or quick fixes using TODO it will add to the transparency of your code which is imperative when working in a greater than one environment.

Example: //TODO: Optimise the method to load data from XML

To see all the TODO's in a project:

• Window » Show View » Other
• General
• Tasks

Bookmarks

Very similar to TODO's, bookmarks are exactly what the name suggests. A great way to make notes of where important functionality resides within classes. Larger projects can be very daunting but breaking things down and making notes without touching the class itself is priceless. That would be the advantage over TODO's. It doesn't mean you need to alter anything in the code. As an observer you can make notes about code snippets that are of importance to you.

To see all bookmarks:

• Window » Show View » Other
• General
• Bookmarks

Version control

In Eclipse all version control software work in the same way. Everything happens from the Team view and is mostly accessed through the context menu.

Basics: How to use SVN and Eclipse

Below are a few basic steps for setting up Subversion with Eclipse

• Retrieving files
• Install the Subclipse plug-in using the update site http://subclipse.tigris.org/update_1.2.x
• Restart Eclipse

If the SVN Repository view is not open then open it like so

• Window » Show view » Other
• SVN
• SVN Repository

Basics: Checkout Project from SVN into Workspace

Checking out a project is very simple. The SVN Repository View introduces a nice way for managing your SVN repos:

• Right click on the view and select New » Repository location
• Type in the url to the repository location e.g. http://papervision3d.googlecode.com/svn/
• Right click on the new repository and select Checkout
• Select Check out as a project in the workspace
• Click Next if you want to checkout to another workspace otherwise you can hit Finish

Adding a project to a repository

A few simple steps and you have added an existing project to Subversion:

• Right click on the project in Flash Explorer
• Team » Share Project... » SVN » Next » Use project name as folder name » Finish » OK

Basics: How to use the VSS Eclipse plug-in

[Update: Not sure if anyone still uses this Eclipse plug-in but I left this legacy set up in just in case]

• Download the latest plug-in files from sourceforge http://sourceforge.net/projects/vssplugin/ »
• Extract this into your root eclipse installation folder
• Restart Eclipse if open
• Create a new Flash Project (requires that FDT is installed)
• Right click on the project and select Team » Share project
• Select VSS Configuration Wizard
• Enter username
• Enter password
• VSS Directory: Browse to folder location of srcsafe.ini
• Relative mountpoint: Browse to the project you want to link to and click ok
• Click on Finish
• Right click on the project and "get latest version". This will copy all the latest files from the repository to your machine.
• Right click on project Team » Update State. This will update the checkout status so you can see if someone else is working on specific files

Ctrl + Enter run setup

[Update: I'm leaving this legacy set up as part of this updated post as I'm sure there might be some people who still use AS2]

So a complaint I hear from a lot of developers are that FDT and Eclipse is great however you need to constantly jump between the Eclipse IDE and the Flash IDE. For an AS2 project this is absolutely true but there are some tweaks you can add to your Eclipse environment to improve this workflow. For AS3 projects you could use FDT to run your code without an FLA at all. You can create FLA libraries or use external assets and embed/load them at runtime and compile your project without requiring any FLA at all.

After this little tutorial you should be able to run your current application using the shortcut Ctrl+Enter as you would run "Test Movie" in the Flash IDE. This obviously only works once you have it setup.

• Window » Preferences » Run/Debug
• Launching » in the Launch Operation group select Always launch the previously launched application
• Window » Preferences » Keys
• Scroll down to Run Last Launched
• Focus the Binding textfield, i.e. click into it
• Hit backspace then Ctrl + Enter
• Click OK
• Run » Open Run Dialog
• Right click FDT Flash IDE
• Project browse to project that you want to run
• Browse to the FLA
• Operation » Select TestMovie » Delete ASO Files before Flash execution (Optional)
• Apply » Run

After you have done this Ctrl+Enter will be a shortcut for the last run FDT Flash IDE configuration. So you can set up all you projects and run the one you are currently working on for the first time. There after you can use Ctrl + Enter. Very useful indeed.

Hopefully this post will help some people to get started with Eclipse and FDT. I know it took me along time to understand everything and I think a starter document like this would have been very handy. Well, sharing is caring. How cheesy is that?