How do I show multiple images when I hover over different areas with the MouseOver function?

[sellmark22]

I’ve been working on a flash simulator to show what our Expert Range Finder binocular product would look like. The idea is to hover over an area, or image and it show the range or how far the object is from you.

I have been successful in making it work with the following code below.  Yet I cannot add several "range" images (or symbols) when I hover over a certain area.  Can someone help me with the code?  I looked for hours on the internet and I cannot get it to work.  I am new to Flash but am starting to learn as much as I can.  Any help is appreciated!  Thanks!

Actionscript 3 Code:

img_nv.mask = mask2_mc;

mask2_mc.buttonMode=true;

mask2_mc.addEventListener(MouseEvent.MOUSE_DOWN, onDown);

mask2_mc.addEventListener(MouseEvent.MOUSE_UP, onUp);

function onDown(e:MouseEvent):void{

mask2_mc.startDrag();

}

function onUp(e:MouseEvent):void{

mask2_mc.stopDrag();

}

[Ned Murphy]

There are different ways you could approach this. 

One would be to constantly monitor the position of the cursor and when it is within a particular x/y range of values (defining one of your areas) you display the data appropriate for that area.  This would require various conditionals where you test the various ranges of x/y values.

Another approach could be to use movieclips or other objects that can have rollover code assigned to them.  These objects would represent the various areas and you would set their alpha property to 0 so that they are not visible.  You could use invisible buttons whereby you could see them in design mode and not when running the file.   When a rollover of an object occurs the data relative to that area gets displayed.

[sellmark22]

Yes, I am thinking that for my level of knowledge the rollover code for several movieclips/objects would be the best way to go.  When I rollover the "range" image (i.e. 27 yards), the object shows up.  I place all images as a PNG and have transparent backgrounds to make them work better.

I just don't understand how to set up the code.

[sellmark22]

Do you think this would work for multiple rollover movieclips?  I'll try it out and let you know if it works or not.

range1.addEventListener(MouseEvent.ROLL_OVER, manageMouseOver, false, 0, true);

range1.addEventListener(MouseEvent.ROLL_OUT, manageMouseOut, false, 0, true);

function manageMouseOver(event:MouseEvent):void{

  //my over code here

}

function manageMouseOut(event:MouseEvent):void{

  //my out code here

}

[Ned Murphy]

Yes, what you show should work.  I recommend trying it first for just a couple areas before pursuing what I'll offer next. 

There are ways you can write it to simply how much code you need to write.  For instance, you could share the same two functions for all of your rollover/rollout objects by making use of the name of the object to target the rest of the items that should display when it gets rolled over/out.  You could assign all of the items that display into an array that uses the name, and then loop thru the array to show/hide the items.

var range1Array:Array = new Array(item1name,item2name,etc....);

function manageMouseOver(event:MouseEvent):void{

    var arrayID:String = event.currentTarget.name + "Array";

    for(var i=0; i<this[arrayID].length; i++){

           this[arrayID].visible = true;

    }

}

In the function above, the event.currentTarget is the object that was rolled over, so the code uses its name to target the array of objects that it should make appear.

[sellmark22]

Argh I can't figure it out! I inserted the object and labeled it "range1" and It's not showing up properly.  What am I doing wrong?

Also i added a reticle that shows upon click and drag.  It successfully worked.

Actionscript code:

img_nv.mask = mask_mc;

mask_mc.buttonMode = true;

removeChild(reticle_mc);

mask_mc.addEventListener(MouseEvent.MOUSE_DOWN, dF);

stage.addEventListener(MouseEvent.MOUSE_UP, dropF);

function dF(event:MouseEvent):void{

addChild(reticle_mc);

this.addEventListener(Event.ENTER_FRAME,reticleF);

          mask_mc.startDrag();

}

function dropF(event:MouseEvent):void{

removeChild(reticle_mc);

this.removeEventListener(Event.ENTER_FRAME,reticleF);

          mask_mc.stopDrag();

}

function reticleF(e:Event):void{

reticle_mc.x=mask_mc.x;  // assuming they both have the same reg points (like the center)

reticle_mc.y=mask_mc.y;

}

range1.addEventListener(MouseEvent.ROLL_OVER, manageMouseOver, false, 0, true);

range1.addEventListener(MouseEvent.ROLL_OUT, manageMouseOut, false, 0, true);

function manageMouseOver(event:MouseEvent):void{

  //my over code here

}

function manageMouseOut(event:MouseEvent):void{

  //my out code here

}

[Ned Murphy]

Chances are that your rollovers are being blocked by the mask_mc.  What you might want to try instead of dragging the mask is to just have the mask follow the cursor using an ENTER_FRAME listener/handler.  Set the mouseEnabled property of the mask_mc to false.  That should let the rollover occur for objects below the mask_mc (I think).

Aside from that, I don't know what you mean when you say range1 is not showing up properly.

[Ned Murphy]

Here is a link to an example file I made based on the objects in your code and my suggestions in the last response.

http://www.nedwebs.com/Flash/AS3_Range_Finder.fla

The mask and reticle (not sure what that is) simply follow the cursor when you mouse_down, but they are not mouseEnabled so that the range is able to trigger the rollover/out events.

In it I also used the invisible button approach so that you can see where range1 is before the file is run, but it disappears when the file is running.  An invisible button can be made by placing content only in its Hit frame.

[sellmark22]

Ned:

I can't thank you enough for your help!  I just have a few questions left if you don't mind.

If you look at the picture, the text shows up in the "tfield" yet there is a weird symbol after "37Y" that I cannot get rid of.  In the code I erased in line 29 " + " zone" " Is that the reason why it is showing a weid symbol?

One more question. I tried placing multiple ranges and text fields and they are not working.  All I did was duplicate the code for the first range and text like below but I am missing something.  Will you kindly help me?

Actionscript Code:

range2.addEventListener(MouseEvent.ROLL_OVER, manageMouseOver, false, 0, true);

range2.addEventListener(MouseEvent.ROLL_OUT, manageMouseOut, false, 0, true);

function manageMouseOver(event:MouseEvent):void{

  tfield2.text = "over "+ event.currentTarget.name + " zone";

}

function manageMouseOut(event:MouseEvent):void{

tfield2.text = "";

}

range3.addEventListener(MouseEvent.ROLL_OVER, manageMouseOver, false, 0, true);

range3.addEventListener(MouseEvent.ROLL_OUT, manageMouseOut, false, 0, true);

function manageMouseOver(event:MouseEvent):void{

  tfield3.text = "over "+ event.currentTarget.name + " zone";

}

function manageMouseOut(event:MouseEvent):void{

  tfield3.text = "";

}

. . . .and so on for two more ranges and text fields.

[Ned Murphy · Accepted solution]

You cannot have different functions with the same name.  Go back to my earlier reply (4) where I talk about using the event.currentTarget.name and arrays of info/data.