Metaphoria Digitalus

This guide is intended to help attendees to the Boston Interaction Design Association series on prototyping in Flex install the necessary development environment on their computers. If you’re not part of this group, you might find it helpful nonetheless especially if you’re not a development focused individual who justs wants a local sandbox to experiment in.

This guide is intended for PC users. I think it will also apply to Mac users, but since I don’t own one of those lovely boxes, I can’t offer any guidance on installation.

This whole process should take you less than an hour if you have a fast internet connection.

Downloading and installing WAMP

WAMP stands for Windows, Apache, MySQL and PHP. It’s a cousin of LAMP (Linux, Apache, MySQL, PHP). The WAMP server package is an extremely convenient, lightweight bundle. My endless gratitude goes to the individuals who have invested their time putting it together.

1. Download the latest WAMP executable.
2. Run the WampServer2.0a.exe file. (!important - if you have WAMP 1.5 installed, uninstall this first before upgrading)
3. I installed my WAMP to the recommended location c:wamp

   

4. Select the defaults on each successive screen until you click ‘Install’
5. I set Firefox as the default browser when asked because you can user Firebug to help style pages later on.
6. After the file install has completed, select the defaults for the PHP mail parameters
7. That’s it! click ‘Finish’ and launch the WAMP 2 server.

Troubleshooting

1. What you should see in your system icon tray if the install went well. The white speedometer.

   

2. What you’ll see if Apache (at least in my experience) is having problems. The yellow speedometer.

   

   If you see the yellow speedometer, it probably means that you have another server installed on your computer and there’s a port conflict between them. I’ve solved this in the past by setting WAMP to listen to port 7070.

   • First, left-click on the yellow speedometer and select Apache > httpd.conf

     

   • A text editor will pop up with the file opened
   • Search for “Listen 80″ and change this to “Listen 7070″
   • Then search for “ServerName localhost:80″ and change this to “ServerName localhost:7070″
   • WAMP Apache is now set to listen to resolve to http://localhost:7070 instead of http://localhost
   • Save the httpd.conf file and restart all services by clicking on the yellow speedometer and selecting “Restart all Services”
3. If you get the red speedometer, my only advice is to uninstall WAMP from the Windows Add and Remove Programs window under the Control Panel and then try reinstalling it. Or you could search the Internet for suggestions. Sorry!

   

Downloading and Installing Eclipse

Eclipse is an open-source IDE (Integrated Development Environment). It’s expansive and powerful. I’ve started using it exclusively over products like Dreamweaver. Oh, and it’s free! Thanks again to the droves of coders who have spent countless hours putting this essential piece of software together.

1. In order to install the FLEX 3 Beta plugin, you must install Eclipse version 3.2 or greater.
2. Download Eclipse Classic 3.3.1.1 zip file
3. Go get yourself a cookie or make a sandwich, because this 140.9 MB behemoth will take a while to pull down. I’m going to make tea…
4. Unzip the eclipse-SDK-3.3.1.1-win32.zip file
5. I usually rename the folder that contains Eclipse to “eclipse-3.3.1.1″ where the numbers represent the version that you unzipped.
6. I then move the folder to c: so that it’s a sibling to c: wamp. Eclipse doesn’t “install” like a program. It runs from where ever the eclipse.exe file is located, so you can move the folder around without blowing up the operation of the program. I wouldn’t recommend doing this once you’ve started using it, though.
7. Start up Eclipse by double-clicking the eclipse.exe file.
8. Workspaces are a little hard to understand at first. I think of them as control towers, where certain key pointing files are kept. The workspace isn’t where you keep source files (at least I don’t). I named my Flex workspace “C:Documents and SettingsBeachumworkspace-flex”. Beachum is my user name. You can set up different workspaces for different types of development later, but you’ll probably only ever have the one.
9. Welcome to the Eclipse enigmatic startup screen. Click the arrow icon pictured below to proceed.

   

10. Feel free to poke around. We’ll have to shutdown Eclipse when installing the FLEX 3 Beta plugin below. I’ll explain how to start a project after that.

Downloading and Installing FLEX 3 Beta

FLEX 3 is the much needed update to FLEX 2. FLEX is similar to Flash in that the final product is a .swf file, playable in the Flash Player. It’s better than Flash for web development because the built in components are more suited to familiar web browsing interactions. FLEX 3 is currently in Beta and the file you download will have a 90 days license. The final release should cost around $299, significantly cheaper than Flash CS3. The FLEX Builder is a plugin for eclipse. You can still use the development SDK (Standard Development Kit) for free after FLEX 3 is release, which means if you’re willing to code in a text editor, you can still produce FLEX .swf files, just without the aid of the WYSIWYG editor.

1. Go to the FLEX 3 Beta site and register with Adobe
2. Download the FLEX 3 Beta Eclipse plugin, not the Standalone Installer (there’s a Mac DMG download as well). I don’t like what they’ve done to Eclipse in the standalone installer
3. Go make dinner or respond to the pile of email in your inbox as you download this 271.4 MB file
4. Once the download is complete, double-click the flexbuilder3_b3_win_plugin_121207.exe file. If Eclipse is open close it now.

   

5. Click through the screens, SLA and get to the “Choose Eclipse Folder to be Extended” screen. Enter the location of your Eclipse folder

   

6. The next screen will set up the installation.
7. Keep the options selected to install Flash Player 9 for IE and FireFox. Click next. If IE or FireFox are running, you’ll have to close them.
8. Click the Install button.
9. If everything goes well, you’ll see this screen

   

Setting Up Your First FLEX 3 Project

Let’s get your development environment set up in Eclipse

1. Start up Eclipse
2. Change your perspective from Java to FLEX Development

   

3. Select FLEX Development

   

4. When the Flex Builder 3 Activation dialog pops up, choose ‘Continue Trial’
5. Let’s pull up the FLEX views. Choose ‘Window > Show View > Components”

   

6. Then open up the Flex Properties View and the States View.

Starting a project in Eclipse

1. Select ‘File > New > Flex Project’

   

2. Fill out the New Flex Project dialog as follows:

   

3. name the project,
4. uncheck ‘Use default location’
5. My WAMP installation points to ‘public_html’ instead of ‘www’. Your WAMP points to ‘www’ by default.
6. point to a folder on your WAMP installation (I created the folder ‘helloWorld’ in my public_html folder): C:wamppublic_htmlhelloWorld
7. Keep ‘Web Application’ selected
8. Select ‘PHP’ as Application server type
9. Select ‘Next’
10. On the next page, fill in the text fields like shown. Your Web root will be ‘c:wampwww’

    

11. Select Next
12. Don’t change anything on the next page about Source Paths

    

13. Click Finish. Your project is set up

Hello World and viewing the swf in FireFox on the WAMP server

1. Your Flex Navigator panel should look like the following:

   

2. The ‘bin-debug’ folder is where your compiled swf files and any other assets like the .html page that wraps your swf, will be placed when you run the application.
3. Let’s create a very quick Hello World program and run it so you see what Flex looks like in a browser. First:
4. Make sure you’ve got Design view selected and not Source view

   

5. Drag a button from the Components Panel to the Stage (just drop it in the center somewhere)

   

6. Drag a label from the Components Panel to the Stage (under the button)

   

7. Select the label on the Stage. Edit the label’s properties as follows in the Flex Properties panel. Giving the label an ID let’s us refer to it in scripts.

   

8. Select the button on the Stage. Edit the button’s properties in the Flex Properties panel as follows.

   

9. Now it’s time to test the project. Click on the green play icon in the upper-right hand corner. (Don’t click on the drop-button arrow to the right of the green circle icon). Alternatively, you can select ‘Run > Run As > Flex Application”

   

10. Eclipse will chug and think for a few moments, then launch Firefox, or a new tab in Firefox with your swf.
11. You should see the button on the screen.
12. Click on the button and if everything worked, you’ll see the following:

    

Congratulations!

You made it through a long and detail-oriented process. Nice work! If for some reason your button didn’t work, leave a comment here and I’ll try to help you out.

What’s next you ask? Well, if you’re in Boston and plan to attend the Boston IXDA seminar on prototyping in FLEX, then you have only to wait until the day of the class to learn more.

If you’re eager to start playing around on your own, you can try the following tutorial from Adobe. It’ll teach you the basics of using FLEX now that you have a development environment up and running:

http://www.adobe.com/devnet/flex/quickstart/using_controls/

Simply start a new Flex Project to build a space to run the tutorial.

Hope you found this guide helpful. Comments, errata and troublshooting tips are welcome as comments.

This entry was posted on Saturday, February 9th, 2008 at 3:54 pm and is filed under development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.