Eclipse IDE Download and Installation, Flash AS2 / AS3 Editor Plug-in Download and Installation (Mac OS X)

WRTG 3014: Scientific Writing Documentation Assignment

By Michael Saltsman Date: February 14, 2008

  2 

Index 

I. Intro – Pg. 3 II. Downloading and Installing the Eclipse Software – Pg. 3 III. Running Eclipse – Pg. 5 IV. Install FDT Flash / Actionscript Plug‐in – Pg. 7 V. Run Updates – Pg. 12 VI. Open Flash Perspective – Pg. 16 VII. Update Memory settings in eclipse.ini – Pg. 17 VIII. Create New Flash Project – Pg. 19 IX. Create Linked Libraries – Pg. 21

  3 

I. Intro 

Welcome to a quick and easy tutorial on setting up the Eclipse integrated development environment (IDE) for use with the FDT Flash / Actionscript plug‐in (FDT) on the Mac OS X operating system (Microsoft Windows documentation will be available separately). This documentation will step you through the following: 

a. downloading Eclipse from the eclipse.org website 

b. installing the software and any available updates 

c. downloading and installing the FDT plug‐in 

d.  creating a new Flash project  e. adding the linked libraries you will need 

to develop in Actionscript 

When finished, you should be able to begin development of your class‐based Flash applications using FDT, increasing your programming efficiency.  

If you already have the Eclipse IDE installed, you may skip to section IV.  

 

II. Downloading and Installing the Eclipse Software 

1. Download the Eclipse IDE by going to the Eclipse project download page located at http://www.eclipse.org/downloads.  

2. Select the option labeled “Eclipse Classic” which at the time of this documentation was at version 3.3.1.1 (fig 1.0). 

3. A “mirrors” page will then recommend the closest download location for you as well as giving you access to all of the other possible options (fig 1.1). 

 

 

(fig. 1.0) Eclipse download page showing all versions of Eclipse 

 

(fig 1.1) Eclipse mirrors page showing all available download locations 

 

  4 

4. Double click on the archive to “unpack” it (fig 1.2). This will place a folder labeled “eclipse” in the same location as you downloaded the archive to.          

5. Install the application by dragging the entire “eclipse” folder and all of its contents to your “Applications” folder  (fig 1.3).  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

(fig 1.2) un‐archiving the Eclipse download 

 

(fig 1.3) Eclipse folder structure 

  5 

III. Running Eclipse  

Eclipse has now been successfully downloaded and installed. This section will help you launch eclipse, setup a workspace and bring you to the Eclipse workbench. 

1. Run the application for the first time by double clicking on “eclipse.app” (fig 2.0).           

2. Upon launching the application, you will be asked where you would like to keep your “workspace” (fig 2.1).  

It is recommended that you keep your workspace in your “Documents” directory. This is located at “/Users/[YourUserName]/Documents”. 

3. Click the checkbox at the bottom of the window that states “Use this as the default and do not ask again” if you would like this to stay as your default workspace location. This will bypass this step from now on. You can always turn this option back on by going into the preferences.  

For more information on setting up and using workspaces, please view the Eclipse documentation.  

Once you have set up your workspace you will be brought to the Eclipse welcome screen.  

4. Choose the icon on the far right hand side labeled “Workbench” (fig 2.2).  

 

 

 

 

(fig 2.0) Eclipse startup screen 

 

(fig 2.1) workspace launcher popup 

 

(fig 2.2) Eclipse welcome screen 

 

 

 

  6 

Workbench is the area from which all development will take place (fig 2.3).  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

(fig 2.3) Eclipse workbench

  7 

IV. Install FDT Flash / Actionscript Plug­in 

You now have a fully functioning version of Eclipse installed and running on your computer. But, in order to do Flash Actionscript development, you will need to install the FDT plug‐in from Powerflasher.com. This is a third‐party plug‐in that will give you code hinting, code completion, syntax and error checking and much more.  

  For the purposes of this tutorial, we will be installing the FDT Basic package trial. If you decide that you need the Professional package, you can do so as well. You will be notified when you can make this decision.  

1. With Eclipse running, go to the “Help” menu and rollover the “Software Updates” option then choose “Find and Install” (fig 3.0).  

2. Choose the option labeled “Search for new features to install” (fig 3.1).  

 

 

 

 

 

 

 

 

 

 

 

  

 

(fig 3.0) choosing “find and install” from the Help menu 

 

 

 

 

(fig 3.1) Install / Update screen 

 

  8 

3. Click the button labeled “New Remote Site” (fig 3.2). 

What you will be doing now is adding a remote site from which Eclipse will contact and download requested software. 

4. In the “New Update Site” window, enter a name for the site you will be adding.  

This can be any name that will help you remember which site you’re updating, for this example it will be named “FDT”.   

 

 

 

 

 

 

 

5. In the URL field enter the following address: http://fdt.powerflasher.com/update (fig 3.3).  

 

 

 

 

 

 

 

 

 

(fig 3.2) Install Screen 

 

 

(fig 3.3) New update site popup 

 

 

 

 

 

 

 

 

  9 

6. Once completed, click OK and your new site will be added to the list of update sites (fig 3.4).  

Make sure that the FDT site is selected then click the “Finish” button. 

 

 

 

 

 

 

 

 

 

It is now time for the actual installation of FDT. This is where you can make your choice to install FDT Basic or FDT Professional.  

Remember, FDT is not free software so you will need to purchase it after the 30­day trial is over. Please visit http://fdt.powerflasher.com for pricing information.  

7. Make your choice by checking the correct option and then clicking the “Next” button. (fig 3.5) 

(fig 3.4) Install screen with FDT selected 

(fig 3.5) Updates screen with installation options 

 

 

 

 

 

 

  10 

8. Read through the license agreement and if you would like to continue, click the radio button that reads “I accept the terms in the license agreement” and then click “Next”.  (fig 3.6) 

 

If you do not agree with the license agreement in fig 3.6, click the “I do not accept the terms in the license agreement” radio button and FDT will not be installed on your machine.  

 

         

9. Click the “Finish“ button on the confirmation screen (fig 3.7) to begin the download of FDT (fig 3.8).  

 

 

 

 

 

 

 

 

 

 

 

 

(fig 3.6) Install screen with license agreement 

 

(fig 3.7) Install screen showing selected installation options 

(fig 3.8) Update manager screen downloading FDT 

  11 

Once FDT has finished downloading, it will automatically begin the install process into Eclipse. You will be presented with an FDT information screen documenting all of the version features (fig 3.9). 

10. Press the “OK” button to continue  (fig 3.9). 

 

 

 

 

 

 

 

 

11. Click on the “Install All” button and the FDT plug‐in will be installed into Eclipse (fig 3.10). 

 

 

 

 

 

 

 

 

 

12. Press “Yes” in the “Install / Update” popup and Eclipse will be shut down and automatically restarted (fig 3.11). 

 

 

 

(fig 3.9) FDT information screen 

(fig 3.10) FDT installation verification screen 

 

(fig 3.11) Install / Update restart popup

  12 

V. Run Updates 

Now that you have a new installation of both Eclipse and FDT, you will want to make sure that you have all available updates to both pieces.  

1. Go to the Help menu and choose “Software Updates” and “Find and Install”.   

2. Choose the option “Search for updates of the currently installed features” (fig 4.0).   

This will do a search for any updates to both Eclipse and FDT.   

3. Click the “Finish” button  

 

 

 

4. In “Update Site Mirrors” window that appears, click on the “Automatically select mirrors” checkbox at the bottom of the window then click OK (fig 4.1).   

 

 

 

 

 

 

 

 

 

(fig 4.0) Install / Update screen for updating Eclipse 

(fig 4.1) Update Site Mirrors screen  

 

 

  13 

As before, you will be brought to the Updates window and any available updates will be listed (fig 4.2).   

5. Make sure that if any updates are shown, they are checked and then click the “Next” button. If no updates are shown, click “Finish” and continue to section 5.  

         

 

 

 

If updates are available, you will be brought to the license agreement screen. (fig 4.3) 

6. Read over the license agreement and if you would like to continue, click the radio button that reads “I accept the terms in the license agreement” and then click “Next”.  

 

 

(fig 4.2) Updates display screen 

   

(fig 4.3) Install screen for license agreement 

 

 

  14 

7. Click “Finish” on the confirmation screen  (fig 4.4),  

 

 

 

 

 

 

 

 

 

 

 

 

As before, you will end up at a verification window (fig 4.5).  

8. Choose “Install All” to install all available updates.  

 

 

 

 

 

 

 

 

 

 

 

(fig 4.4) Install screen showing selected installation options 

 

(fig 4.5) Update installation verification screen 

 

 

 

 

  15 

Once the updates have been installed you will need to restart Eclipse for them to take effect.  

9. Click the “Yes” button and Eclipse will automatically shutdown and restart with the newly installed updates (fig 4.6).  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 (fig 4.6) Install / Update restart popup

  16 

VI. Open Flash Perspective 

You are now running Eclipse with FDT installed and even though you might think you’re ready to start building your Flash applications, you have a few more steps to go.  The first thing you will want to do is change the layout of the environment so that it’s congruent for Actionscript development. This is what is called the “Perspective”  

1. Go to the “Window” menu and choose “Open Perspective” and “Other” (fig 5.0).     

2. Choose the “Flash FDT” option and click OK in the “Open Perspective” window (fig 5.1).   

 

   

 

 

 

 

 

 

 

 

 

 

 

 

 (fig 5.0) Open Perspective menu 

 

 (fig 5.1) Open Perspective selection window

  17 

VII. Update Memory settings in eclipse.ini 

At this point, you may be presented with a “Not enough memory” error (fig 6.1).  If you happen to come across this error, this section will show you how to remedy it. Even if you don’t see this error, it is recommended that you follow these steps to increase your performance and avoid memory errors in the future.  

 

1. Close Eclipse.  2. Navigate to the folder that holds the 

application labeled “Eclipse.app”.  

 

 

3. Right click on this application and choose the option “Show Package Contents” (fig 6.2). 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

(fig 6.1) Not enough memory error popup 

 

 

 (fig 6.2) Right clicking on eclipse.app will display this menu 

 

 

 

 

 

 

 

 

 

 

  18 

4. Navigate to “Contents/MacOS”  5. Open “eclipse.ini” with any text 

editor. 6. Look for a line that reads “‐

Xmx256m”. If you see this line, change it to read “‐Xmx512m”, if not, add it to the file (fig 6.3).  

This will increase the max amount of memory that Eclipse is allowed to use from 256 MB to 512 MB.  

7. Save and close this file  8. Restart and begin to use Eclipse. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 (fig 6.3) eclipse.ini opened in a text editor

  19 

VIII. Create New Flash Project 

Because you have just switched into the Flash perspective and have not yet registered FDT, you will be presented with a notice that you have 30 days left to use the plug‐in (fig 7.0). Once it is registered, this notice will no longer appear. For information on registration of FDT please visit the Powerflashers website at http://www.fdt.powerflashers.com.  

 

 

 

 

 

1. Create a new flash project by right clicking in the “Flash Explorer” window  

2. Go to “New” and “New Flash Project” (fig 7.1).  

This “New Flash Project” option exists because you are in the Flash perspective. In any other perspective you would not have this specific option.  

 

 

 

 

3. Give the project a name by entering it in the “Project name” field.  

4. Choose if your project is going to be developed using Actionscript 2 or Actionscript 3 (fig 7.2).  

 

 

 

 

 (fig 7.0) FDT registration / demo screen 

 

 (fig 7.1) right‐click  in flash explorer to create a new flash project 

(fig 7.2) New Flash Project window 

  20 

5. Click “Finish“ and your new Flash project will show up in the Flash Explorer window (fig 7.3). 

 

 

 

 

 

 

 

 

 

 

6. Right Click on your new Flash project. 7. Go to “Source Folder” and choose 

“Add to Classpath” (fig 7.4).  

 

 

 

 

 

 

 

 

 

 

 

 

  

 

 

 (fig 7.3) New Flash Project displayed in Flash Explorer 

 

 

 

(fig 7.4) Right click on flash project and Add to  Classpath

  21 

IX. Create Linked Libraries 

The final step before you can start development in Actionscript 2 or 3 is to add your linked libraries. What this will do is give Eclipse and FDT access to all classes and methods that are normally available from Flash by linking directly to the class files.  

1. Right click on your Flash project  2. Choose “New” and “Linked 

Libraries” (fig 8.0).  

 

 

A “New Linked Libraries” window will  open. Next, you will need to then add a new source folder (fig 8.1).  

 

 

 

 

 

 

 

 

 

 

1. Click on the “Add” button, then click “New” (fig 8.2).  

 

 

 

(fig 8.0) Right‐click on flash project to create a new linked library 

(fig8.1) New Linked Library Window 

(fig 8.2) Linked Libraries display window 

 

 

 

  22 

2. In the name field of the “New Variable” window enter “AdditionalClasses”, paying attention to the fact that you cannot have spaces in this name (fig 8.3).  

3. Click on the “Folder” button to the right of the location field.  

4. Navigate to your user folder, then to “Library/Application Support/Adobe/Flash CS3/en/Configuration/Classes”.  

5. Select this folder and then click OK in the “New Variable” window. 

This will add a new Linked Library to your Flash project and from this point you should be ready to start development on your Actionscript 2 or Actionscript 3 project.  

Now that you have completed this documentation, you should have Eclipse running with the FDT Actionscript plug‐in installed. You should also have all updates to the software completed as well as a new Flash project started with a Linked Library to all existing Flash classes. Hopefully this powerful new tool will bring you much coding enjoyment and increase your development efficiency.  

 

 

 

 

 

 

 

(fig 8.3) New Variable window