Flash Explained

Learn Flash easily.

How to make a clean vector country map from a bitmap image

October 11th, 2008 | Author: Luka | Category: Basics


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.

The GIF image has just been imported in Flash.

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.

Naming and locking the first layer.

5 Make a new layer above it and call it borders.

A new layer has been created above the current one.

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.

Checking the amount of zoom in the upper right corner of the stage in Flash.

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.

The working area in Flash with a big zoom on the imported bitmap image.

Top of page

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.

Selecting the properties of the Line tool.

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.

The Snap to Objects and Object Drawing options are turned off.

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.

The cursor is now in the starting position.

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.

The first segment of the country border is being drawn.

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.

A little bit of precision work is required here.

Just click and start dragging from where you previously finished.

The next segment of the line begins where the previous ends.

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.

The two segments of the line on the stage in Flash.

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:

The red line is a vector outline drawn over the bitmap image.

Top of page

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.

Hiding the image layer.

Now it is much easier to look for any gaps in the outline. They are marked with black arrows in the image below.

There are gaps left between some segments of the vector outline.

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.

The Snap to Objects option is turned back on.

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.

Drawing a line over a gap is done in a snap with the Snap to Objects option turned on! :)

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.

Connecting two lines with the aid of the Selection tool.

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.

The outline traced so far in Flash.

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.

Selecting the outline.

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.

The completed vector outline of Austria.

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.

Drawing a new border with the line tool in Flash.

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.

Selecting and erasing a segment of a line in Flash.

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.

Blocking the fill color in Flash.

19 Position your mouse over the map's top left corner, click and start dragging towards the lower right corner.

Dragging out a rectangle in Flash.

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.

The pure vector geographical map made 100% in Flash.

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.

Selecting a keyframe and its contents.

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.

Choosing a new stroke color.

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!

Top of page

Coloring the countries

23 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.

Filling a country with the selected 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.

Setting the options for the Paint Bucket tool.

24 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.

The map is fully colored now.

Top of page

Inserting the cities

25 Make the image layer visible again, lock the borders layer and create a new layer and call it cities.

Inserting a new layer for new map information.

26 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.

A circle drawn on the stage.

27 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.

Adjusting the dimensions of the circle in the Properties panel.

28 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.

29 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).

The dots representing the cities are inserted into the map.

30 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:

  • The stroke (outline) color should stay blocked in order to create a borderless square.
  • Draw a square of any size by holding Shift, clicking and dragging your mouse.
  • Select the square with the Selection tool (V).
  • In the Properties panel, change the width and height to 8 pixels.
  • Click on the square to select it again and position it in the map with the aid of the arrow keys.

The capital has been added to the map, represented by a borderless square.

Top of page

Placing the country and city names on the map

31 Lock the cities layer and make a new one above it. Call it city names.

Making a new layer for the city names.

32 Select the Text tool (T). In the Properties panel, set the following settings for this tool:

  • Select Static text for the type of field (see 1 in the image below). This is the best choice for text that isn't going to change.
  • Select a font type (2).
  • Set the font's size to 12 - this is fine for city names, they don't need to be bigger (3).
  • Select a color (4).
  • If you are working in Flash 8 but wish to make your movie backwards-compatible (to cover Flash player 6 users, for example), select Anti-alias for animation. If you are going to publish your movie for Flash player 8 or better, you can choose the Anti-alias for readability option, which will make the names look very sharp (5).

Setting the properties of the Text tool.

33 Click near a city dot on the map and type in that city's name. Press Esc to exit the text field editing mode.

Enetering a city name with the aid of the Text tool in Flash.

Type in all the city names in this way.

34 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:

The final look of the map which was entirely made in Flash.

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).

Be Sociable, Share!

Comments

Submit a comment

  • Terry Corbet Nov 13, 2008 at 6:54 pm

    01. I have just found your site — it is excellent.
    02. I haven’t time to complete the whole tutorial right now, sorry.
    03. My only purpose here is to provide some feedback with minor problems in your textual material. Please erase my comments so they won’t detract from your fine work. Anyone reading your work will know that you are meticulous about your language, so I think you will want to fix these:

    #7. “Living either one of them on will make drawing a nightmare…” — should be “Leaving either one …”

    #15 “…you will select whole of it.” — should be “By double-clicking, the Selection tool will attempt to select a whole object. As you can see in the figure, what you intended as a ‘whole object’ has not been selected.”

  • Luka Nov 18, 2008 at 10:46 am

    Terry Corbet: Thanks. I appreciate the time you took to notify me of this. Sometimes, I just overlook typos. I like it when everything is written correctly, but I don’t have the time to check each tutorial for grammar etc. Thanks again! I will fix those errors!

  • lyxstryk Dec 22, 2008 at 5:32 am

    Greetings!
    This tutorial is so nice.
    I would like to add a zoom and pan buttons in my map. But I don’t know how to start. If I were to add a zoom function, do I have to create the same maps of different sizes again and again including the layers and action scripts? Is there an easier way?
    Hope to receive a reply from you soon.
    Thank you so much.

  • martincheq Jan 4, 2009 at 4:57 pm

    Hi. Great tutorial 😉

    I just wanna ask something. When I want to fill the countries with color, I choose the borders layer and I want to fill each country, but I just cant. The whole area in the rectangle colorizes. I have no gaps betveen lines and also, I have set close large gaps to ON , so I just don’t see where the the problem could be.

    Is somethink wrong if I set that color in fill, and for stroke i chosed to be blank(white crossed rectangle)

    By the way, I’m using Adobe Flash CS4, so maybe there something else needs to be done, I have tried, but nothing worked.

    Thanks

  • martincheq Jan 4, 2009 at 5:53 pm

    OK, i’m sorry because I didn’t read the guide in the detailes, here was my mistake. I was doing this on my own, I looked here just some times to be sure what I was doing, so I made a rectangle via rectangle primitive tool ( black border and no fill), but I couldn’t volor the countries.

    When I used normal rectangle tool, it worked fine.

    Please if you could join these two comments so that question and answer would be joined

    lp, martin

  • Ted Aug 7, 2009 at 12:22 am

    If you do not have Adobe Flash this tutorial might be too hard for you. To create a map quickly, you can google for some ‘flash map making software’, which should make the creation process easier for you.

  • Designer Resources Dec 22, 2009 at 12:02 pm

    Great post and very informativ. Thanks for the useful information.

  • Web Design Chester May 1, 2010 at 6:07 pm

    I’m looking to apply this to a driving centre website i’m working on at the moment. I was tempted to use css image maps but think I may opt for this method instead.

    Thanks,
    J

  • Great tutorial
    Thanks!

  • trav Mar 24, 2011 at 6:15 am

    no example?

    I didn’t readily see an example of this tutorial working. It should be on the top of the page, at beginning of tutorial.

  • trav Mar 24, 2011 at 6:16 am

    oh sorry, nevermind, all the ads got in the way.

  • Sarah Strellson Dec 8, 2011 at 2:15 pm

    Thanks for this tutorial, I’m currently learning flash and also have a country map where I test certain features. This helps me a lot to get better started :-).

  • Najam May 5, 2012 at 6:52 am

    Tkanks

  • Great tutorial! Thanks a lot!

You must log in to post a comment.