In this basic-level tutorial, I will show you how to make a vector geographical map in Flash. The map that you are going to draw in Flash will be based on a bitmap image.
Below you can see the final result that you are going to achieve by following this tutorial. It looks like an image, but it is a Flash SWF file! If you right-click on it, you will see the Flash contextual menu appear, which tells you that this is Flash and not some bitmap.
Note: the above SWF file has a file size of only 7KB, while the GIF of the same dimensions weighs 50 KB!
Preparing your document for drawing
1. Download the zipped GIF image I prepared for this tutorial. Unzip it and place it in a folder where you'll find it quickly. This image is a map of Austria, which I chose because it has an interesting shape that is well suited for this tutorial. Of course, if you already have some other country or region in mind for your Flash project, just go ahead and use it. Import your image and follow my instructions and explanations.
2. Open a new Flash document.
3. Select File > Import > Import to Stage. The dialog for importing files will appear. Find your picture (austria_map.gif), click on it to select it and click Open. The image will appear on the stage, centered inside your document.
Also, if you open the Library (Ctrl+L) you will see your image sitting nicely there, too. This is perfectly normal - you don't have to tell Flash to import the image into the Library - if you import it directly onto the stage it gets stored in the Library automatically.
4. Call the layer the image is situated in (the only one present so far) image and lock it.
5. Make a new layer above it and call it borders.
6. Select the Zoom tool (Z). Zoom in to a part of the map to be able to work more precisely in a moment - click twice so that you pass from 100% to 400% zoom. In the upper right corner of the stage you can see the amount of zoom you are currently working in.
I have zoomed in the northeastern part of Austria - that's where I'll start. You will certainly notice that the image has become pixelated. This is normal for a bitmap image when you zoom in on it.
Tracing the country borders with the Line tool
7. Select the Line tool (N). In the Properties panel, select hairline as type of line and choose a color that will be highly visible when drawn over the image. I chose red - you can also try with light green and the like.
Make sure that the Snap to Objects option is turned off. This option can be switched off and on by clicking on the little magnet icon in the Options part of the Tools panel. In the image below, it is turned off, like it should be in this lesson.
If you are working in Flash 8, you should also turn off the Object Drawing option, which is immediately to the left of the little magnet icon. It is necessary to turn both of these options off if you wish to work easily. Living either one of them on will make drawing a nightmare, trust me.
8. Place your cursor where you want to begin tracing the border. It is faintly visible in the image below.
9. Click and start dragging. Try to stay in the middle of the thick border line, so that the final outline of the country will be as precise as possible.
10. This is important: Once you have drawn a segment of the border, do not move your mouse, so that the next one will automatically be joined to the previous one.
Just click and start dragging from where you previously finished.
There! The two lines are joined together. They can be a little bit apart from each other, because in Flash, you can fill outlines that aren't perfectly closed. But try making them all connected.
Had you left the Snap to Objects option turned on, you would have no problem connecting the two lines - you could move your mouse cursor a little bit, and still the second line would automatically begin where the last one ended, because of the snapping.
But, if that option had been left on, you would have trouble drawing lines that are near the 90¡ã and 45¡ã angles. The line would automatically snap to these angles, making it impossible to follow the natural form of the country's border.
From now on, you just have to be patient and precise. With a little practice, you will fast be tracing any outline that you want. Just continue clicking and dragging along the thick border. Here's where I've arrived after some clicks:
Filling in the gaps and cracks in the outline
11. But, there are some little gaps, which can be seen if you temporarily hide the image. Do just that: hide the image layer to better see the vector lines that you just drew.
Now it is much easier to look for any gaps in the outline. They are marked with black arrows in the image below.
How to correct this? Easy, as you'll see. There are two ways of doing this. Before proceeding with any of the two methods that I will explain to you, turn on the Snap to Objects option.
12. Select the Line tool (N). I have zoomed in a little bit more on the gap, so that you can more easily see how this is done. The sequence in the image below clearly shows how it must be done:
- Bring the cursor near one end of the gap.
- Click, and, as soon as you start dragging, a small circle will appear, indicating that the beginning of the new line has snapped to the end of the existing one.
- Drag your mouse towards the other end of the gap. Once you approach it, the circle will appear again, meaning the line will snap into place here too. Just release the mouse button.
- And that's it - you have perfectly bridged the gap thanks to the Snap to Objects option available in Flash.
13. The second technique is done with the use of the Selection tool (V). Like I mentioned before, the Snap to Objects option must be left turned on for this to work:
- Bring your cursor near one end of the crack. A small representation of a right angle will appear next to it.
- Click and start dragging the cursor towards the other end of the crack. A circle will appear once your line is ready to snap into place. Release the mouse button and you're done.
- And there it is - a seamless, continuous line.
Now that was easy, wasn't it? Flash is so much fun! But, there are always microscopic gaps and cracks that aren't immediately apparent to the naked eye. So, how to detect them, you may ask? Well, just follow my next step:
14. Zoom in back to 400%, so that you can see the whole piece of country outline that you have drawn so far.
15. Select the Selection tool (V). Bring it close to the outline and double-click on it. By double-clicking it, you will select whole of it.
As you may see in the above image, not whole of the outline is selected. That is because there exists a small gap somewhere along it. And by selecting the outline, you can see at which point the crack occurs. Just correct it like you did before: use the Selection tool (V) with the Snap to Objects option turned on to connect the two parts and have them merged.
16. Unhide the image layer and continue tracing the outline of the country, until you have drawn out all of it. Don't forget to turn off the Snap to Objects option.
Once you're done with the country outline, please proceed to the second part of this lesson to see how to make other borders, cities, labels and more.
discuss this topic to forum
