Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
Now that you have seen how easy it is to draw a map based on a raster image with the aid of a few simple Flash drawing tools, let's see how to complete it.
17. Pick a place on the map where countries intersect. I chose the point where Austria, Hungary and Slovenia meet. You will proceed to draw the other borders in just the same fashion as you did the first one.
The only important thing to note is that you must start a little bit inside the country you are drawing the border from. In that way, you will be sure that the borders really intersect with one another and also that the whole vector outline is forming a unified whole.
Also, this will make it a lot easier for you to delete the remaining part "inside" the first country, just by selecting it with the Selection tool (V) and then pressing Delete.
18. Once you have finished all the countries' outlines, select the Rectangle tool (R). The line properties for the Rectangle tool should be the same as those that you used to draw the borders.
Also, block the fill color - you must draw an outline rectangle only. To do that, click on the small paint bucket icon in the Colors area of the Tools panel (see 1 in the image below). Next, click the little icon (the middle one in the bottom row - see 2 below) for color blocking.
19. Position your mouse over the map's top left corner, click and start dragging towards the lower right corner.
Release the mouse button - you should have a rectangle that overlays the map's frame.
20. Clean up any remaining lines that are sticking out of the rectangular frame that you just drew. Use the Selection tool (V) along with the Delete key to achieve that.
21. Hide the image layer. Click on the first keyframe of the borders layer - you have just selected all of its contents, all of the vectors (country borders) that you drew so far.
22. Go to the Colors area of the Tools panel. Click on the small colored rectangle to the right of the pencil icon. In the color picker window that appears, select black as the new stroke color. All the country borders will be turned to black instantly.
Remember, red was just used to better see when drawing over the existing bitmap image. Black is fine for the borders - this way, the outlines of the countries are highly visible. Sure, if you'd like to use any other color than black because you have a precise design and layout idea for your map and website, I encourage you to use it.
Let me show you now how to breathe life into your map!
22. Select the Paint Bucket tool (K). Choose a neutral fill colour that goes well with this kind of map - I used #EFE3BA. Place your cursor over a country and click to fill it with color.
Fill all the countries on the map except the one that is the main subject of the map (Austria in my example). If a country doesn't fill itself with color, there's probably a gap or crack somewhere along one of its borders.
To fix that, you can close the gap, but you can also go to the Options portion of the Tools panel (while still having the Paint Bucket tool). Once there, click on the little blue circle and select the Close Large Gaps option.
23. Select a bluish hue and click on any sea or lakes you might have on the map to fill them up with color. Voila! The map finally begins to look like it is supposed to.
24. Make the image layer visible again, lock the borders layer and create a new layer and call it cities.
25. Select the Oval tool (O). Block the stroke (outline) color, just like you blocked the fill color before, because you need to make a borderless circle. Again, let the color for the circle be black, because the dot representing a city will be small and so it needs to be easily visible.
Hold Shift, click on the stage, start dragging and draw a circle of any size, anywhere.
26. Click on the circle with the Selection tool (V) to select it. Go to the Properties panel (its left side) and enter 4 in both the W and H fields. This means that the circle will have a diamater of 4 pixels now.
27. Click on the circle once again with the Selection tool (V). Now move it into position with the aid of the arrow keys on your keyboard. Place it over any of the existing dots that represent cities on the bitmap image.
28. While the little black dot is still selected, press Ctrl+C to copy it. Next, press Ctrl+Shift+V (or select Edit > Paste in Place). You have just pasted in place the black dot - which means that it is placed right above the original one.
Now, don't click anywhere! If you do that the two dots will merge into one and you'll have to copy and paste it in place all over again. Instead, just use the arrow keys to move the new dot around. You can hold down Shift while using the arrow keys to move the selected object faster (by 10 pixels at a time).
Make as many dots as needed, and place them where the cities are situated on the map. The image below shows the vector map with the cities (the layer containing the bitmap image is hidden).
29. To draw the symbol for the capital, select the Rectangle tool (R) and follow the same procedure as you did when you created the cities:
30. Lock the cities layer and make a new one above it. Call it city names.
31. Select the Text tool (T). In the Properties panel, set the following settings for this tool:
32. Click near a city dot on the map and type in that city's name. Press Esc to exit the text field editing mode.
Type in all the city names in this way.
33. Lock the city names layer and create a new one above it - call it country names. Just like you did for the cities, write all the country names with the Text tool (T). Only choose a lighter color, because these countries are not the focus of the map.
Once you are done with writing all the names, delete the image layer. You don't need it anymore. Your Flash vector map should look like the one on the image below:
You may have noticed that I didn't put the name "Austria" on the map. This is normal, since the map is about Austria - so you should write that somewhere on the bottom of the map - below it.
Well, that wraps it up for this lesson! I hope that you enjoyed learning it. Now, if you wish to expand the possibilities and enable your users to interact with the map, please check out my tutorial that explains how to make an interactive map.
Download the source FLA file for the example shown in this tutorial (Flash MX 2004 format).
If you have found this tutorial useful, please consider donating to support lukamaras.com.
Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!
