AFComponents.com

The Complete Project



Here's the UMapper map we created this file from - Brett's Excellent Adventures.

Overview of Tutorial

UMapper.com is a website that contains a visual web-based editor to create maps. It offers a way to see where you are placing markers, how you are styling the markers, and the content you are adding to the info windows in visual way instead of doing everything through code. UMapper also let's us export ActionScript that we can take into flash and use with the UMap component.

Into this tutorial, we are going to create a map UMapper.com. In our map, we are going to add a few markers and style them. Then we are going to export ActionScript for the map that we created and apply to the UMap component in a flash file we create.

Setting up the UMap

To begin this tutorial make sure that you have successfully installed the Umap component and have the component in the library.

Creating a Map on UMapper

Right now, thats all we are going to do in flash. Later we will add more to the file but right now, let's head over to UMapper.com and we will create our map and add our markers using the visual editor. When you arrive at the home page click the "Start Mapping!" link. Now in the tools on the right side, select the marker tool and then add a few markers on the map. You can also style the markers and add content into the info windows. Take a look at the show me how guide for an explanation of the tools and panels in the editor.

Here's one I created - Brett's Excellent Adventures to show places that I have traveled to.

Export the ActionScript

Now that you have created your markers and styled the markers, UMapper offers you the ability to embed this map directly to your site, blog or social network when you view your map. However, for this example we are going to export ActionScript and take this code into flash to use with the UMap component. This would be useful if you are building a larger flash application.

While in the editor, click the "Export to ActionScript" button next to the save button. This will pop up a window that will have the ActionScript for your map in it. Copy this code using the copy button.

Saving and Creating an Account

This step is completely optional but I would recommend it in case that you need to come back and edit your map. Once you finish, save your map using the save button on the right side of the editor. Now in the header of the site, you will see a sign up link. Its free and just takes a minute. This allows you to come back and edit the same map with the editor without having to recreate everything.

Adding ActionScript to Your Flash File

After we have copied our ActionScript from the editor, we are going to return to flash. Create an actions layer in our time line, click the frame in this layer in our time, and open the actions panel (Window > Actions). Now we are going to paste the code we copied. The actionscript provided will create a instance of Umap for you so you will not need a instance of umap on stage.

Set Center of the Map

The last thing I did in the example for this tutorial is set the center and zoom of the map that way it centers on the point that I created.