This guide explains how to set up a Flash and Flex development environment with Eclipse, FDT, Flash Builder and a couple of other editors that you want for ActionScript coding and Flash development with style! This guide is based on Windows because that’s what I’m using but I’m sure you Mac and Linux guys can figure out the parts that differ on your OS! Let’s get started …

• Java Runtime – In case you don’t have it installed yet. Choose either the Standard Java Runtime from Sun or  – my recommendation – the JRockit Runtime from Oracle. The latter is a highly optimized version of the Java Runtime. It’s free but you have to register an account at Oracle to download it.
• Eclipse Platform Runtime Binary – We want the bare bones version without all the additional junk. We’re going to add the stuff we need later. Don’t worry! It’ll be a smooth ride if you follow this guide.
• Powerflasher FDT – The best tool for ActionScript coding … with a price tag! But you don’t want to skimp on professional tools for professional work, do you?! We’re going to install this from within Eclipse later!
• Flash Builder PlugIn – I’d list this as optional since the only advantage of it over FDT is currently it’s visual editor. You don’t want to code ActionScript in this once you’ve used FDT, believe me!
• Other Eclipse PlugIns: HTML-, JavaScript-, XML-, CSS- Editors, Apache Ant (via JDT). These are all tools we need every now and then. Gratifyingly, the Eclipse project provides excellent versions of all these.
• Even more Eclipse PlugIns: Subclipse and Mylyn. Both optional! Subclipse for accessing SVN repositories and Mylyn as a great coding task tool. Both get installed later via Eclipse.

Other Tools you might need/want:

• Flex SDK – FDT ships with it’s own Flex SDK but they are usually a step behind the latest version so I prefer to use SDKs that stand on their own regardless of what FDT ships. Be sure to pick the ‘Adobe Flex SDK’, not the ‘Open Source Flex SDK’ since that one is missing a few things. Also you might want to have several different SDKs installed like for example Flex 3.x and Flex 4 which you can target individually from FDT. If you want to use Ant build files later to build your projects it’s a good idea to place the SDKs in a clean and easy folder hierarchy, e.g. let’s say I have Flex SDK 3.5 and 4.0 on my system then I would put them under C:\Users\username\Applications\FlexSDK\3.5.0 and C:\Users\username\Applications\FlexSDK\4.0.0. I remember having trouble with spaces in path names when I experimented with Alchemy hence I decided to not put the SDKs into a subfolder in ‘Program Files’.
• Flash Player Runtimes – Debug versions, release versions, browser plugins and whatnot. I typically disregard all the versions that come with any Flex SDK or Flash IDE and copy the newest version into a folder that always stays the same (for example C:/Program Files/Adobe/Flash Player/Debug/FlashPlayer.exe and C:/Program Files (x86)/Adobe/Flash Player/Release/FlashPlayer.exe) because it can get messy if you have X different SDK versions plus the Flash IDE, plus Flash Builder etc. installed that all come with their own runtimes.
• Adobe AIR – because Flash development would be only half the fun without it!
• Adobe Flash – The ol’ Flash IDE. If you code with this you will become impotent but it’s still great for putting visual assets together and use these as SWC’s with FDT.
• Alcon – My own little debugging and logging tool. There’s a good choice of similar loggers out there but Alcon still serves me well. Suit yourself.

1. Java Runtime
   This should be straightforward! Choose the one you prefer from the links above and install. If you go for the JRockit one, you might want to set an environment variable (under Windows) named JAVA_HOME that points to your JRockit runtime path. For example I have my JRockit installed in C:\Program Files (x86)\Java\jrrt, (under Windows 7) open the Start menu, from there navigate to Control Panel/System and Security/System, click the Advanced system settings link on the left of the window, in the System Properties dialog click the Environment Variables button, then click the New… button under System variables and enter JAVA_HOME as the Variable name and C:\Program Files (x86)\Java\jrrt\jre (in my example) as the Variable value. You might have to reboot or at least relogin for this setting to take effect.
2. Eclipse
   Download the Eclipse Platform Runtime Binary (currently v3.5.2, ~47MB) and unpack it. Copy the Eclipse folder to where you like, typically something like  C:\Program Files\Eclipse but I prefer to have my installation under C:\Users\username\Applications\Eclipse. The reason for this is that under Windows with UAC turned on Eclipse will create an additional folder in your user location where it stores all your installed PlugIns so you end up with two locations in that things get installed. This led to discrepancies more than once for me before due to ambiguous PlugIn installs. Very, very annoying so eventually I decided to keep it simple and have it in a non-UAC protected location.  The C:\Users\username\Applications folder is my place for all applications that have trouble with UAC.
   Either way, you have your Eclipse where you want it, next step is to edit the eclipse.ini. Your default eclipse.ini will look similar to this:

   -startup
   plugins/org.eclipse.equinox.launcher_1.0.200.v20090520.jar
   --launcher.library
   plugins/org.eclipse.equinox.launcher.win32.win32.x86_1.0.200.v20090519
   -showsplash
   org.eclipse.platform
   --launcher.XXMaxPermSize
   256m
   -vmargs
   -Xms40m
   -Xmx256m

   And this is how it ‘should’ look after you edit it:

   -vm "C:\Program Files (x86)\Java\jrrt\jre\bin\javaw.exe"
   -startup
   plugins/org.eclipse.equinox.launcher_1.0.200.v20090520.jar
   --launcher.library
   plugins/org.eclipse.equinox.launcher.win32.win32.x86_1.0.200.v20090519
   -showsplash
   org.eclipse.platform
   --launcher.XXMaxPermSize
   256m
   -vmargs
   -XX:MaxGCPauseMillis=10
   -XX:MaxPermSize=128m
   -XX:PermSize=64m
   -XX:+UseParallelGC
   -Xms128m
   -Xmx1024m

   If you don’t use JRockit you can skip the first line, if you do use JRockit you need to adapt the first line to point to your JRockit jawaw.exe!
   The -XX:MaxGCPauseMillis=10, -XX:MaxPermSize=128m, -XX:PermSize=64m and -XX:+UseParallelGC lines are not mandatory but they improve performance (or so I’ve heard!). Just be sure to set Xms and Xmx high enough, to at least 128 and 512, but better 1024 (Eclipse and FDT need LOADS of RAM!).
   Next fire up Eclipse and choose your Workspace location. Eclipse will present itself with its nice and warm intro screen …
   

3. JDT & Ant
   Click through to the Workbench (the arrow on the right) and from the menu choose Help/Install New Software… then in the Install window  where it says “Work with:” choose the Galileo update site (Galileo – http://download.eclipse.org/releases/galileo) and in the tree list that shows up, unfold the Programming Languages branch and check Eclipse Java Development Tools. Then click the Next button and follow the install procedure. Restart Eclipse when it asks you to do so after the installation.
   
4. HTML-, JavaScript-, XML- and CSS- Editors
   This is the exact same procedure as in step 3 with the difference that you unfold the Web, XML, and Java EE Development category and check the Eclipse Web Developer Tools, Eclipse XML Editors and Tools and the JavaScript Developer Tools.
   
5. Subclipse
   Next things next! For Subclipse we need to add the update URL to Eclipse. Open The Eclipse Install window again, click the Add… button and enter Subclipse 1.6 as the name and http://subclipse.tigris.org/update_1.6.x as the location (or you might wanna check the official Subclipse site for any newer update URLs) …
   … Hit OK and choose the required Subclipse components from the tree list. You need at least the parts that are marked as required but I also pick Integration for Mylyn, the SVNKit Library, SVNKit Client Adapter and the JNA Library. Can’t hurt to have them on board! After that click Next ansd from there on the procedure is very much the same as before with step 3 and 4.
   
6. Mylyn
   We can install Mylyn and all its dependencies again from the Galileo update site just as above under step 3 and 4. You’ll find Mylyn in the Collaboration category. I’ll go for Mylyn Task List, Mylyn Task-Focused Interface, Mylyn WikiText and Mylyn Bridge: Eclipse IDE. There are some other bridges for other Languages if you want them but since FDT has no support for Mylyn yet there’s nothing for ActionScript. However we can still put Mylyn to good use for our ActionScript programming, we just don’t get the same task-focused integration as with Java or C++.
   
7. FDT
   Time to install the FDT trial! We need to enter the update site just as with Subclipse in step 5. For the update site enter FDT as name and http://fdt.powerflasher.com/update/ as the location (or check the Powerflasher website in case the URL changed). Pick the FDT version(s) that you want to install from the tree list, hit Next and go drink a coffee! Installing FDT will take a couple of minutes. Don’t forget to restart Eclipse after install!
   
8. Flash Builder PlugIn
   At last we install Flash Builder! This step is wholly optional! If you don’t have any use for Flash Builder’s visual editor I actually recommend to skip this step and instead enjoy a more lightweight Eclipse without Flash Builder.
   Head over to Adobe and download the Flash Builder PlugIn trial version (at the time of this writing it’s the Flash Builder 4 beta 2 which can be found at the Adobe Labs). You might be required to register at Adobe to download the trial.
   Next quit your Eclipse and start the downloaded Flash Builder installer. Go through the installation steps and when it asks for the Eclipse install choose Plug into another copy of Eclipse and enter the path to your freshly prepared Eclipse location …
   … continue the installation, then go drink another coffee, installing Flash Builder takes long!
9. Bonus Step
   Download this slick Splash screen and replace the unlucky default Eclipse Splash screen with it by copying it to your Eclipse/plugins/org.eclipse.platform_x.x.xxx… folder.
   

And that’s all for now! With this setup you have your one-stop-shop for Flash and Flex development at your fingertips! In the next part I will try to guide through some configuring of Eclipse, in particular on how to use FDT and Flash Builder on the same project.

So today I finally figured out how to install the plug-ins that I really need and nothing else (well … almost nothing else). The following guide describes how you can set up your own custom Eclipse tailored for Flash/Flex development which features FDT plus Subclipse, a HTML, CSS, JavaScript and XML Editor and then some. The CSS Editor becomes especially useful for Flex Stylesheets.

1. First I recommend to wipe your standard Sun Java runtime and install JRockit instead. JRockit is a highly optimized Java runtime from Oracle which is free and can be downloaded here. I recommend getting the ‘Real-Time’ version (you have to register at their site to be able to download but I’d say it’s worth it).
   You might also want to add a system variable under Windows named JAVA_HOME that points to the JRockit runtime path if you want the Flex SDK compiler to make use of JRockit.
2. Go to eclipse.org and download the “Eclipse IDE for Java Developers” (~85MB). Currently the latest version of Eclipse Ganymede is v3.4.2. The reason I choose the Java Dev distribution is because it is not as loaded as the Classic version or some other versions (we don’t need Plug-In development do we?!) but it contains some niceties which can be very useful for us, notably Mylyn, a decent XML editor and a cool Snippets plug-in which can be useful even though we already get the Templates feature with FDT.
   Note for Vista users: If you’re under Windows Vista and use UAC like me, I recommend not to put the Eclipse folder into your Program Files. If you do this Eclipse will split up your installation and put all your additional plug-ins into a sub folder in your user folder. And so far I’ve always ran into troubles with this when updating Plug-ins at a later time. Instead I’ve created a folder named ‘Applications’ in my user folder into which I install all applications that have trouble with Vista’s UAC, and so Eclipse is placed there as well (e.g. C:UsersusernameApplicationsEclipse).
3. Next edit your eclipse.ini to something like the following:

   -vm "C:Program Files (x86)/Java/jrrt/jre/bin/javaw.exe"
   -showsplash
   -framework
   pluginsorg.eclipse.osgi_3.4.3.R34x_v20081215-1030.jar
   -vmargs
   -Xms768M
   -Xmx768M
   -XX:PermSize=256M
   -XX:MaxPermSize=512M
   -XX:+UseParallelGC

   … of course you need to correct the path to the JRockit runtime and you might need to change Xms/Xmx as your system fits, however a minimum of 512MB is recommended for use with FDT. (While you’re at it, you might wanna replace the splash.bmp file in Eclipse/plugins/ org.eclipse.platform_x.x.xxx.vxxxxxxxxxxxx which this one).

4. Install Subclipse by adding the Subclipse update URL from the Subclipse website to your Eclipse Help/Software Updates dialog. I recommend the 1.4.x release as in the 1.6.x release SVNKit seems not to be supported at the time of this writing. Be sure to install …
   • Subclipse
   • Client Adapter
   • Native Library Adapter
   • JNA Library
   • SVNKit Client Adapter
   • SVNKit Library

   … and – if you want – Subclipse Integration for Mylyn and Subversion Revision Graph. Restart Eclipse after install.

5. Next up is Aptana, or at least the parts that we want from it. By default Aptana comes with a freight full of web dev stuff that we as Flash deveopers probably wont ever need. However I find it useful to have a decent HTML, CSS and Javascript editor at hand.
   Grab the Aptana update URL from their site (probably http://update.aptana.com/update/studio/3.4 ) and proceed the same way as with Subclipse. Aptana will first install a bootstrap installer after which Eclipse is restarted and then starts with the real installation. At that point you are able to choose which components of Aptana you want to install. I choose the following …
   • Aptana Editor Infrastructure
   • HTML Editor
   • CSS Editor
   • Javascript Editor

   Let it download and install those parts. After install and Eclipse restart for some strange reason Aptana will continue to nag us with the install dialog to install other parts of the Aptana package (probably the Aptana Web Development Tools). But we don’t want all that baggage, right?! To get rid of the install nag, press cancel, quit Eclipse and then do the following …

   • navigate to Eclipse/features and delete or move the
     com.aptana.ide.feature.eclipseXX. aptana.bootstrap _X.X.X.XXXXX-XXXXXXXX folder.
   • navigate to Eclipse/plugins and delete or move the files:
     com.aptana.ide.eclipseXX.aptana.bootstrap_X.X.X.XXXXX.jar
     com.aptana.ide.server.portal_X.X.X.XXXXXX.jar
     org.mortbay.jetty_X.X.XX.vXXXXXXXXXXXX.jar

   Removing the first three parts kills the install nag. The last file is not really necessary to delete but doing so prevents a feature of Aptana that establishes a HTML preview server even though we only want to build Flash projects.

6. At last we install our main tool, FDT. Get the update URL from the FDT website, add it to your Eclipse Software Updates dialog as usual and proceed to install. I choose the latest beta which is at http://fdt.powerflasher.com/update_beta/. Installing FDT might take a while as the package is quite large, including a shipped version of the Flex SDK.
7. Finished! Enjoy your light-weight (in Eclipse terms) setup and start coding your soul out! I hope this guide was useful for anyone to get their Eclipse install right! However I’m by no means an Eclipse expert so if you got any hints or improvement notes to make the install even better let us know!

In this tutorial I will explain how to create a relatively realistic looking galaxy with Photoshop. I was searching the web up- and downwards to find any tutorials that could tell me how to get a similar fantastic result. There are like 100.000 planet tutorials out there and the few tutorials which were about creating a galaxy where either very basic or the result looked like everything but a realistic galaxy. The galaxy I wanted should have looked massive and intricate … just like the real ones but with a slightly more artistic touch. I’ve needed a galaxy that I could use as a star map for a space-themed roleplaying game design and the image you see above is a part of the result. Let’s go try to do such one …

There’s a lot to do to create such a Behemoth so let’s get started! I’ve used Photoshop CS3 for this but it should be possible to create this with CS2 and CS1 as well since none of the really new Photoshop features are required. If I do use any of the newer features then there is a way to get the same result in an earlier version, just not with the comfort the latest version offers.

Preparations

1. Create a new image in Photoshop. The size is up to you but the larger the better, I’ve used a fairly large size of 2800 x 2800 pixels. If you use a smaller resolution be sure to adapt the values I’m using to your image size. Make sure that Color Mode is RGB and the Background Contents is set to transparent. Name the empty layer “background” and fill it with black.

2. Create a new layer and also fill it with black, press ‘D’ to reset the foreground and background color to black and white. Choose Filter/Render/Fibers with a Variance of 20 and a Strength of 4. Then press Ctrl+T to activate the Transform Tool and in the tool’s parameter panel press the Chain symbol to link the width and height values that you now set to 200%. Then enter a rotation value of 45° and commit the transformation. The result can be seen here …

3. Duplicate the fibers layer and transform the new layer again, this time you only need to change the rotation value to 90° and leave the size values like they are. Commit and after that change the new layer’s blend mode to Soft Light.

4. Select the two fiber layers and merge them with Ctrl+E, then go to Image/Adjustments/Levels (or just press Ctrl+L) and enter a value of 70 in the first box, leave the others at 1.00 and 255. Also make sure that Channel is set to RGB. Press Ok. With this we thinned out the white fibers slightly.

5. Currently the image is larger than what we see because we scaled the fiber layer up earlier so let’s get rid of the stuff outside the image area … press Ctrl+A to select all on the fibers layer and cut-paste it back which creates a new layer. After that delete the old fibers layer and rename the new one to “base”.

6. Here comes our secret weapon … go to Filters/Brush Strokes/Spatter and enter a Radius of 25 and a Smoothness of 15. This filter is mostly responsible for the nice wiggly look of the spiral arms later. Now choose Filters/Distort/Twirl with an angle between 500 and 800. This parameter determines how twisted your galaxy will be. I want something with a lot of ‘tracks’ between the spiral arms so I choose 800.

7. The result gives us a whirl with nicely diverse dark and bright lines. Now create a circular selection around it. While dragging hold the Alt key and Shift key to expand the selection around it’s center and keep the aspect ratio. You can also hold then Space key to drag the selection around while doing this. When you got that press Shift+Ctrl+I to invert the selection and then hit Delete to remove the areas around the whirl.

8. With the selection still active choose Select/Modify/Expand with a value of 100 and after that Select/Modify/Feather with a value of 40 pixels. Press Delete two times to smooth out the border of our whirl and then press Ctrl+D to deselect all. Here’s the result. It still looks like everything but a galaxy, don’t worry, we will get to it …

Creating the Structure

9. Let’s start shaping our galaxy out of this what looks like a messed up vinyl record. This part is where it’s getting interesting. First duplicate the “base” layer, name the new layer “outer galaxy” and hide the original layer, we keep it to create more diverse layers later. Use Filter/Brush Strokes/Spatter with the same values like before, Spray Radius 25 and Smoothness 15 and after that give the layer a Gaussian Blur with a Radius of 1 to smooth out the noise that Spatter generated. Then apply Filter/Sharpen/Sharpen to regain some sharpness.

10. Now we are going to remove the black areas from this layer and also thin out the structure slightly … Choose Select/Color Range and pick the black color from the outer area of the image, then crank the fuzziness fully up to 200. Click Ok and then press Alt+Ctrl+D and set Feather to 2 pixel. Again hit Ok and press Delete 4 or 5 times to thin out the black areas between the spiral arms. It can be helpful here to hide the selection edges (View/Show/Selection Edges). Don’t forget to press Ctrl+D to clear the selection after that. Here’s how it looks so far …

11. Next let’s create some glow. Duplicate the “outer galaxy″ layer, rename the duplicate to “glow” and move it under the original layer. Use Gaussian Blur with a Radius of 50 and set the opacity to 60%. Also now set the opacity of the “outer galaxy″ layer to 50%.

12. If you check out some astronomical photos of galaxies you’ll notice that they get more dense toward their center so let’s do that too! Duplicate the “base” layer, rename it to “inner galaxy 1”, move it up to the top and press Ctrl+T and transform-scale this layer down to 70%. You can enter the values in the tool’s parameter palette and the resized layer content will stay centered perfectly. After that use the Spatter Filter again like you did before on the “outer galaxy” layer. Use Gaussian Blur with 1 pixel radius, then sharpen once and then again thin out the black areas like you did before in step 10 with the Color Range selection tool, just this time only press Delete two or three times. Set the layer’s blend mode to Screen and the opacity to around 55%.

13. We need to fatten up our galaxy a little more. Let’s create three more layers as in step 12, always take the “base” layer as the source and every time scale them down a tad more and increase their opacity. I’ve used scale 50% and opacity 80% on the next layer named “inner galaxy 2″, then scale 38% and opacity 90% on “inner galaxy 3″ and scale 32% and opacity 95% on “inner galaxy 4″.

14. Not bad but it looks kind of dull right now so let’s add some contrasting highlights! Duplicate the “outer galaxy” layer and rename the new one to “highlights”, then set it’s blend mode to Screen and it’s opacity to 100%. Press Ctrl+L and enter 160 in the left box. Press Ok and our highlights are finished. Here’s a preview of the current stage and the existing layers …

My God, it’s full of stars!

15. Let’s add a bunch of stars next! Creating diverse and realistic looking star fields is a whole topic unto itself so I’m not going into detail here how to create one. I recommend checking out this tutorial by Greg Martin to create some really fantastic star fields. For the sake of brevity I’ve prepared a star field template which you can download here.
Create a new layer named “stars”, copy the star field image into it and set the blend mode of this layer to Screen. Then Ctrl-Click on the “outer galaxy” layer to create a selection of it. Switch to Quick Mask Mode and draw with a black soft brush in the areas of the image where you want to have stars left. Leave Quick Mask Mode again, press Ctrl+Shift+I to invert the selection and then – with the “stars” layer still selected – hit Delete to remove all stars that are not within the selection. Increase the Brightness of the stars by 50 with Image/Adjustments/Brightness-Contrast. Finally let’s remove most of the black area that is still on the stars layer. Choose Select/Color Range, pick up the black color from the outer areas and decrease Fuzziness to something around 70, click OK and hit Delete twice and clear the selection. The following image shows the selection in Quick Mask Mode and the result of this stage …

16. We still have a strange looking hole in the centre where galaxies normally have an immense cluster of gas and stars so we are going to create the galactic core now … Create a new layer, name it “core” and grab the Brush Tool with a large, soft brush and a white color. A 600 pixel brush works well for this image size. Click seven to eight times in the middle of the galaxy then increase the size of the brush to 900 and click four more times. Finished is our core!

Coloring

17. So far our galaxy is only black and white and we could have went from the beginning with colors but to make things easier I went without colors so far. Now there are many ways to go about coloring the image. For example we could grab a stylus and graphics tablet and hand-draw colors into the galaxy by using a brush with various blend modes or we could color layer by layer. That’s what I’m going to do now.
Select any of the galaxy layers and press Ctrl+B to bring up the Balance palette and change the colors to your liking. You might want to go for the shadows and leave the highlight untouched to get a better look. You could also duplicate layers, blur them slighly and color these instead or in addition to their original layer. Or you could merge several of the galaxy layers together and color them at once which can look quite good.

Changing Perspective

18. Currently we are looking top-down onto the galaxy but what if we want to look at it like seen from a window of a spaceship that approaches the galaxy (remember the last scene from Empire Strikes Back?!)? We will change the perspective of the image. The Distort tool under Edit/Transform is what we want for this! Try to distort the image like on the following screenshot. You only actually need to move around the upper and lower left corners. You can flatten your image for this or put all the layers into a layer folder and use the Distort tool on that folder which works as well.

19. This looks a lot better but something seems not right. The whole thing looks more like a flat disc than a voluminous star cluster so we are going to bulge out the core of the galaxy to make it look more realistic. Photoshop’s Liquify tool is actually perfect for this. Time to flatten your layers together now (except the background), then enter Liquify over the Filter menu, select the Forward Warp Tool and a relatively large brush (350) and off you go. Start bulging out the core towards the top-left like in the following image and after that you might want to choose a smaller brush size and reconstruct the area above the upper edge of the core with the Reconstruct Tool.

That’s basically it! Of course these steps are not set in stone. You could experiment with different values or use the Liquify tool early on the base layer to add slight irregularities etc. Your imagination is the limit! Here’s the resulting image and the other galaxy from that you already saw a piece earlier …