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

  • Flashnewbie Oct 17, 2008 at 6:09 am

    Like your tutorial, hope to give it a try this weekend for a volcanic region! Nice to see a great site with so much helpful information – great work guys!

  • Luka Oct 20, 2008 at 10:22 am

    Keep on learning!

  • The29Saint Nov 5, 2008 at 1:26 pm

    Fantastic tutorial! THank you Guys.

  • Jorge Nov 9, 2008 at 11:27 pm

    Very nice tutorial !
    Thank you very much.. it was really useful.
    Bye!

  • anand Nov 14, 2008 at 12:45 pm

    hi
    i have made a map in flash.
    i want the following things
    if if take mouse over map to some city the color should change from #E3E7AD to #C8D062 and if i click the color should change to #33FFFF and finally if i click once again it has to come to the original color i,e #E3E7AD.

    i am new to action script, plz help me immediately.
    thanx

  • Luka Nov 18, 2008 at 10:42 am

    The29Saint, Jorge: thanks.

    anand: You should see the tutorial on making a website that changes color with a single click of a mouse. Find it inside the design section.

  • Jamy Nov 25, 2008 at 4:31 pm

    Very nice article ! But what about an interactive map with a search. Imagine a city map where you can find any road by the ease of a click. Just scroll a menu ordered by alphabet, select the road and you’re automatically shown with a big blinking arrow where the street is !!! See the link here to understand what I mean : http://www.smartshanghai.com/maps/smsh_map.php
    This is a city map that includes a zoom but also a sophisticated street search. This is also available for a Metro map. Choose a station in the list and the map automatically shows you where it is located with a big highlight.
    Just magic !!! Is this script very complex ?

  • Country Maps Dec 2, 2008 at 10:54 am

    Great tips, I will try them out.
    I was struggling to make a clickable World map, especially the commands seemed complex, I am not very experienced in flahs. Now it seems I got the hang of it!

    Thanks :)

  • Snowbite Jan 2, 2009 at 9:25 pm

    Fantastic tutorial!…is there a possibility you can convert the actionscript code to 3.0 for us? or is there a simple converter out there?

    In particular, I’m stuck at the onPress mouse event, and how that would be worded in AS3.

  • Ash Jan 26, 2009 at 5:26 pm

    I wan to add a movie clip to the beginning of my flash map. But I can not figure out the action script. Any ideas

  • Anu Jan 29, 2009 at 5:11 pm

    Hi, you got a great tutorial here. But how can we make a clickable map with regions? Now you find Flash maps using XML files to control the behavior and some pop ups in the maps, how to do all such stuff. DO you require a lot of programming knowledge….

    Thanks

  • Thanks a million for this and the other tutorials.

    I like the Fight Club references, too. I am Jack’s complete lack of surprise.

  • manu Feb 26, 2009 at 1:47 pm

    Ananda did you find the answer to what you requested i also want to be able to do a rollover on any city that i select

  • Murali Feb 26, 2009 at 2:48 pm

    Thanks a lot.
    Great Tutorial & Great site for flash learners.

  • RyanB Feb 27, 2009 at 7:58 pm

    Thank you! I was able to use your actionscript to make my USA interactive map work. I also added some buttons inside when the mouse hovers over text will appear. I owe it all to your fantastic tutorials. I look forward to seeing more on this site. Again, Thank you!

  • [...] Making an interactive country map creating an interactive map in flash. (tags: flash map) [...]

  • Steve M. Jun 9, 2009 at 10:26 pm

    I was using your code to do something a little different, so this question is not in reference to a map per se.

    I was wondering if there is a simple function I can add that will check the visible states of all other elements and make any that are visible not so, and only the one clicked visible.

    Example: I used your code to make information boxes for several points on a graphic. As it stands, the boxes remain when I press another button. I want any other box to disappear when a user clicks the button for another box.

    Any assistance would be great. Thanks.

  • Ted Jun 13, 2009 at 3:37 pm

    Thanks for the detail tutorial. It is very useful to learn the necessary Flash skills for doing this map. I guess for now I will just be lazy and use a flash making software such as iMapBuilder to convert some of my jpg images into interactive maps. Easy tool and good enough for my usage.

  • sandking Jul 23, 2009 at 10:25 am

    yo man, great tutorial….i wish if you cold do an onher one, but more complex, an interactive map with a search list (ex. street names), navigation buttons (left-right, up-down) and zoom in zoom out option? :D

  • scorched Sep 2, 2009 at 5:08 am

    thanks for sharing. an excellent tutorial.

  • Fathur Sep 26, 2009 at 9:04 pm

    Finally, I found it.. hhe

    thanks a lot guyz.. :)

  • FLASHY Oct 7, 2009 at 12:05 pm

    nice but i am in search of some xml driven flash interactive map.

  • Hugo Nov 21, 2009 at 10:00 pm

    Excelente tutorial. ´Está tan bien explicado que pude hacerlo muy rápidamente. Y eso que está en inglés. Muchas gracias.

    Thanks so much, it’s a fantastic tutorial.

  • kyle Dec 8, 2009 at 5:09 pm

    this is very good, i like the detail, but what if i wanted to create my own background, say something to do with music and i wanted to make that an interactive map, i have tried this method but cant seem to get my head around, please help me!!!!!!

    many thanks

    kyle

  • kyle Dec 8, 2009 at 5:15 pm

    ohhhh yes annd sorry about this, but their is a typo at the introduction section, will show you have [should say how] to make a very useful and widely used element

    sorry, but we all make mistakes sometime right??

    many thanks

    kyle

  • shenry Dec 23, 2009 at 3:57 am

    Excellent tutorial,.but I tried it in FlashCS4 ActionScript3 and didn’t get the same results. Should this actionscript work, or did I do something wrong? thanks

  • Luka Dec 23, 2009 at 11:02 am

    Change the ActionScript to version 2.0. I should definitely state that this is a AS 2.0 lesson!

  • David Dec 24, 2009 at 10:28 pm

    Hi, you are very good at explaining things man! Great and clear tutorial.
    Thanks.
    I have a question about your “expanded” example. I saw that you added a mask layer. But what would you do if you want to be able to select more than one region in the map ? Several masks ? How should this work.
    Maybe would need another tutorial for this one ?
    Bye!

  • Ageu Jan 5, 2010 at 2:15 pm

    I’m trying to build a interactive timeline about influenza H1N1 in flash, however me don’t know nothing about flash and adjacents

  • KAUNG MYAT Jan 17, 2010 at 4:32 am

    NICE WORK.
    VERY GOOD TUTORIAL AND EASY TO KNOW.

  • emigrant Mar 7, 2010 at 6:09 am

    thanks for the tutes.
    by the way can you please let me know what is the application i should use to practice the tutorial in ubuntu operating system?
    thank you very much

  • Luka Mar 7, 2010 at 2:04 pm

    @emigrant: As far as I know, there so no Flash counterpart in Linux. You should have a virtual machine and run Flash from there.

  • Al Mason Mar 17, 2010 at 10:08 pm

    Appreciate your hard work on this very much!

  • Justin M Mar 27, 2010 at 10:05 pm

    This is a great tutorial. I am trying to figure out how to make it so that the population density fades away instead in instantly disappearing like it currently does. How can I make it do that? I have been trying but have had no luck figuring it out.

  • Luka Mar 27, 2010 at 10:53 pm

    Justin M: Use the same technique as for the zoom – make an animation, inside a movieclip. Make a motion tween, with the last keyframe – set there the movieclip’s alpha to 0%. And than add some simple actionscript.

  • web development Apr 29, 2010 at 11:31 am

    Great tutorial. Thanks.

  • Nicholas Rainville Aug 9, 2010 at 2:39 pm

    I am using this as the first step of tutorials to figure out how to make a fairly complicated map in flash… it’s a huge help!

    I was wondering, suppose I wanted to make the overlay either cities OR provinces… if provinces is displayed, and then i click on cities, it would get rid of the provinces overlay, and replace it with the cities one; and likewise. However, I would still want the population density part of it to be able to stay overlaid on either. How would this be done?

  • Michael Oct 15, 2010 at 2:41 pm

    Thanks alot ! you cant imagine how much this tutorial helped me.
    Awesome tutorial, Thanks.

  • [...] Making an interactive country map [...]

  • wilson Dec 24, 2010 at 10:14 am

    you’re the man!

    thank you very much!

    Brazil thank’s you

  • Peter Hackett Feb 20, 2011 at 4:07 am

    Hola. Saludos y felicitaciones por tus excelentes tutoriales.

    Te agradecería mucho si me pudieras explicar como hacer una ciudad interactiva 3D basandome en una sección de un mapa de mi país, Venezuela. Tengo la imagen montada en Flash CS4, quisiera agregarle interactividad en cuanto a girar el mapa de la ciudad, moverme a la derecha o a la izquierda, introducir edificios 3D que giren también para poder visualizar el frente de estos, su partes laterales o su parte trasera, tambien quisiera que tuviera diferentes objetos 3D que giren cuando presione el botón “girar a la derecha” o “girar a la izquierda”, como carros y avenidas semáforos. Saludos y muchas gracias de antemano por tus respuestas

  • Chandu May 4, 2011 at 11:24 am

    I was looking out for this , This tutrial is of great help. Keep it up:)
    It was liitle urgent for me and you made my day..

  • Miles Jun 25, 2011 at 9:34 pm

    Great!
    Not easy, but great. I had no idea of flash. But after dooing this 3 times, I fell like having a tiny clue!

  • Enyinna Aug 25, 2011 at 1:00 pm

    Nice tutorial!

    I need world maps with provinces (like your one) for each country, do you know where I can download them for free?

  • Robert Safadi Nov 27, 2011 at 7:36 am

    These steps are not quite the same for CS5

  • [...] gráfico interactivo en flash lo he hecho gracias a este tutorial de Flash Explained y al mapa vectorizado de España que encontré en Desfaziendo [...]

  • Arif Mar 5, 2012 at 3:16 am

    IT’S VERY VERY GREAT TUTORIAL…!!

  • Satiya Mar 7, 2012 at 4:05 am

    it’s so great tutorial..!
    but what about for zoomable map??
    can you post it too??

  • irina Apr 30, 2012 at 10:42 pm

    Thank you so much for this tutorial!! I’ve been looking for weeks for a good tutorial, but something always went wrong when I tried to make it as well, but this was super easy and effective!! and it worked first time :) I’m really happy with it thank you again. x

  • Borja Jun 13, 2012 at 2:50 pm

    How to display/hide multiple movie clips on one button?

  • Togrul Nov 4, 2012 at 12:10 pm

    hi. its very useful and cool. but I dont understand. I want to make map of Azerbaijan republic. how can I do it ? help pleaseee

  • [...] http://flashexplained.com/design/making-an-interactive-country-map/ [...]

Leave a comment