CSE 190 M: Web Programming, Spring 2011

Windows

Step 1. Download and Unzip the Flex 4 SDK

Download the Flex 4 SDK (Flash compiler) from the following web page:

• Flex 4 SDK download page

The SDK doesn't have an "installer" program. It is just a .zip file that you need to decompress. Modern versions of Windows already know how to open and decompress .zip archives. You can usually do this by double-clicking the .zip file, then choosing File, Extract All... You can extract the files to any location you like. For the rest of this guide, we are going to assume that you extracted the files to C:\Flex . If you choose a different folder, please substitute that name everywhere you see "C:\Flex" below.

Step 2 (Optional). Configure TextPad

(Instructions for the Notepad++ editor are below.)

As was shown in the first Flash session, the Flash compiler is just a console program named mxmlc that can be run from a terminal shell. If you are familiar with how to use a terminal, you can run the compiler in that way, passing the file to compile as a command-line argument to mxmlc. However, we assume that most CSE 190 M students don't know how to do this, so we'll show you how to integrate the compiler with the TextPad editor. If you're on Windows and don't already have TextPad, you can download/install it here:

• TextPad homepage

After you have successfully installed TextPad and unzipped the Flex 4 SDK, open TextPad and click the following:

1. In the top menu, click 'Configure' -> 'Preferences...'.
   
2. In the list of sub-menus on the left, at the very bottom, click on 'Tools'.
3. At the top right, click 'Add' -> 'Program...'.
   
4. Navigate to the path of your Flex 4 SDK, then go into its bin subdirectory, and select the file mxmlc.exe and click 'Open'. In our example case it is installed at: C:\Flex\bin\mxmlc.exe
   
5. You should now be taken back to the 'Tools' section and see 'mxmlc' listed.
6. (optional) Click on the word 'mxmlc' in the list of tools to rename it to something more meaningful, like "Compile Flash".
   
7. Click 'Apply' and 'OK' to save the changes.
8. (optional) We found that by default the mxmlc compiler emits an annoying error message every time we compile a program. "Warning: This compilation unit did not have a factoryClass specified in Frame metadata to load the configured runtime shared libraries. To compile without runtime shared libraries either set the -static-link-runtime-shared-libraries option to true or remove the -runtime-shared-libraries option." To make the message go away, from TextPad's Preferences dialog box, we can click on the Tools submenu at left, then click on our new Compile Flash tool in the list below it. In the text box labeled 'Parameters', after the word '$File', add a space and then write -static-link-runtime-shared-libraries . Then press OK.
   
9. That's it! Now try it out. Open a .as file in TextPad, then click Tools, External Tools, Compile Flash (or press the hotkey shown next to Compile Flash, such as Ctrl-1 or Ctrl-4). If everything worked, you should see a compiler console pop up stating that the program compiled successfully. If not, go back and re-check your steps or email us for help.
   
   

You might also want to optionally set up TextPad to do syntax highlighting for ActionScript .as files. To do this, follow these steps:

1. Figure out the name of the directory where TextPad stores its syntax highlighter files on your computer. You can discover this by going back to TextPad's 'Configure' -> 'Preferences...' dialog box, then clicking the 'Folders' sub-menu at left. Then look for the entry named 'Syntax'. Select it. In the text box below, it should show you a directory's name. Select that entire directory and copy it. In our test machine on Windows XP, this folder was "C:\Documents and Settings\stepp\Application Data\Helios\TextPad\5.0", but it will be different for your machine.
   
2. Now in your web browser, download the following syntax highlighter file actionscript3.syn. Save the file into that syntax folder you just discovered in TextPad.
   
3. Now it's time to set up TextPad to understand .as file syntax. To do this, you have to create what's called a new "document class" in TextPad so that it will treat ActionScript files differently than other documents you edit. From the main TextPad window, click 'Configure' -> 'New Document Class...'.
   
4. In the dialogs that follow, when prompted for the document class name, call it something like 'ActionScript'. Click 'Next'. When prompted for the files that belong to the class, write ' *.as '.
   
   
5. In the next dialog, check the box for 'Enable syntax highlighting'. In the drop-down list, you should see the actionscript3.syn file that you saved a moment ago. (If you don't see it, you must have saved it improperly. Check the folder and try again.)
   
6. Once you're done, try opening a .as file. You should now see the pretty highlighting and colors!
   

Step 2 (Optional). Configure Notepad++

If you use the Notepad++ editor instead of TextPad, you can use these instructions.)

As was shown in the first Flash session, the Flash compiler is just a console program named mxmlc that can be run from a terminal shell. If you are familiar with how to use a terminal, you can run the compiler in that way, passing the file to compile as a command-line argument to mxmlc. However, we assume that most CSE 190 M students don't know how to do this, so we'll show you how to integrate the compiler with the Notepad++ editor. If you're on Windows and don't already have Notepad++, you can download/install it here:

• Notepad++ homepage

After you have successfully installed Notepad++ and unzipped the Flex 4 SDK, open Notepad++ and click the following:

1. In the top menu, click 'Run' -> 'Run...'.
   
2. In the dialog box that pops up, in the 'The Program to Run' box, paste the following text (this assumes you unzipped the Flex 4 SDK to C:\flex; if not, substitute your directory):

   cmd /C "C:\flex\bin\mxmlc.exe" -static-link-runtime-shared-libraries $(FULL_CURRENT_PATH) || pause
   

   
   
3. Press the 'Save...' button. In the new 'Shortcut' dialog box that pops up, choose an optional hotkey and give the command a name such as 'Compile Flash'. Then click 'OK' and close the dialog boxes to get back to Notepad++.
   
4. That's it! Now try it out. Open a .as file in Notepad++, then click 'Run' -> 'Compile Flash' (or press the hotkey you gave the command). If everything worked, you should see a black console window pop up to compile the program. If it compiles successfully, the window will disappear. If are any errors, the black console window will stay on the screen so you can read them and fix them. If it doesn't work, go back and re-check your steps or email us for help.
   

Mac

Step 1. Download and Install the Flex 4 SDK

Download the Flex 4 SDK (Flash compiler) from the following web page:

• Flex 4 SDK Mac download page

Unzip the resulting Flex .zip file into a folder on your Mac. We unzipped ours to our home directory in a subdirectory named flex. The rest of our directions will assume you did the same; if you used a different folder, please alter the following directions to match.

Step 2 (optional). Configure Smultron editor

As was shown in the first Flash session, the Flash compiler is just a console program named mxmlc that can be run from a terminal. If you are familiar with how to use a terminal, you can run the compiler in that way, passing the file to compile as a command-line argument to mxmlc. However, we assume that most CSE 190 M students don't know how to do this, so we'll show you how to integrate the compiler with the Smultron editor. If you're on Windows and don't already have Smultron, you can download/install it here:

• Smultron homepage
• (or if you have the new Mac OS X "Snow Leopard" version, you may want to use Fraise instead of Smultron, since Smultron development is being discontinued and Smultron doesn't work as well on Snow Leopard.)

After you have successfully installed Smultron and unzipped the Flex 4 SDK, open Smultron and click the following:

1. Download a .as source file from our web site and open it in Smultron. Smultron should already show you syntax highlighting for ActionScript code:
   
2. In the top menu, click 'Tools' -> 'Handle Commands' -> 'Show Commands Window' (⌘B) and select 'Other' under the Collections column. Next, click 'New Command' in the top right. A new line will appear in the list of commands. In the Name column, write something like 'Compile Flash'. If you want a keyboard shortcut for the compiler, click on the 'Shortcut' column and press the key sequence you want. Then in the large white text box below, paste the following code:

   #!/bin/bash
   osascript <<-EOF
   tell app "Terminal"
   	launch
   	activate
   	do script "~/flex/bin/mxmlc '$(echo %%p)' -static-link-runtime-shared-libraries"
   end tell
   EOF
   

   Your dialog box should look like this:

   
   
3. Close the dialog box. In the main Smultron window, with your .as program open, press your new keyboard shortcut for the Flex compiler. Or click 'Tools' -> 'Commands' -> 'Other' -> 'Compile Flash'. If you set everything up properly, a console window should pop up and run the Flash/Flex compiler for you and compile your program. Once the compiler is done each time, you can close the console window.
   

Linux

Step 1. Download and Install the Flex 4 SDK

Download the Flex 4 SDK (Flash compiler) from the following web page:

• Flex 4 SDK Linux download page

The installer is distributed as a '.bin' file. Once you've downloaded it, give it execute permissions (chmod +x) and then run it. This will install Flex SDK.

Step 2 (optional). Configure your editor

Since there are so many different text editors for Linux, you may just want to run the mxmlc compiler from the command line. The SDK does include some Eclipse plug-ins if you prefer that editor. Otherwise you're on your own!