Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
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!
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.
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:
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:
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:
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.
