Importing a map into StatPlanet Map Maker

To create custom interactive maps using StatPlanet, you need the following:

• StatPlanet Map Maker
• Adobe Flash CS3 or higher
• A map file in vector format, either Adobe Illustrator (.ai), FreeHand (.fh*, .ft*), or Adobe Flash (.swf).
  See also: Converting images into a vector format.

To prepare the map so it can be loaded into StatPlanet, you need to use the map template - 'map.fla' - which is in the 'StatPlanet_Custom_Map' folder. This file contains the following four layers:

1. Map layer: This layer will contain the map shapes (e.g. regions or provinces).
2. Borders layer: This layer will contain the map borders.
3. Txt layer: This layer will contain the text labels for your map.
4. Txt lines layer: You do not need to make any changes to this layer. (It is in this layer that lines will be drawn when StatPlanet is opened, linking the text labels with the corresponding map region).
   

For an example of what the final result could look like, see the file 'map_example.fla' (shown below).

StatPlanet Example Map (map_example.fla)

Step 1. Map layer

Before inserting your map into the map template (map.fla), it may be easiest to edit it first in a new document.

• Open a new document (File -> New).
• Import your map (File -> Import to Stage, select your map file).
• Select all (Edit -> Select all).
• Break apart the shapes of your map (CTRL+B, or using the menu: Modify -> Break Apart). You may need to repeat this several times until the shapes cannot be broken apart any further.
  • What to do if a rectangle appears which covers your map:
    In some cases a rectangle may suddenly appear which was previously hidden from view. If this is the case, click anywhere outside the selection area to deselect it. Then click on the rectangle and press 'delete'. You should now see the map again. (Note: if you did 'Break Apart' one too many times, the rectangle and your map merge, and the map disappears. You will need to go back and redo this, and remove the rectangle while it is still a seperate shape).
• Select all (Edit -> Select all).
• Copy the map (Edit -> Copy).
• Open the map template (map.fla).
• Select the first frame in the timeline in the layer 'map' (normally in the top of the screen, see also the example screenshot above - the first frame looks like a white rectangle with a circle in it).
• Paste your map (Edit -> Paste in Place).
• Double-click on the map borders. This should normally select all the borders in one go. Otherwise, hold down the Shift key and double click on the remaining borders. Once you have all your borders selected, change the border thickness in the Properties Panel below. Click on the drop-down which currently has 'Solid -----------' selected, and change this to 'hairline'. If the borders are different colors, make them one color (e.g. black) by clicking in the color selection box to the left of the border thickness selection.
• Select the different shapes of your map one by one and convert each of them into a Movie Clip (F8, or using the menu: Modfiy -> Convert to Symbol).
  • What to do if shapes do not seperate properly:
    In some cases the shapes of your map may not have seperated properly, because the borders are not properly joined up. You can either draw existing borders to make them join up, or draw them in using the pencil tool. To join them up, you can click on the edge of one of the lines just at the point where it does not join up, and drag the line to where it should join. Alternatively, click on the Pencil Tool in the Drawing Toolbar (normally on the left). Then draw in the lines where the gap exists. If this is done correctly, the shapes should now be seperated.
  • What to do if your map consists only of map boundaries, not shapes:
    If your map consists only of map boundaries or borders, you can fill the boundaries with the 'Paint Bucket Tool'. Select the 'Paint Bucket Tool' in the Drawing Toolbar (normally on the left) and click within the map boundaries you wish to fill. It can be filled using any color.
• Assign an instance name to each of the movie clips. The instance name can be entered in the properties panel which is normally below the stage (see also the example screenshot above).
  The instance name cannot contain spaces. Therefore, you may wish to assign a 'code' rather than the actual name. The actual name can be defined later in the StatPlanet Data Editor, where it can include spaces.
• The size / position of the map can be adjusted at a later stage in the Data Editor (in the Excel sheet 'Settings').
  

Step 2. Borders layer

• Once you have created the map Movie Clips, your borders may have become hidden from view. To make them appear again, you need to select all the map Movie Clips you just created one by one, while holding the SHIFT key. Once you have selected all of them, select Edit -> Cut. You should see the map boundaries reappear.
• Now select the map borders by double-clicking on any part of them. This should normally select all the borders in one go. Otherwise, hold down the SHIFT key and double click on any of the borders which are not yet selected. Once you have selected all the borders, press CTRL + G (or use the menu: Modify -> Group).
• Once you have grouped all the map borders, you can place all the Movie Clips back again. Select Edit -> Paste in Place. While the Movie Clips are still selected, right-click on any of them, and from the popup menu select Arrange -> Send to Back. Now your map borders should appear on top of the map.
• Click anywhere outside the selection area to deselect it. Then click somewhere on the map borders. This requires some precision so that you do not accidentally click on one of the map Movie Clips instead. Once you have selected the borders, go to Edit -> Cut. Then select the first frame in the 'borders' layer in the timeline panel, and go to Edit -> Paste in Place.
• While the borders are still selected, turn them into a Movie Clip by pressing F8 (or using the menu: Modfiy -> Convert to Symbol).
• In the Movie Clip properties panel below the stage, give the Borders Movie Clip the instance name: borders.

Step 3. Txt layer

• All the text label movieclips should be inside a 'container' movieclip called ‘txt container’. This is already included in map.fla. If you double-click on any of the text labels, you will go inside the 'txt container' movieclip. Now you can click on and move around the three labels which are included in map.fla.
• To create more text labels for your map, click on any of the text labels, copy them (Edit -> Copy) and then paste (Edit -> Paste). Drag each of the text labels to their corresponding map region.
• You do not need to edit these text labels. All you need to do is give each of them an instance name corresponding to the ones you have assigned for the map regions. In StatPlanet, the text labels will automatically display a name and value according to its instance name.
• Note: Do not change the size of the text labels (or its container movieclip). Instead, define the size of the map text in StatPlanet_data_editor.xls, under Settings (Map text size).

Step 4. Publish your map file

• Once your map is ready, publish the file (File -> Publish).
• Go to the directory containing map.fla. You should see a new file, 'map.swf'. Copy and paste this file into the directory Offline (for the offline version of StatPlanet) and Web (for the online version of StatPlanet), replacing the existing 'map.swf'.

Step 5. Linking the map in StatPlanet Data Editor

In StatPlanet_data_editor.xls, first insert the 'real names' of your map regions, and then the 'instance names' or codes which you used in the map file (map.fla).

• In the sheet 'Import', replace the example names (which are Kenya province names) with your own names, in the order that you wish. Then press the button 'Save data'.
• Go to the sheet 'data' (see the sheet names in the bottom left). The names you have entered should appear in the first row. A few rows lower you should see a list of example codes (CEN, COA, EAS, etc.). Replace these codes with the codes (instance names) you have used in the map file. The code in each column should correspond to the name given in the first row of the same column.
• Go back to the sheet 'Import' and enter your data. You can also use the 'Import data' button to import your data from a file automatically. If the import fails, it is most likely because the names or headers in the file you are importing could not be recognized. In that case, you need to add them in the sheet 'Country names'. See also Importing data.
• Once the data has been added, press the button 'Save data'.
• Go back to the directory Offline and open StatPlanet.exe to see your map in action. Or go to the directory Web and open the file StatPlanet.html to open it in a web-browser. If you wish to publish your interactive map on a website, copy and paste the contents of the folder 'Web' to the web-server. See also the file 'StatPlanet_small.html' for an example of how the map can be integrated into an existing web-page.

Converting a GIS shape file (.SHP) into a vector format recognized by Adobe Flash

Maps for GIS (Geographic Information Systems) are commonly exchanged as ESRI Shapefiles. Such files can be converted into Adobe Illustrator vector files using software such as ArcGIS or MAPublisher. Converting the file in ArcGIS can be done as follows: select 'File -> Export Map'. In the 'Save as' drop-down select 'AI' as the file format. Then click on 'Save'. Adobe Illustrator (AI) files can be imported directly into Flash.

You may also wish to open the image first in Adobe Illustrator, export the image as a Flash SWF file, and import the SWF into Flash. Importing an SWF file sometimes leads to better results than importing an AI file.

If you do not have access to such software, you could try a free Shapefile to SVG converter called shp2svg. See below for converting an SVG image into a format recognized by Flash.

Converting a vector image (such as SVG) into a vector format recognized by Adobe Flash

Use Adobe Illustrator to open the file, and then export the file into the right format. It seems that the best results are achieved when using Adobe Illustrator to export the image as an Adobe Flash SWF, then importing the SWF into Flash.

If you do not have Adobe Illustrator, you could try converting the file using the free vector graphics editor Inkscape. You may also wish to try this free SVG2SWF conversion tool.

Converting a Bitmap image into a vector format (e.g. GIF, JPG, PNG, BMP)

It is impossible to perfectly convert a Bitmap image into a vector one, but with some experimentation it is possible to achieve good results. To convert a Bitmap image, first import it into Flash (File -> Import to Stage). Then select the image, and select Modify -> Bitmap -> Trace Bitmap.

You will need to experiment with the following trace settings to get optimal results:

• Color threshold: Increase this value to decrease the number of colours in the resulting vector image. (When comparing two pixels, if the difference in the RGB color values is less than the color threshold specified here, they are considered to be the same colour).
• Minimum area: Increase this value to decrease the number of shapes in the resulting vector image. This is the number of surrounding pixels considered when assigning a colour to a pixel.
• Curve fit: How smoothly the outlines will be drawn.
• Corner threshold: Select how many corners you wish to keep.

The following values illustrate what settings to use if you wish to create a vector that most closely resembles the original bitmap. However, the settings below are not recommended due to the large number of shapes created. These settings may also cause the Flash software to crash.

• Color Threshold: 10
• Minimum Area: 1 pixel
• Curve Fit: Pixels
• Corner Threshold: Many Corners

Manually tracing the outlines

If automatically tracing the image does not lead to the desired results, you can draw the outlines by hand. Unless your map if quite large or complex, this is not necessarily a very long process. It can be done as follows:

1. Convert the map into a Movie Clip (Modify -> Convert to Symbol).
2. In the properties panel below, click on the 'Color' drop-down and select 'Alpha'. Change the value to around '30%' (so you can still see the outlines of the map clearly).
3. Insert a new layer (Insert -> Timeline -> Layer).
4. Select the Line tool for the Drawing Toolbar, and draw the outlines in this new layer following the outlines of the map in the layer below. Make sure that all the lines are touching. To draw a curve, first draw a straight line. Then, click somewhere in the middle of the line, and drag it one way or another.
5. Select the Paint Bucket tool and click inside the borders to create your map regions. If it does not work, the borders you have drawn are probably not touching. Zoom in to see if you can detect the breach.
6. Remove the bottom layer containing your bitmap image.
7. Follow the steps above to convert your map for use in StatPlanet.