Question

Good Morning,

I have an existing Flash app that has a layer containing a square separated into 4 quadrants. A set of icons is provided to the user and he/she is asked to drag each icon into one of the quadrants.

Does Flash/AS3 provide a way to create a grid (not necessarily DataGrid) that overlays the existing image? If so, how do I setup AS3 syntax to save the quadrant in which an icon is placed?

Thanks much!!

Answer 1

If I understand your question correctly, you have a 2 x 2 grid into which icons are dragged. You need to save the position of a icon in this grid.

Couple ways to do this but I think the easiest would be to use a little bit of math to determine where the icon is.

If there is some button that indicates the user has placed the icon where he/she wants to then write your code in the handler for that button.

The following will find the distance between the top-left corner of the grid and the top-left corner of the icon. You can use this to find how many quadrants over the icon is by dividing the x value of this distance by the width of a quadrant. In this case the width of a quadrant is half the size of the grid’s total width (because it is only 2 across). In order to find out how many quadrants down the icon is, do the same with the y component of the distance.

var col:Number = Math.round( Math.abs(icon.x - grid.x) / (grid.width/2))+1;
var row:Number = Math.round( Math.abs(icon.y - grid.y) / (grid.height/2))+1; 

The Math.abs (absolute value function) is just in case the distance is negative for whatever reason. Without the +1 that expression would result in either 0 or 1 in col and row which would be fine if you considered the first quadrant to be 0 x 0 but since I said 2 x 2 grid it’d be nice to have the furthest corner of the grid to be 2 x 2.

Also in order for this to work make the grid and the icon are both symbols with instance names. Instance names can be set in the properties window under “instance name” after clicking on the symbol on the stage (main work area).

Furthermore should you implement this you’ll note that even if the icon is more than half way down a quadrant it will still register as being in the quadrant above. This is because in the code above we’re comparing the distance between the top left corners. In order to measure the distance between the center of the icon and the top left corner of the grid simply add half the height of icon to its y value like so:

var row:Number = Math.round( Math.abs((icon.y+icon.height/2) - grid.y) / (grid.width/2))+1;

Note I haven’t tested this code but in theory it should work.