Finding out coordinates of drawn objects in Flash AS3

Question

I'm in the process of making a board game in Flash; as part of process of getting fully to grips with Flash AS3.

I have a JPEG of the original board. This contains ~ 1000 circles that players may move pieces between. Pretty standard board-game stuff. The circles are not in any way regularly spaced.

So far, I've drawn the circles in Flash, by hand, and positioned them where they need to be. This looks great - I can see all my places.

What I want to do now is create these circles programatically. I want to be able to do this so I can adjust how the spaces look (depending on game state). Eventually I'll want to be able to zoom / pan the entire game board as well.

My question is, is there a way of tagging each circle with a unique reference and then looping through and recording locations?

I'm thinking something a bit like the Javascript DOM "getElementsByTagName" or similar.

At the moment I can only see two options:

1. Convert each circle to a symbol and give it a unique class name so I can access it from code
2. Go through and write down the X/Y of each circle (add to my DB of board locations that I already have) so I can plot them programatically

I'm fairly new to Flash, but I do come from a technical background. What I mean by that is that I don't need every last basic detail explaning; rather I just need someone to point me in the right direction! Thanks!

Answer 1

You could place the circles dynamically in the first place, either totally random, and you'd get elements overlapping, or place them in a grid with a small random offset. Maybe have a separate fla that would generate the circles again and again on click until you're happy with a configuration then spit out the actionscript code for that using a key. Kind of like a quick and dirty level editor.

var circlesNum:int = 20;
var circleRadius:Number = 10;
var circles:Array;
var row:int = 4;
var col:int = 5;
var space:int = 5;
var randomOffset:int = 5;
var randomShift:Number;

function generateCircles(event:MouseEvent = null):void{
    circles = [];
    while(numChildren > 0) removeChildAt(0);
    for(var i:int = 0 ; i < circlesNum; i++){
        var circle:Shape = new Shape();
        circle.graphics.lineStyle(1);
        circle.graphics.drawCircle(0, 0, circleRadius);
        circle.name = 'circle'+i;
        randomShift = Math.random() * randomOffset - randomOffset * .5;
        circle.x = ((circleRadius * 2 +space) * (i % col)) + randomShift;
        circle.y = ((circleRadius * 2 +space) * (i % row)) + randomShift;
        circles.push(circle);
        addChild(circle);
    }
}
function generateCode(event:KeyboardEvent = null):void {
    var code:String = 'var circles:Array = [';
    for(var i:int = 0 ; i < circlesNum; i++){
        if(i < circlesNum-1) code += '{name: ' + circles[i].name + 'x: ' + circles[i].x + ',y: ' + circles[i].y + '},\n';
        else                 code += '{name: ' + circles[i].name + 'x: ' + circles[i].x + ',y: ' + circles[i].y + '}];';
    }
    trace(code);
}

stage.addEventListener(MouseEvent.MOUSE_DOWN, generateCircles);
stage.addEventListener(KeyboardEvent.KEY_DOWN, generateCode);

You could name each circle movie clip instance and use actionscript to get the coordinates.

//assuming circles is a movieclip containing all your circles
var code:String = 'var circles:Array = [';
for(var i:int = 0 ; i < circles.numChildren; i++){
    if(i < circles.numChildren-1) code += '{name: ' + circles.getChildAt(i).name +'x: ' + circles.getChildAt(i).x + ',y: ' + circles.getChildAt(i).y + '},';
    else                     code += '{name: ' + circles.getChildAt(i).name +'x: ' + circles.getChildAt(i).x + ',y: ' + circles.getChildAt(i).y + '}];';
}
trace(code);

If you only need the X/Y of each circle, you can use JSFL(javascript flash) to loop through your circles and spit out the coordinates.

Here is a sample:

var doc = fl.getDocumentDOM();
var sel = doc.selection;
var selStr = 'var circles:Array = [';
if(sel){
    var elNum = sel.length;
    for(var i = 0 ; i < elNum ; i++){
        if(i < elNum-1) selStr += '{name: '+ sel[i].name +', x: ' + sel[i].x + ',y:' + sel[i].y + '},';
        else            selStr += '{name: '+ sel[i].name +', x: ' + sel[i].x + ',y:' + sel[i].y + '}];';
    }
    fl.trace(selStr);
}

Go to File > New > Flash Javascript File and paste that. You can save it as GetSelectionXY.jsfl in the Commands folder and then assign a keyboard shortcut if you find this handy.

Otherwise, select your circles (could be handy to have all of them in one layer and just select the layer) and run the command(using the playbutton/arrow).

It should spit something like:

var circles:Array = [{name: c1, x: 286.95,y:172},{name: c1, x: 180.95,y:320},{name: c1, x: 92.95,y:126},{name: c1, x: 184.95,y:190},{name: c1, x: 392.95,y:112},{name: c1, x: 316.95,y:226},{name: c1, x: 84.95,y:207},{name: c1, x: 84.95,y:85}];

in the output panel.

Easiest version would probably be with jsfl, you could just use DrawingObjects, no movie clips, just move them about then hit the magic shorcut key. The more flexible version would be the mini-editor grid thingy.

HTH