AS3 Clicking in "zones" of a picture

Question

I have searched and simply cannot find what I need (if it exists).

1. A window will have a large picture.

2. The picture will be divided into zones (such as border lines that separate states on a map).

3. When a person clicks within a zone, then I will raise the appropriate event.

I've used AS3 with MXML to create a database program. All is working great except for this last step. I cannot figure out how the user is within a particular area of the picture when he clicks or when he touches.

I've read and tried to come up with an approach, and there must be (hopefully so) an easier way than the muddled nonsense I'm coming up with.

Thanks

VL

Answer 1

Are you drawing it in flash professional CS6? If so then why can't you just have the picture as a symbol and then just self divide the lines and make those divided areas into symbols that are children of the picture symbol. You could keep the individual state symbols right where they so that they stay true to the overall picture.

A first thought would be to make an instance of this picture symbol through the code, and then loop though all the children of that picture and add a click event to each one.

var picture:Picture=new Picture();
for(var i:int=0; i<picture.numChildren-1; i++){
 picture.getChildAt(i).addEventListener(MouseEvent.CLICK, mouseEventHandler);
}

Please comment if I am missing something, or this does not work.

EDIT

Well, if you know the dimensions of the image, you could divide its width and height by 3(your number of rows and columns) and this is your zone dimensions. You then could take the mouse's click point relative to the top left of your picture and then divide its width by the zone with, and its height by the zone height, and then get its integer floor value, you could get which region it is. Code it below:

    //This is all for a constat region list (like a window, or floor tiles, not things irregular)

import flash.display.Sprite;
var regionsX:int = 3; //Your number of windows across the row
var regionsY:int = 3; // across the column
var regions:Array = new Array(); // an array to hold the values that you will get from where the user clicks
// All of this used a 2D array method
for(var x:int = 0; x < regionX; x++) {
    regions[regionsX] = new Array(); 
    for(var y:int = 0; y < regionY; y++) {
        regions[regionsX][regionsY] = "region(".concat(x).concat(",").concat(y);
        // Here you make this equal to anything you want to get a value of, 
        //once the correct region is found (I just have a string version here for an example)
    }
}
... // other stuff..

var picture:Picture = new Picture(); // your window picture
var regionWidth:Number = picture.width / regionsX; // Gets each region's width
var regionHeight:Number = picture.height / regionsY; // Get each regoin's height
...
picture.addEventListener(MouseEvent.CLICK, mouseEventListener); // add a click listener to the picture

function mouseEventListener(event:MouseEvent):void{
    var mouseX:Number = picture.globalToLocal(event.stageX); // gets where the user clicked, and then converts it
    //to the picture's cordinate space. ( 50,100 acording to the stage, could be (25,200) to the picture)
    var mouseY:Number = picture.globalToLocal(event.stageY); // same for the Y

    var regionIntX:Number = Math.floor(mouseX / regionWidth); // Dives the point by each region's width, and then
    // converts it to a while integer. (For instance, if a region's width is 100 and you click at 288, then if you do the
    // math, you clicked in the 3rd region, but it returns 2... why? (becaue the array counter starts at 0, so 0 is the 1st
    //  region, 1 is the second and so on...
    var regionIntY:Number = Math.floor(mouseY / regionHeight); // Same for Y

    var yourValue:String = regions[regionIntX][regionIntY]; // This returns that you initialy put into your 2d array
    // by using the regionIntX and regionIntY for the array values. You have to decide what is stored in this array...
}

Answer 2

The simplest solution would be to add an event listener for MouseEvent.CLICK to the picture and in the handler check properties mouseX and mouseY of the picture. Define the bounds of each area in an XML or similar and check against current mouseX/Y to see which area has been clicked.