Complete intermediate guide for developing Flash projects using Eclipse/FDT

| | Comments (1) | TrackBacks (0)
This is a follow up from the Complete Starter guide. You may want to read that first if you are new to Eclipse and FDT. The aim of this article is to provide some helpful insights when developing Flash websites using the Eclipse platform with the FDT plug-in. The focus will be more on the platform and how FDT offers certain features that you as an Actionscripter just can't live without. The Eclipse IDE is full of very useful built-in features. All of which is available to use. This article relies on the default shortcut keys when FDT is installed.


Copying Workspace settings

In the complete starter guide we introduced how leveraging different Workspaces for clients, can keep everything very neatly organised.

The only problem is Eclipse has a few different states of instantiation. By this I mean certain features and preferences are specific to your Workspace whereas others are specific to the Eclipse IDE. Still confused? Installing the FDT plug-in for example will be part of the global Eclipse Application instance. This means that it doesn't matter where you Workspace is, the plug-in will always be available. Some plug-in aren't global and install themselves to the "Workspace" instance which is associated with the current Workspace. No doubt that if you tried to setup different Workspaces, you lost most of your settings with the new one. Your layout of views for example would be reset to the default. This is not only annoying but rather cumbersome if you have a very specific Eclipse setup or many different clients. So how do we copy the settings of one Workspace to another?

Up till now it's a manual job. Other perspective allows you to export these settings to a file, but with FDT we have to do it manually. Not too worry though it's dead easy. With every Workspace a folder called ".metadata" is created in the root of that Workspace. This folder contains all your preferences for various plug-in etc. Copying this will copy all your settings, including your view layout. The metadata folder contains info about the projects in your Flash Explorer view. By copying and possibly overwriting an existing metadata folder, you run the risk of removing the projects from your Flash Explorer. This won't delete the projects from the file system but it will update the Flash Exlporer with the projects that are listed in the metadata preferences. Because of this, Eclipse might throw an error as some of the projects won't exist in the new Workspace's file system. Not too worry, just click OK and delete the empty projects from your Flash Package explorer.


Linked libraries

A central location for most things is very useful. Not just for the car keys but also for your code. Linked libraries are location variables for Eclipse to these libraries. Since the introduction of SWC's code libraries have become widely used. The idea is simple. If you have code that you use very often then compile that into a SWC, create a linked library through Eclipse and FDT, add it to your project and use it without having to copy it to your working folder every time. A linked library is a reference to code in a specific location.


Compiling your own SWC using compc
This is not an FDT & Eclipse feature but thought I throw it in here as I mentioned Linked libraries above and using SWC's. Lets do something useful and package up that illusive "fl" package from Flash CS3. Of course you need the Flash IDE installed to get hold of these classes. The fl package has some cool stuff in it, including those amazing transition classes.

  • Create a folder on the root of your hardrive and call it "temp"
  • Browse to {installation}\en\Configuration\ActionScript3.0\Classes
  • Copy the fl folder to "temp"

To make it easier to access the Flex SDK commandline SWC compiler we will setup an environmental variable path to the Flex SDK. This will allow us to call compc.exe from any system folder in the commandline prompt.

  • Right click My Computer -> Properties
  • Advanced tab
  • Environmental variables
  • Under System variables, browse to Path
  • Click Edit
  • At the end add "c:\flex_sdk_3.0.0\bin" - this must be where you installed your Flex SDK and point to the bin folder
  • Click OK » Click OK » Click OK
Now to create the SWC.
  • Open up your commandline prompt: Start -> Run -> cmd
  • cd\temp
  • compc -source-path=. -include-sources fl -output=C:\temp\fl.swc

Compiling your own SWC using the Flash IDE

You can create SWC from MovieClip's using the Flash IDE. So if you want to use the FLVPlayback for example in you Eclipse FDT project, you can do the following:
  • Open the Flash IDE
  • Create a new MovieClip
  • Drag an instance of the FLVPlayback component to the stage
  • Give it an instance name
  • Set the FLV properties as you require
  • In your library, right click on the MovieClip and select Export SWC file
That's it. You can now place this SWC in your central library and use it in all your new Eclipse FDT projects by adding it as a Linked Library.


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. Changing history settings:

  • Windows » Preferences
  • General » Workspace » Local history

Prefs_History.jpg

Local history preferences

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.

CompareWithRightClick.jpg
Right Click » Compare With Compare With latest from VSS Repository

CompareWith.jpg
Comparison between the working copy and the Repository version

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:

  • Click anywhere within your Flash Explorer
  • Hit Ctrl + SHIFT + R
  • Type in the filename you want

Searching for a string within a project

Click on the folder/package fro where you want the recursive search to start. If you don't select a starting point the entire Workspace will be search. Depending on the amount of projects this could take a while.

  • Select Recurse starting point
  • Ctrl + H
  • Select the File Search tab
  • 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.
  • Hit Search

FileSearch.jpg
Search for a string within a 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


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;
    }
  • Click OK

NewTemplate.jpg
Create your getter and setter template

To use your new template

  • Inside your class type in getter and press Ctrl+SPACE
  • The first option should be your new template
  • Hit ENTER. Voila! Now the key here is not to click outside or Esc after hitting Enter. The "var" text should be highlighted.
  • Type in the name of your property. All the "var" values should now change to what you are typing.
  • Hit tab to move to the return type. Type in your return type. To stop the highlighted text input and tabbing hit Esc.
  • Creating your field var of your new getter & setter is easy. Move your cursor position to after your new private variable, i.e. _selected
  • Press Ctrl + 1
  • Select Create field 'selected'
  • Hit ENTER. Easy peasy.

TemplateCtrlSpace.jpg
Using your template

TemplateEnter.jpg
After selecting your template and pressing ENTER Property name and return type entered

TemplateFieldVar.jpg
Create field variable from getter and setter using Ctrl + 1


Handy shortcuts

Below are some of the shortcuts I use quite often. If you want more then get them here.

Ctrl + 0: A quick outline of the class. Only shows public vars and methods
Ctrl + H: Search
Ctrl + 1: Convert word before cursor to a variable or create a class from word
Ctrl + 7: Toggle single line comment
Ctrl + SPACE: Show code hinting or import a class if pressed after Constructor
Ctrl + SHIFT + F: Format code
Ctrl + SHIFT + O: Organise Imports
Ctrl + Alt + DOWN: Duplicate current line and move down
Ctrl + Alt + UP: Duplicate current line and move up
Ctrl + SHIFT + R: Rename (Resource in Flash Explorer must be selected)
Ctrl + SHIFT + V: Move (Resource in Flash Explorer must be selected)


0 TrackBacks

Listed below are links to blogs that reference this entry: Complete intermediate guide for developing Flash projects using Eclipse/FDT.

TrackBack URL for this entry: http://www.wezside.co.za/cgi-bin/mt/mt-tb.cgi/43

1 Comments

By Joe Wheeler on December 4, 2008 10:51 AM

Hey Wez,

Rather than using different workspaces for different clients, why not just use working sets? The nice thing about working sets is you can have multiple sets active at the same time. I have different working sets for each client and one for my resuse library. Works really well.

J

Leave a comment


Type the characters you see in the picture above.