Flash Explained

Learn Flash easily.

Making an interactive country map

October 16th, 2008 | Author: Luka | Category: Design

In this lesson, I will show you have to make a very useful and widely used element: an interactive map. Whether it be a country map, like the case is here, or an anatomical map of human body, city plan, an engine schema, etc., the method applied is the same. It is very simple, as you’ll soon see.

Click the buttons on the right side of the map situated below and see what do they show you.

Slick, isn't it? Yet so simple. The above is just an example of a map, which you'll be making in this tutorial. Otherwise, if need be, you can make it a lot more complex, with additional data, more information and so on.

But if I made just that, this tutorial would never reach an end. You'll understand the main concepts you need to know while making an interactive map, graph or diagram. That's what counts! More complex maps and diagrams need just more time and dedication to make, that's all. So let's start! 🙂

Setting up the map's sections

To spare you the work that needs to be done first, the actual drawings - countries, borders, cities, you can download it below. This is just so that you can get up to speed in time.

Download the starting source FLA with maps for this tutorial.

Save the file in a folder you'll reserve for this lesson and unpack it. Open the source .fla file. You'll see many layers in it. All this maps were made in the following way:

You must import the image of a map into Flash. After that, you lock the layer with it, make a new layer above it and trace the map - borders, countries, provinces and so on, using either the Line tool (N) or the Pen tool (P), whichever is easier for you. And that's it, you get to work. There's no special trick, you just draw and draw until you've got your vector map in Flash 🙂

1 All the layers you see in the source file should be locked. If they are not, lock them now.

The layers in the starting source file.

The top three layers, namely - title, scale and country names contain only visual elements that won't be manipulated. So you can forget about them altogether. If you'd like to know what do they contain, just click on the small dot beneath the eye on each layer, and you'll see the content of that layer being hidden on the scene.

2 Unlock the cities layer. Do this by clicking on the small padlock icon found on it. Click on the layers first (and only) keyframe. The keyframe will become black, thus making you know that it is selected.

A keyframe selected in an unlocked layer.

Once you did this, all the content of that keyframe becomes selected. Which is just what you need! You will turn those dots representing cities and their accompanying names into a movie clip symbol. You'll need to do that so that you can make the cities appear and disappear at a click of a user's mouse.

3 Hit F8 or select Modify > Convert to Symbol. In the window that appears, select Movie clip as type, call it cities on the map and click OK.

4 Now, without unselecting this movie clip you just created, go to the Properties panel. On its left side, enter the Instance name for this movie clip: call it cities. Hit Enter on your keyboard to confirm.

Instance name assignment for a Movie clip.

Lock this layer (cities). You just prepared this section of the map for manipulation via ActionScript. Later, thanks to the Instance name you just assigned to this movie clip, you'll be able to make it invisible, and then appear at a click of a button.

5 Repeat the same procedure for the provinces' borders. Unlock the provinces layer. Click on its first and only keyframe to select its contents.

Selecting the contents of a keyframe.

6 Hit F8 to convert the selected drawings into a symbol. Again, just like you did before, select Movie clip as type and call the symbol provinces on the map. Click OK.

7 In the Properties panel, give this movie clip the Instance name provinces.

Instance name of a movie clip.

Lock this layer.

You will now make the section that shows the country's population density. As you can see in the example at the beginning of this tutorial, this portion of the map fades in slowly once the "Pop density" button is clicked. This is really easy to make - you will be creating a simple fade-in motion tween animation.

Top of page

Creating the animation for the population density section of the map

8 Unlock the pop density layer. Click on its first keyframe to select all of its contents.

9 Press F8 to open the Convert to Symbol window. Select Movie clip as type. Call it population density animation. Click OK.

10 Double-click this newly created movie clip on the stage to enter inside it. If you look above the stage now, you'll see that you are currently working inside the population density animation movie clip.

Timeline of a movie clip.

11 Click on the first keyframe of Layer 1. You have just selected the population density graphics again, but you are now doing this inside the movie clip.

12 Select Modify > Convert to Symbol, choose Movie clip as type and call it population density map. Click OK. You won't assign an Instance name to this movie clip because you will only make it move - you'll make a motion tween with it.

Why a movie clip animated inside a movie clip? It makes the whole movie easier to work with. So, this animation serves to make the population density graphic fade in slowly.

If you did that on the main timeline, you would have to extend the duration of every other layer so that you maintain all the other elements visible all the time. And that is just unnecessary work. By having the animation inside a movie clip, you can control it independently of the main timeline which a lot more practical and easier to maintain.

Imagine that you had to change the fade-in animation because your client wanted it slower or faster, or because you'd maybe just decided to change it when all the other parts were finished. You would then have to go back and change the duration of all the other layers, which is really just a waste of time. I am sure that you understand the benefits of having an animation inside a movie clip symbol, like in this project you're working on 🙂

13 So, still inside the population density animation movie clip, right-click on the frame 30 and select Insert Keyframe in the menu that appears.

Inserting a Keyframe in a layer.

14 Right-click anywhere on the gray area between the two keyframes (1 and 30) and select Create Motion Tween. If you did everything right up to this point, a continuous arrow on magenta background will appear.

A motion tween animation on the timeline.

15 Go back to the first keyframe (frame 1). Click on it. Next, click on the population density map movie clip on the scene, once. The movie clip icon will appear on the left side of the Properties panel, indicating that you selected the movie clip proper, and not a frame.

16 Now, on the right side of the Properties panel, go to the Color menu.

Select the Alpha option and bring it down to zero.

Alpha property of a movie clip set to zero.

You have just created the animation which makes the population graph appear from complete invisibility to total opaqueness. Try it! Just press Enter and you'll see the playhead go.

17 Lock this layer. Call it graphics. Create a new layer and call it actions. Lock this layer, too. You can insert ActionScript code inside a layer even when it's locked.

The layers inside a movie clip symbol.

18 Click on the first keyframe of the actions layer to select it.

19 Select Window > Actions to open the Actions panel. Type in the following code:

stop();

The stop(); action is necessary here, because without it, the animation would begin playing. All the animations in Flash are playing infinitely in a loop, unless stopped with ActionScript. And you don't want the animation to start unless a user pressed the button which shows the population density on the map.

You also need to stop the animation once it reaches the end, when the population density graph is fully opaque. Otherwise, it would continue playing again. That means it would reach the first frame again, read the stop(); action and stop right there, where the graph isn't visible at all.

20 So, right-click on frame 30 of this layer, exactly above the last keyframe of the graphics layer below it and select Insert Keyframe.

A second keyframe inserted inside the actions layer.

21 Press F9 to open the Actions panel. Again, insert a stopping command here:

stop();

There! Now you have just finished the preparation for this section of your interactive map. Nice. Let's move on 🙂

22 Go back to the main scene by clicking on its link, just above the layers.

Returning to the main scene.

Save your document if you haven't yet! The saving saves your nerves if the power sudenly goes out 🙂 Do this frequently!

23 Select the movie clip containing the animation you just made by clicking once on it. Hey! But you can't see it! Since this movie clip has exactly the same surface as the map of Croatia beneath it, just click anywhere inside Croatia's borders and you'll select it. You will see a blue rectangular frame appear, which represents the movie clip.

24 In the Properties panel, give this movie clip the Instance name popDensity.

Instance name assignment.

Lock the pop density layer. There! You can now proceed to create the elements which will enable user interaction with the map.

Top of page

Creating the invisible buttons for the map's user interface

See the button labels layer? That's where the names of the various map features and sections are situated, like cities, provinces, etc. I put these labels on a separate layer, rather then make separate buttons from each label.

Why? Because it's much easier to create an invisible button and just duplicate it. It saves a lot of time. And if you ever need to change a label, you just change the text, you don't need to change a whole button. You will now make the invisible buttons.

25 Create a new layer above the button labels layer and call it buttons.

Creating a layer for buttons.

26 Select the Rectangle tool (R). Select any colors whatsoever, they aren't important at all, because you are creating an invisible button. In the Options portion of the Tools panel, be sure that the Snap to Objects option is turned off. You can check that by looking at the little magnet icon - it should look the same as on the image below.

The Snap to Objects option turned off.

27 Draw a rectangle just above the "cities" link label.

Drawing a rectangle.

28 Select the rectangle you just drew, complete with the outline. Do that by using the Selection tool (V).

The selected rectangle.

29 Select Modify > Convert to Symbol. This time, select Button as type. Call it invisible button and click OK.

30 Double-click on the button you just made on the stage to enter inside it. You will see its specific timeline appear.

Button symbol timeline.

You'll see in a moment that making an invisible button is extremely simple to do.

The Up, Over and Down keyframes correspond to the states when the button isn't being interacted with, the mouse is over the button and the button is clicked, respectively.

The last keyframe - Hit - designates the clickable area of a button. This area can be bigger or smaller then the visible button itself. So, to have an invisible button, all you have to do is having just an area drawn in the Hit state, with all the others empty.

31 Click on the Up keyframe and drag it to the Hit state. That's it! Cool, isn't it? 🙂

Creating an invisible button.

32 Click on the Scene 1 link to return to the main scene.

Going back to the main scene.

33 Your invisible button will be represented by a transparent turquoise rectangle. Click on it once to select the button. Go to the Properties panel and give this button an Instance name. Call it cities_btn.

Instance name of a button.

34 Click on the button once again (one click, not double-click, you don't want to enter inside it!) to select it. Well, the button is already selected, but you're inside the Instance name field in the Properties panel. You need to copy the button, that's why you need to click on it.

Press Ctrl+C to copy it. Press Ctrl+Shift+V or select Edit > Paste in Place to paste this button in place.

Use the down arrow key to move this newly made copy down, until it comes over the next link label - provinces.

The original invisible button and its copy.

35 With this new button still selected, choose the Free Transform tool (Q). Handles for manipulating the button will appear.

Hold Alt and start dragging on the right-side handle.

Using the Free Transform tool on the button.

Make it enough big so that it covers the whole "provinces" label.

The invisible buttons covering the labels beneath.

36 There is one more change to be made - an important one. When you copied the button, the new copy retained every aspect of the original, not just the looks, but the Instance name also! And you can't have two same Instance names in Flash.

So, click on the new invisible button you just finished resizing, once, and go to the Propertis panel. Erase the old Instance name and call it provinces_btn.

Changing the Instance name of a button.

37 Repeat the steps 34 through 36. Make a copy of the button again, place it above the "pop. density" label and resize it. Also, don't forget to change its Instance name. Call it popDensity_btn.

Three invisible buttons.

You have just finished this part of the map's interface. The next step is to make obvious to the user what sections and graphs on the map are turned on and which are hidden. Remember, always be as user-friendly as possible!

Before continuing, lock the buttons layer.

Top of page

Designing the map's sections and graphs visibility icons

38 Create a new layer above the buttons layer and call it displayed.

Making a new layer for elements of the interface.

39 Zoom in on the interface area to work more easily. Be sure to see the area between the buttons and the map - that's where you'll be placing the visibility icons.

The interface area zoomed in.

40 Select the Line tool (N). In the Properties panel, choose black as color and enter 1.5 as line thickness.

Setting the line properties.

41 Draw a small diagonal line, then, once you've released the mouse, don't move it, just draw a new one, so that the two are connected. You should make a little "checked" sign.

Drawing a small check sign.

If you find it difficult to draw, because maybe the tool snaps to nearby objects, turn off the Snap to Objects option in the Tools panel (the little magnet at the panel's bottom).

42 Select the little icon you just made (both lines) and hit F8 to convert it to a symbol. Select movie clip as type and call it displayed.

43 Now, double-click on the Zoom tool in the Tools panel to bring the zoom factor back to 100%.

The Zoom tool selected.

44 Make two copies of the displayed movie clip and place them on the left side of the "provinces" and "pop. density" labels, respectively.

All the icons indicating elements visibility in place.

45 Click once on the topmost displayed movie clip, go to the Properties panel and give it the Instance name displayedCities.

Instance name of a movie clip.

46 Repeat the same thing with the remaining two displayed movie clips. Give them the Instance names displayedProvinces and displayedPopDensity.

Lock the displayed layer.

Ta-daa! You just finished the design part for your interactive country map. The only thing that remains now is some simple ActionScript that will enable use interaction with the map.

Top of page

Entering the ActionScript that powers the map's interface

47 Create a new layer above all the others and call it actions. Lock it.

48 Select the layer's first keyframe and press F9 to open the Actions panel.

49 Enter the following ActionScript code inside:

cities._visible = false;
provinces._visible = false;
popDensity._visible = false;
displayedCities._visible = false;
displayedProvinces._visible = false;
displayedPopDensity._visible = false;
cities_btn.onPress = function() {
if (cities._visible == false) {
cities._visible = true;
displayedCities._visible = true;
} else {
cities._visible = false;
displayedCities._visible = false;
}
}
provinces_btn.onPress = function() {
if (provinces._visible == false) {
provinces._visible = true;
displayedProvinces._visible = true;
} else {
provinces._visible = false;
displayedProvinces._visible = false;
}
}
popDensity_btn.onPress = function() {
if (popDensity._visible == false) {
popDensity._visible = true;
popDensity.play();
displayedPopDensity._visible = true;
} else {
popDensity._visible = false;
popDensity.gotoAndStop(1);
displayedPopDensity._visible = false;
}
}

Hit Ctrl+Enter to test your movie. Click on the map's sections buttons, turn different map features on and off. Marvel at your creation! 🙂 OK, let me explain you what makes this map work.

Top of page

The ActionScript code explained

The first section is quite simple. It makes invisible all the sections of the map (except the base map layout, with the countries), and the little "checked" signs that show if a section is visible or not.

cities._visible = false;
provinces._visible = false;
popDensity._visible = false;
displayedCities._visible = false;
displayedProvinces._visible = false;
displayedPopDensity._visible = false;

The first keyword of every line is the Instance name that belogns to a particular movie clip. Remember, you named them all previously. The second keyword, _visible, defines the visibility of a movie clip or a button. This property's only possible values are true or false. They are self-explanatory. 🙂

The ActionScript code for the first button (cities_btn) is what comes next. It says what will happen when this button gets pressed.

cities_btn.onPress = function() {
if (cities._visible == false) {
cities._visible = true;
displayedCities._visible = true;
} else {
cities._visible = false;
displayedCities._visible = false;
}
}

The onPress event is what happens when a user presses this button with the mouse. So the line

cities_btn.onPress = function() {

says that a function will be executed once this event (onPress) occurs. When a function gets executed, what is in fact executed is all the code found within its curly braces: { and }. And this code is an if/else statement:

if (cities._visible == false) {
cities._visible = true;
displayedCities._visible = true;
} else {
cities._visible = false;
displayedCities._visible = false;
}

I will now explain you this classic and widely used programming concept. The first line sets a condition:

if (cities._visible == false) {

Translated from ActionScript into English, this line literally says this: if the condition within the parentheses is true, execute the code within the first pair of curly braces. So, it says that the _visible property of the cities movie clip must equal false for the condition to be fulfilled.

Is it set to false? Yes it is. You did it by writing the first portion of code, when you made invisible all the map's sections. So, the condition turns out to be true and the code within the first pair of curly braces gets executed:

cities._visible = true;
displayedCities._visible = true;

This code sets the _visible property of the cities and displayedCities movie clips to true. What effectively happens then is, when a user has clicked the cities_btn button, the cities appear on the map, and the little check mark appears near the clicked button.

If the condition didn't turn out to be true, the code between the first pair of curly braces would be completely ignored and skipped as if it wasn't there at all. What would be executed in that case is the following:

} else {
cities._visible = false;
displayedCities._visible = false;
}

The else keyword means if the condition between the parentheses (cities._visible == false) isn't fulfilled, the code between the second pair of curly braces gets executed. This code makes the cities on the map invisible again, and its mathcing "checked" icon.

So what this if/else statement creates is in fact an on and off switching mechanism. A user presses the button in question, if the cities aren't visible on the map, they appear. Once they are visible, when the same user clicks on the button again, the if gets ignored, the else gets executed and the cities are made invisible again.

The code for the provinces_btn button is exactly the same, only the Instance names differ - this shows and hides Croatia's provinces borders on the map.

provinces_btn.onPress = function() {
if (provinces._visible == false) {
provinces._visible = true;
displayedProvinces._visible = true;
} else {
provinces._visible = false;
displayedProvinces._visible = false;
}
}

The code for the last button is a little bit different from the previous ones. In addition for setting the visibilty of the population density graph on and off, it also sets it in motion.

popDensity_btn.onPress = function() {
if (popDensity._visible == false) {
popDensity._visible = true;
popDensity.play();
displayedPopDensity._visible = true;
} else {
popDensity._visible = false;
popDensity.gotoAndStop(1);
displayedPopDensity._visible = false;
}
}

If you remember, back in step 8 you made the fade-in animation inside the population density animation movie clip. Then you stopped it with ActionScript. So, once this movie clip is made visible, it is also set in motion so that its animation unrolls and the population graph on the map fades in slowly.

popDensity.play();

In the else portion of the code, which gets executed only when the popDensity movie clip's _visible property is set to true, the movie clip is sent back to its first frame and stopped there, so that it can fade in again when requested.

popDensity.gotoAndStop(1);

Top of page

Some points to keep in mind when creating an interactive map

Before you start drawing a map in Flash, it is useful to be aware of some important things:

  • Make the country shown on the map stick out from the rest. A good method to make this is to color the other countries on the map with the same, but faded out color. Also, make the other countries' names visible, but not too much - use a faded color here, too. See the image below for explanation - I used these colors in the map you just worked on in this tutorial.

Chart showing the comparison between the main country and other countries colors.

  • Don't use pure black for country borders and land/sea border. If I made that, the map would have looked messy and the black would stick out too much, diverting attention from the map as a whole. Use an intermediate shade of grey.
  • When the population density (or any similar statistical map) shows, you should also include a scale that explains what each color means. Red are the most heavily populated areas, but you must write that. I didn't include it not to make this tutorial too long. Just put a scale with colors and explanations in the population density animation movie clip, on a separate layer. It would be good that if it appeared somewhere below the interface buttons.
  • Your map can have many sections and graphs. Just be sure to make the interface intuitive and easy to use.
  • Be aware of the scale you're working in. Don't clog your map with unnecessary information - for example, in the map found on top of this page, putting in some subregional borders - like counties or city territorial limits would make no sense at all. Or every local road - this kind of information is reserved for local, more detailed maps.

With that said, enjoy creating an interactive country, city, or any other kind of map! It is really a very useful element of a website, which can help the visitors to a particular site a lot, be it for finding the exact location of a small business office, getting a quick overview of a country or anything else! And guess what - the interactive map you just made is only 16 KB in size! That map doesn't need a preloader even for slower modem connections!

Oh, yes, and if you want to know more on Croatia, visit the Croatian Tourist Board's website. There is a map similar to this one there, if you click on the "Destinations" link once you choose your language. Believe me, it isn't much more complex than this one. And the effect is great, being very clear and intuitive also. You just learned how to make a professional-looking map in Flash! Cool!

Before you set off to create your own maps and plans, look at the expanded example I made. Roll your mouse over the westernmost region, and click on it! You'll find the source for this example available for download below.

Download this lesson's zipped source FLA file.

Also, you can download the source for the expanded version.

Be Sociable, Share!

Comments

Submit a comment

You must log in to post a comment.