Flash Explained

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.

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.

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:

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.

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.

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!

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.

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.

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.

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.

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.

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.

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

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.

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.

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

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.

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:

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

Comments

Submit a comment