How To Create An Interactive Country Map in Flash - Flash Explained

How to create an interactive country map in Flash | Flash Explained http://flashexplained.
com/design/making-an-interactive-country-map/
Learn Flash easily.
Subscribe to Flash Explained
ActionScript
Animation
Banners
Basics
Design
Menus & Interfaces
News
Preloaders
Sound
Text
Resources
Downloads
About
Contact
Terms of Use
Privacy Policy
Advertise
October 16th, 2008 | Author: Luka | Category: Design
Create Flash Applications www.screentime.com/pro-fla

Make brilliant desktop apps using Flash and
mProjector - PC & OS X.
Flash tutorials www.CartoonSmart.com
Flash Training From An Industry Specialist. Try
Our Free Trial Now!
SourceMate www.elementriver.com/sourcemate
Code snippets, refactoring, & more Ultimate
add-on for Flash Builder 4
Os melhores restaurantes ClubeUrbano.GROUPON.co
Economize até 70% em Restaurantes. Não
perca!
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
1 de 19 24/12/2010 08:06
How to create an interactive country map in Flash | Flash Explained http://flashexplained.com/design/making-an-interactive-country-map/
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.
2 de 19 24/12/2010 08:06
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.
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.
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.
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.
Lock this layer.
3 de 19 24/12/2010 08:06
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.
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.
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.
4 de 19 24/12/2010 08:06
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.
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.
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.
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.
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.
5 de 19 24/12/2010 08:06
24 In the Properties panel, give this movie clip the Instance name popDensity.
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.
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.
27 Draw a rectangle just above the “cities” link label.
28 Select the rectangle you just drew, complete with the outline. Do that by using the Selection tool (V).
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.
You’ll see in a moment that making an invisible button is extremely simple to do.
6 de 19 24/12/2010 08:06
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?
32 Click on the Scene 1 link to return 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.
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.
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.
Make it enough big so that it covers the whole “provinces” label.
7 de 19 24/12/2010 08:06
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.
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.
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.
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.
40 Select the Line tool (N). In the Properties panel, choose black as color and enter 1.5 as line thickness.
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.
8 de 19 24/12/2010 08:06
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%.
44 Make two copies of the displayed movie clip and place them on the left side of the “provinces” and “pop. density” labels,
respectively.
45 Click once on the topmost displayed movie clip, go to the Properties panel and give it the Instance name displayedCities.
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) {
9 de 19 24/12/2010 08:06
cities._visible = true;
displayedCities._visible = true;
} else {
}
}
provinces_btn.onPress = function() {
if (provinces._visible == false) {
provinces._visible = true;
displayedProvinces._visible = true;
} else {
}
}
popDensity_btn.onPress = function() {
if (popDensity._visible == false) {
popDensity._visible = true;
popDensity.play();
displayedPopDensity._visible = true;
} else {
popDensity.gotoAndStop(1);
}
}
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.
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.
} else {
10 de 19 24/12/2010 08:06
}
}
The onPress event is what happens when a user presses this button with the mouse. So the line
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:
} else {
}
I will now explain you this classic and widely used programming concept. The first line sets a condition:
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:
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 {
}
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 {
11 de 19 24/12/2010 08:06
}
}
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 {
}
}
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.
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.
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
12 de 19 24/12/2010 08:06
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.
Bookmark and share:
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!
13 de 19 24/12/2010 08:06
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
14 de 19 24/12/2010 08:06
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
Jeff (no, the other one) Feb 12, 2009 at 3:51 am
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!
links for 2009-06-05 | Chris Dalby Untangles Networks Jun 5, 2009 at 11:08 pm
[...] 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?
scorched Sep 2, 2009 at 5:08 am
thanks for sharing. an excellent tutorial.
Fathur Sep 26, 2009 at 9:04 pm
15 de 19 24/12/2010 08:06
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.
16 de 19 24/12/2010 08:06
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.
Web 2.0 Journalism — Helpful Websites « Like I said … Dec 16, 2010 at 9:56 pm
[...] Making an interactive country map [...]
Leave a comment
Name
Mail
Website
17 de 19 24/12/2010 08:06
Your Comment
Advertise Here
Easy Digital Map Software

Make Great Maps in Minutes See
Examples. Free Download!
www.SmartDraw.com
Sponsored links
How to create ad banners in Flash CS45.27

Metallic buttons for Flash CS44.24
Flash Explained now on deviantART4.18
Learn Flash CS4 animation: Classic Tween4.13
18 de 19 24/12/2010 08:06
Learn Flash CS4 animation: Shape Tween3.23

Downloads are live – go get the goodies!10.19
Moved over to a new host9.4
New host, new tutorials, new features4.5
Flash CS3 animation basics: Motion guide1.15
Wishing you all the best12.31
ActionScript
Animation
Banners
Basics
Design
Menus & Interfaces
News
Preloaders
Sound
Text
Making the ultimate dynamic image gallery in Flash 8 - part 1 of 2

Flash CS3 animation basics: Motion tween
Glowing neon playback control buttons
Sleek green sphere mathematical preloader
Flash CS3 animation basics: Shape tween
A brief wait & new Flash CS3 tutorials
Coming soon
Flash CS3 animation basics: Animating effects
ActionScript drop-down menu - part 1 of 3
Flash CS3 animation basics: Motion guide
ActionScript blending buttons button symbol clock colors cursor customization drawing API easing
interactivity loading loading bar logo mask menu motion tween movie clips mp3 navigation pointer random scrolling text xml
admec multimedia (3)

Traffolyte (3)
Rob G (2)
Psychometric Test (2)
pio_pio (2)
JSI (1)
Tracy Ingram (1)
lose weight (1)
Jobish K M (1)
Riaan (1)
© 2006–2010 www.flashexplained.com — Design by Luka Maras, based on Cutline by Chris Pearson.
19 de 19 24/12/2010 08:06

How To Create An Interactive Country Map in Flash - Flash Explained

Uploaded by

Copyright:

Available Formats

You might also like

How To Create An Interactive Country Map in Flash - Flash Explained

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

How To Create An Interactive Country Map in Flash - Flash Explained

Uploaded by

Copyright:

Available Formats

How to create an interactive country map in Flash | Flash Explained http://flashexplained.

Learn Flash easily.

Subscribe to Flash Explained

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

Create Flash Applications www.screentime.com/pro-fla

applied is the same. It is very simple, as you’ll soon see.

Setting up the map’s sections

Lock this layer.

Select the Alpha option and bring it down to zero.

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

Creating the invisible buttons for the map’s user interface

27 Draw a rectangle just above the “cities” link label.

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

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

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

Before continuing, lock the buttons layer.

Designing the map’s sections and graphs visibility icons

Lock the displayed layer.

Entering the ActionScript that powers the map’s interface

49 Enter the following ActionScript code inside:

The ActionScript code explained

Some points to keep in mind when creating an interactive map

Download this lesson’s zipped source FLA file.

Bookmark and share:

Flashnewbie Oct 17, 2008 at 6:09 am

Luka Oct 20, 2008 at 10:22 am

The29Saint Nov 5, 2008 at 1:26 pm

Fantastic tutorial! THank you Guys.

Jorge Nov 9, 2008 at 11:27 pm

Very nice tutorial !

anand Nov 14, 2008 at 12:45 pm

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

Luka Nov 18, 2008 at 10:42 am

The29Saint, Jorge: thanks.

Jamy Nov 25, 2008 at 4:31 pm

Country Maps Dec 2, 2008 at 10:54 am

Great tips, I will try them out.

Snowbite Jan 2, 2009 at 9:25 pm

Ash Jan 26, 2009 at 5:26 pm

Anu Jan 29, 2009 at 5:11 pm

Jeff (no, the other one) Feb 12, 2009 at 3:51 am

Thanks a million for this and the other tutorials.

manu Feb 26, 2009 at 1:47 pm

Murali Feb 26, 2009 at 2:48 pm

RyanB Feb 27, 2009 at 7:58 pm

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

Any assistance would be great. Thanks.

Ted Jun 13, 2009 at 3:37 pm

sandking Jul 23, 2009 at 10:25 am

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