FlashDevelop Flex Walkthrough for ESRI

Version 1.1 By: Cody M. Pike [email protected]

To start we need to first download all the necessary software: 1. First: Download FlashDevelop (The latest build should be sufficient) 2. This can be found at: www.flashdevelop.org

3. Next we need to download the debug flash player. a. You will need both “Projector” and “Active X” b. These can be found at: www.adobe.com/support/flashplayer/downloads.html

4. Now we have to download the Flex 4.0 SDK a. This is Open Source and available at: http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4

5. Then we have to download the ESRI components for our mapping application a. For this walkthrough we will be using the ESRI Flex API 2.0 release b. This can be found at: http://resources.arcgis.com/content/arcgis-flex-api-how-to- download

. Although not 100% necessary for creating Flex Mapping Applications, I would recommend that the Flex Viewer 2.0 beta is also downloaded d. This can be downloaded at: http://help.arcgis.com/en/webapps/flexviewer/index.html e. IMPORTANT: You must sign in to download any ESRI resources

Now it’s time to install. 6. We will start with FlashDevelop a. This installer is straight forward. I would recommend that you use the default paths for the install.

7. Next we will install the Flex SDK a. The Flex SDK is delivered in a .zip folder. Instead of a traditional install we will be extracting the contents of the .zip into a new folder. b. When the Flex SDK folder is selected there should be an option to “Extract all files” under “Folder Tasks” in the explorer window c. Once “Extract all files” is selected change the directory that the files will be extracted to be selecting “Browse…” d. In the “Select Destination” screen navigate your way to the following folder “C:\Program Files\FlashDevelop\Tools” e. Once inside the tools folder create a new sub folder and title it “flexsdk” f. Set this as the extraction location and select “OK.” All the files from the SDK will be copied over to the new directory.

8. To install the Flash Projector Debug simply copy the file into the newly created “flexsdk” directory

9. To install the Active X Flash Player, simply run the install program.

10. Finally, we are ready to configure our FlashDevelop to create Flex Mapping Applications a. Open FlashDevelop. Once open navigate to “Tools “ > “Program Settings” b. Under the “Plugins” menu to the left select “AS3Context” c. Under the “Language” menu to the right check the Flex SDK Location i. Make sure it is: “C:\Program Files\FlashDevelop\Tools\flexsdk”

11. Under the “Plugins” menu to the left select “FlashViewer” 12. Under the “Misc” menu to the right select the “…” button that appears to the right of the field a. Navigate to the “flexsdk” folder that we created earlier. b. Select “flashplayer_10_sa_debug.exe”

13. Next go to “Tools” > “Flash Tools” > “Document Generator” a. Make sure the ASDoc Location is “C:\Program Files\FlashDevelop\Tools\flexsdk\bin”

We are now ready to create a Flex Project.

14. To create and new Flex Project select “Project” > “New Project” a. Under “Installed Templates” select “Flex 4 Project” b. Appropriately title the project I used “Flex Test”

c. Also, you can alter the creation location by selecting “Browse…” d. When done select “OK.” You will be prompted to add the author’s name

15. When completed a brand new Flex 4 Project will be created and should look like the image below

16. Now we are ready to starting using the ESRI resources we downloaded earlier a. First, navigate windows explorer to the location of the ESRI Flex API 2.0 b. Then, in a separate window open the location of the new Flex 4 Project we just created c. Then navigate to the “libs” folder inside the ESRI folder (libs with an “s”) d. Also, Navigate to the “lib” folder inside the Flex Project folder (lib without an “s”) e. Inside the ESRI “libs” folder you will find a .SWC file copy that in to the Flex 4 Project’s “lib” folder f. Navigate the ESRI folder to “…ArcGIS_Flex\samples\src” g. Navigate the Flex Project to the SRC folder h. Copy both “assets” AND “com” folders form ESRI into the Flex Project “SRC” folder

17. Back in FlashDevelop, under the “Project” pane to the right expand the “lib” folder a. Inside the “lib” folder you will find the “.SWC” file that we copied over. b. Right click the “.SWC” file and select “Add To ”

Now to create our first mapping application 18. Enter the following code in the “Main.” file

19. Then select the “Test Movie” button on the tool bar (The icon that looks like a “play” button) 20. If configured correctly the movie will run giving you a new window in which a map service is displayed.

Congratulations you are well on your way to creating a Flex Based Mapping .