Make map on a swf clickable

Given a swf that shows a tiny dot expanding into a world map, how could that map be made clickable by continent, e.g. clicking on a continent would redirect to a page displaying a lsit of preselected countrie links. Please advise details of coding. Thanks.
ksfokAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

IqAndreasCommented:
You are going to have to elaborate a bit more on what you are trying to do, but I will try and see if I understand you correctly.

The easiest way is to break the map of the world up into several different MovieClips and position them on the stage. Then, detect on each individual MovieClip if it was clicked, and navigate to the appropriate country, (or whatever you had planned when they click something)

If you don't want to divide the image up, but want to leave it intact, you can place "invisible buttons" over each continent or country that detect the mouse. This tutorial has a light guide on creating these invisible buttons that respond to mouse events without needing an actual image:
http://www.flashfridge.com/tutorial.asp?ID=2

If you need more information or want some sample code, just ask.

Cheers,
Andreas
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ksfokAuthor Commented:
The swf was built without invisible buttons and the map image was inserted into the library before creating the animation swf. Now we have to remake the map image and rebuild the whole swf?
0
IqAndreasCommented:
Ah, that makes it a little more tricky, but it is still doable. There are three ways to do this I can think of off the top of my head.

DECOMPILING
The easiest way would be to use a decompiler (such as SoThink SWF Decompiler) to extract the image out and place it in your new SWF.

CREATING THE INVISIBLE BUTTONS "OVER" THE LOADED SWF
It is possible to load in this external SWF using the Loader class, and placing the "invisible buttons" over the loaded in SWF as if it were a regular MovieClip. This is actually very simple.

EXTRACTING THE IMAGE AT RUNTIME
Load in the SWF at runtime using the "Loader" class, and then extract out the image using the "getDefinitionByName" function. More info on this blog entry:
http://lassieadventurestudio.wordpress.com/2008/09/05/runtime-class-extraction/

EXTRACTING THE IMAGE WHEN COMPILING
You can use the "Flex Embed" features (yes, even if you are using Flash) to do a method similar to the one above, but include the class directly when compiling your new SWF.


Instead of elaborating on all options, which option do you think you will be pursuing? I will find more information for you in that specific field. The last two options might not be such a good idea if you are just getting started with ActionScript.


The real challenge is knowing which countries are which when clicked. Do you already have a system in place which detects which country was accessed on the X and Y coordinates of where the user clicked? That is your biggest challenge.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

ksfokAuthor Commented:
Can we place invisible buttons on the world map? Can they be shaped to cover the whole area of every continent?
0
ksfokAuthor Commented:
For now we need to cover continents only and not countries. When users click on a continent, we will produce a list of countries on a new web page for them to choose.
0
ksfokAuthor Commented:
The world map of the swf is a bmp image imported into library. Can we accomplish what we discuss using that bmp? Please advise how. Thanks.
0
IqAndreasCommented:
Yes, that is VERY possible.

Check out the previous link (http://www.flashfridge.com/tutorial.asp?ID=2) Even though the tutorial is made for Flash 8, the concept remains the same no matter what version you have.

However, instead of drawing a rectangle to act as a button, use the pen tool (or whatever your favorite Flash vector drawing tool is) and draw one button for each country in whatever shape the country is, and place this button over your map in the same location as the country you want it to correspond to.

Do you need some help with this, or do you understand how it can be done?


I might be able to help you with a sample if you send me the file you want to use as a map, however, it is a bit difficult for me to open FLA files as I am stuck in Linux, so try creating these buttons on your own, and if you still aren't able to get something working, ask again and I will fix it for you, however, it will take at least another 24 hours until Flash Professional is available to me again.

Otherwise, I could also explain to you via Skype screen sharing, and walk you through each step if that is convenient for you.
0
IqAndreasCommented:
Ah, yes, working with a bitmap makes things quite a bit easier, but the same concept can still be used. In fact, it may be a lot easier this way.

If you use the "Trace Bitmap" feature of Flash Professional, you are able to break apart the image into vector drawings. Then, you can break apart each vector drawing into several MovieClips, each with their own hit area.

The tutorial here shows how to break apart a Bitmap into several MovieClips.
http://www.emanueleferonato.com/2010/03/18/creation-of-a-flash-coloring-book/
Just use the same concept, but instead of the coloring part, just listen for the mouse events, and when the movie clips are clicked, navigate to the appropriate pages.

Do you need help applying the tutorial to your current code?
0
ksfokAuthor Commented:
Thanks for your help so far. Something confuses me is this: My swf is now working as a world map (jpg image) masked with a tiny dot expanding to the full size of the map. Where and how should we start working on the clickables spots? Jump right into the jpg and play with it in the current fla? Or do we need to build a new jpg with the clickables spots and reimport it in a new fla similar to the old fla?
0
IqAndreasCommented:
I don't quite understand what you mean by this "masked with a tiny dot expanding to the full size of the map". Could you elaborate?


You have two options here.

IMPORT SEVERAL IMAGES, ONE FOR EACH COUNTRY
Anyway, you can use several bitmaps, one for each country, and it might be easiest convert each separate "country image" to a MovieClip. You can use the same FLA, and have each country stored as a MovieClip in the library.

IMPORT ONE IMAGE, AND BREAK IT APART IN FLASH
However, if that is too much of a hassle, you can break apart the JPG image when it's on the stage into several movie clips, one for each country. Check out that link I posted previously. It describes the process quite well.
http://www.emanueleferonato.com/2010/03/18/creation-of-a-flash-coloring-book/


Could you upload the image in question? Then I can see how easy it would be to break it apart.

Did you make this image yourself in an image drawing or manipulation program, or was the image created by someone who cannot easily break it apart into layers?
0
ksfokAuthor Commented:
Something like this:
http://fhswolvesden.wikispaces.com/file/view/1-world-map-political.gif/81329845/1-world-map-political.gif
Except no oceans or countries. Only continents.
0
IqAndreasCommented:
Yes, if they are all one color, it should be very easy to break apart.

Flash tends to get confused when trying to break apart gradients, but then you can manually set the lines between each continent.

Do you understand which options are available to you, or should I explain any of the methods in more detail?
0
remorinaCommented:
Hi ksfok,
If you're not willing to implement a flash effect on mouse move in the flash, i.e the flash is not interactive in any way.
You can easily create an overlay div with a blank 1pixels image and give the image the width & height of the flash div, then assign an image map for the overlay layer.

I've done this before in several ways, one of the examples can be found here http://eagleboys.com.au/find-a-store/
The map on the right is actually a background image for the whole Country http://eagleboys.com.au/Portals/_default/Skins/EagleBoys/map_finder.gif and an overlay layer is combined with a javascript and image map using this overlay image here http://eagleboys.com.au/Portals/_default/Skins/EagleBoys/map_overlay_bg.gif to give the hover effect and provide the link for each state

0
ksfokAuthor Commented:
qAndreas, my actual map contains countries in various colors. Would that be a problem?
0
IqAndreasCommented:
It should still work, and if you are having a difficult time breaking up the image, you still always have the option of using invisible buttons using examples I posted before.
0
eguilhermeCommented:
do you have any experience with adobe flex ? if you have you could try to implement something like this:

http://www.degrafa.org/source/DegrafaMapSample/DegrafaMapDemo.html

(here its the us map, but you replace the coords using a world map svg like this:
http://en.wikipedia.org/wiki/File:BlankMap-World6.svg)
0
ksfokAuthor Commented:
using http://en.wikipedia.org/wiki/File:BlankMap-World6.svg, please provide further help with the following:
  1. Walk thru steps creating invisible buttons with click events.
  2. Modify a text label on a given map. Problem is finding the font matching the original text.
Thanks
0
IqAndreasCommented:
Excellent!

Since the map in in SVG format, all you have to do is:
> Import the image into the library
> Drag the image onto the stage
> Right click the image and choose "Break apart" several times until each continent can be selected as a separate graphic or vector fill
> Select multiple vector fills using the "lasso" tool, and when you have a group selected, right click, and choose "Convert to symbol"

Do that until all countries/regions are MovieClips. Then just add event listeners on each button to detect when they are clicked, like you would any other MovieClip.

Any questions?

Give it a try first, and if you aren't able to fix it on your own, if you have Skype, you can share your screen and I can walk you through the process, explaining every step out loud along the way.


Andreas
0
ksfokAuthor Commented:
How can we modify a text label on a given map?
Problem is finding the font matching the font of other text on the original map.

0
IqAndreasCommented:
Just add a new TextField to the stage wherever you want to place the text. :) Just like you would add any other text in Flash.

As for finding the matching font, that is an entirely new topic. :P
0
ksfokAuthor Commented:
Would you help me with the attached fla to illustrate what you have covered?
Make 3 buttons: car, ground, house. Each of the buttons transfer the browser to a different url of you choice.
Thanks.

Maison.jpg
0
IqAndreasCommented:
Hey, did you ever get the problem solved? Or would you still like that sample clickable map based on your image?

I would love to do it, but since I'm running in Linux, I am unable to use Flash, only Flex Builder (), which means I am unable to open or create FLA files. :( However, I will have my windows installation up and running again this weekend if you don't mind waiting until then. The first thing I will do with Windows installed is reinstall Flash Professional.

Good luck with your programming,
Andreas
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.