Trying to create a simple map with Flash AS3 - AGAIN! :)

I guess I closed my last question a bit too soon! Gingermoleman, if you're still out there, I've got some easy points for you!!

Okay, so the solution proposed in my last question works perfectly. However, I'm trying to take it a step further and can't seem to get it to work (my Flash noobieness is showing).

Lets say I have a map and when you hover over an area, all the other areas on the map have their alpha reduced. In addition to this, I would like to add the names of the areas on the map on the side of it (like a legend). When a user rolls over the area of the map (or the title in the legend), I want the alpha of every other area reduced as well as the titles.

So just to clarify, if lets say I have a map of the States and someone hovers over New York (or the title in the legend), I want the alpha for all states on the map (as well as the titles in the legend) to be reduced.

This seems like a relatively simple thing to do but I've been messing around with it for the most part of the day and can't seem to figure it out. To get this going, I've provided a sample based off the solution I received in my last question. I've added the titles on the side but they don't currently do anything.

If someone can lend a hand, that would be great! Thanks.
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

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.

Hi furio,

Your difficulty here is how do you decide which text boxes to alpha. Using the method we used to detect which button we are over ( was straight forward, but as were not actually hovering over the text all the time how do we link them? One answer (and open your mind to this point, one answer! Ive often found there to be several solutions to every problem. You usually discover the most inefficient way first so it breaks and bites you later on! All part of the fun!) is to use string splits. ie we know the button is called btnX, and we also know all text are btn_txtX so all we really need to seperate out is X.

Change your overMap and outMap functions to these ones:

function overMap(e:Event){
      var clickedBtn = getChildByName(;
// still detect the right button
      var myString:String =;
// we cant just pull the name off the object and split it, at that stage its still an object an not text. So we need a string variable to read the name into
      var TempNo = myString.split("btn").join("");
//all we want is the number. myString at this point is "btn1". .split("btn") says we want to split our text everytime it reads "btn". We dont want any join, but flash will add "," to the start
//so we force the join to be blank using .join("")
      var clickedBtnText = getChildByName("btn_txt"+TempNo);
//now we can actually claim to know what bit of text relates to the button!
      for (var a:int = 1; a< 5; a++){
      var tempBtn:Object = getChildByName("btn"+a);
            tempBtn.alpha = .2;
      var tempBtnText:Object = getChildByName("btn_txt"+a);      
            tempBtnText.alpha = .2;
//same trick as the button, set all to an alpha of .2 at this stage, reset the one we want after the loop to 1
//here we set the required text to an alpha of 1

function outMap(e:Event){
      for (var a:int = 1; a< 5; a++){
      var tempBtn:Object = getChildByName("btn"+a);
            tempBtn.alpha = 1;
      var tempBtnText = getChildByName("btn_txt"+a);      

thats half your query! To get this working in reverse (so hover over names to affect map) thens its a simple case of copying these and "jiggling" them about so it works off the text btns (eg you'll be using split and join to figure out X for the btns). You game for trying this yourself?


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
AdamAuthor Commented:
Thanks for the reply GMM. You are definitely one of my favorite people at the moment.

Okay, so I went over your code and have to admit, I was a bit confused at first. But I think I got it now. I also managed to get the "reverse" effect to work too. However, as I know you're all about efficiency, I'm not entirely sure if the approach I took was the best.

Essentially, I created a new function for "hovering" over the titles. I used the code that you provided and made a few mods so that I would get the same effect but when a user rolls over titles. I've attached a sample.

It works which is great, but I am curious to know if there is a better way. Better is always good :)

Thanks again!
Hi Furio,

"Best" to my definition is did it work? So pat yourself on the back.
"Efficiency" isnt really a factor in something this straight forward. We've avoided the major pitfall by not using an enterFrame event (I'll explain this below if you dont know about this).
To make this "better", I need to know where your going with this. While its laid out as it is now (eg Map and text position relationship being identical for all 4 map items(eg list)) it would make a bit more sense to create 1 movieClip that contains the map button, text button and the as3 to link the 2 together. With this setup you could add as many as you like without the need to write out all those listeners as it would all be contained in the movieClip. Maybe a bit tougher to initiate the fading of all the movieClips from within an individual one but we could always spin that around (all maps and texts start alpha'd, the onHover brings the alpha up to 1 on that movieClip only).
If map peice and text positions need to be all over the place (like a real map) then we might be over complicating it.

If you want to keep this question open and keep developing, im happy to keep going on this with you.

the enterFrame Event (sortof) explained!

an enterFrame event is an event that is fired off at every frame. So if your swf is set to 24fps then the enterFrame event is executed 24 times a second. EnterFrame is a great function  for calculated animation (like a fractal drawing, or fake 3d environment). Its easy to put things like MouseX and MouseY in this to detect where the mouse pointer is or what its over. We could have used enterFrame to detect which "peice" we were over and to apply the alpha. If its not over a peice then all peices are to be alpha's to 1.
this would have meant we didnt need all those listeners and only would have needed one to listen for the enterFrame event. So why didnt we go this route? Why type out more?

the "problem" with enterFrame is that it does what it says! It runs at every frame. Once your using it, theres a tendency to add more and more to it as its all so easy to do. the downside is that you'll end up running code you dont need to. in our project, deciding that the mouse is over nothing different from the frame before means nothing to us, in this condition dwetect nothing means do nothing. Why have code deciding this?. We CAN (very easily) identify every user action and all user actions are very specific. Therefore, with a bit of planning, our final code ONLY executes when it needs to and there is no need at all to know when nothing has changed. This is efficient coding.

Dont let this put you off using enterFrame events, they're very useful especially when your just playing with an idea, only keep in mind that you want it OUT of that event if you can. The more complex your enterFrame event is, the more likely you are to experience lag in your app.

AdamAuthor Commented:
You sir, are a gentleman and a scholar gingermoleman. Thanks again for all your pointers and help. When I feel like I can get to a point that I actually help others with question like these, I'll pay it forward just like you did ;)

Have a good one!
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
Adobe Flash

From novice to tech pro — start learning today.