Back to basics, tracking mouse coords into an array

[xMetal]

Hello all,

I've been reading through all the various threads related to the drawing API and saving drawings. About a hundred times I've seen mention of "log mouse positions into an array" and stuff like that, but I can't find any clear and simple examples of how to do this.

Let's take a very simple use of the drawing object to do freeform drawing. What is the AS to capture the mouse XYs as the user draws and put that into an array. I can't figure out how to get Flash to keep updating things as I go, it invariably grabs the fist point and that's it.

Could one of you AS gods just write out a super simple routine for this? I know I'm not the only one that needs this (as it seems to be asked every week)

Let's use the most basic drawing example I can find:

_root.createEmptyMovieClip("line",1);

_root.onMouseDown = function(){
line.moveTo(_xmouse,_ymouse);
line.lineStyle(0,0x000000,100);
this.onEnterFrame = function(){
line.lineTo(_xmouse,_ymouse);
}
}
_root.onMouseUp = function(){
this.onEnterFrame = null;
}

Where/what gets added to just capture all those _xmouse and _ymouse?

Thanks a bajillion everyone

[xMetal]

Oh come on guys, I know you all can do this without thinking! I've seen this asked about 20 times on here but never clearly explained.

Think of the kids! or something. :)

[Voetsjoeba]

Doesn't anybody think of the children ??



i = 0;
mousePos = new Array();
this.createEmptyMovieClip("line", 1);
this.onMouseDown = function() {
line.moveTo(_root._xmouse, _root._ymouse);
line.lineStyle(0, 0x000000, 100);
this.onEnterFrame = function() {
mousePos[i] = {x:_root._xmouse, y:_root._ymouse};
line.lineTo(_root._xmouse, _root._ymouse);
i++;
};
};
this.onMouseUp = function() {
this.onEnterFrame = null;
};

[xMetal]

finally, somebody who cares about the children. :azn:

Thanks for the tips. I plopped that into a totally blank file, but when I trace(mousePos) I get the following output:

[object Object],[object Object],[object Object],etc

Shouldn't that be the coords in there? I can't see where it's getting "object" from.

Could you explain the syntax of this line a little better? I'm just starting with this whole array thing. (One of those graphic designer that wears a lot of hats issues...)

mousePos[i] = {x:_root._xmouse, y:_root._ymouse};

I really appreciate the help.

[Voetsjoeba]

Yeah, that's normal. I stored objects in the array instead of values. Each object then has two properties, x and y. You can see that in the code. {} are the object initialisers. So an object is created with two properties, x and y, which hold the current position of the mouse. That object is then stored in the slot 'i' of the array. Then 1 is added to i to increase the slot number of the array and the same thing happens over again :)

[xMetal]

OK, I think I see what is happening there.

Now for my second obvious and stupid question of the day: Where are the actual coordinate values and how do I retrieve those?

It might help if I explain the goal of all this. What I am doing is allowing a user to draw a rough circular shape on top of a bitmap medical image. This shape can then be broken down (by the program) into a whole series of small lines (x1,y1,x2,y2). These lines can then have calculations run on them to compare the users input with an "expert" to arrive at an area measurement.

So ideally, what I need from flash is to just have an uninterrupted, comma delimited stream of XYs put into an array that would then be sent to XML.

Thanks Voetsjoeba. You guys here at Kirupa are awesome.

[Voetsjoeba]

Ok, so you want all XY's after eachother and not structured in an object ? Ok then ...



mousePos = new Array();
this.createEmptyMovieClip("line", 1);
this.onMouseDown = function() {
line.moveTo(_root._xmouse, _root._ymouse);
line.lineStyle(0, 0x000000, 100);
this.onEnterFrame = function(){
mousePos.push(_root._xmouse);
mousePos.push(_root._ymouse);
line.lineTo(_root._xmouse, _root._ymouse);
};
};
this.onMouseUp = function() {
this.onEnterFrame = null;
};


That stores the values in the array called mousePos: x,y,x,y,x,y,x,y,x,y, ....

[xMetal]

Actually, I just finished playing 10 seconds ago and and altered the one line of code to be:

mousePos[i] = [int(_xmouse), int(_ymouse)]

and that seems to be spewing out the basic thing I need. One big old string of numbers.

So now I just need to get that saved out to XML, and then the real fun begins, as I have to run my calculation on that and also bring in that expert measurement and draw a new line from those coordinates.

Any hints on how you would take a gigantic string of XYs like that and parse through to draw the line? :)

[Voetsjoeba]

What exactly do you want to do ? You want to transfer the coordinates to XML, and then ... they need to be drawn again or what ?

[xMetal]

yes, basically.

The user draws their shape, and we store that to an XML (which later will be used for educational testing purposes). After that, we load in this series of expert coordinates and draw that expert shape for comparison to the user input.

Finally, we will run a calculation on both to generate a math value on the size of their drawing (no need to worry about any of that though).

I'm pretty sure I can figure out how to write out the XML, but reading it back in and drawing the new shape from that string of XYs is the confusing part for me.

[Voetsjoeba]

Well it depends on how you structure your XML file. You can store it in many different ways. The way you load the data into Flash again depends on how the XML file is structured. Therefore, I can't just tell you how it's done; it depends.

[xMetal]

Well I've been experiementing with this. I did the simplest XML I could think of:

<expert>
<exp1>191,164,189,164,182,165,176,etc
</exp1>
</expert>

Now I've got that coming in and am storing that in an array, but it unexpectedly puts the whole string as item 0, instead of splitting it like I thought it would.

Here's the AS I had to bring in that XML file (I think you wrote this as well)

var expertXML = new XML();
var expertArray = new Array();
expertXML.ignoreWhite = true;
expertXML.load("expertdata.xml");
expertXML.onLoad = function() {
for (var i = 0; i<this.firstChild.firstChild.childNodes.length; i++) {
expertArray.push(this.firstChild.firstChild.childN odes[i].nodeValue);
}
displayExp = expertArray[0]
};

I've been trying to figure out how to split that item 0 into a new array of seperate items, but can't get it to work so far.

[Voetsjoeba]

Alrigteh, got this working. It kept rotating 90° at first, lol :P

This code draws from the coordinates given in the file 'expert.xml':



mc = this.createEmptyMovieClip("build", 1);
mc.lineStyle(0, 0x000000, 100);
expertArray = new Array();
expertXML = new XML();
expertXML.ignoreWhite = true;
expertXML.load("expert.xml");
expertXML.onLoad = function() {
index = 0;
for (var i = 0; i<this.firstChild.childNodes.length; i++) {
expertArray[i] = this.firstChild.childNodes[i].firstChild.nodeValue.split(",");
mc.moveTo(expertArray[i][0], expertArray[i][1]);
for (var j = 2; j<expertArray[i].length; j += 2) {
mc.lineTo(expertArray[i][j], expertArray[i][j+1]);
}
}
};


And your XML file is then structured like this:



<expert>
<exp>212,123,212,123,212,126,218,138,227,154,241,176,26 2.95,212,282.95,245,296.95,276,306.95,302,314.95,3 27,317.95,333,318.95,335,318.95,336,318.95,336,318 .95,336,319.95,336,323.95,328,334.95,309,360.95,26 3,384.95,230,406.95,199,428.95,162,439.95,141,448. 95,123,459.95,107,463.95,98,464.95,96,464.95,96,46 4.95,96,464.95,96,461.95,96,445.95,93,417.95,87,38 9.95,82,377.95,81,375.95,81,374.95,81,374.95,81,37 4.95,81,374.95,83,373.95,87,369.95,101,361.95,127, 352.95,161,340.95,208,331.95,238,325.95,258,324.95 ,269,324.95,271,323.95,272,323.95,272,323.95,272,3 23.95,272,323.95,271,322.95,265,316.95,246,302.95, 207,278.95,163,263.95,138,238,93,234,83,232,78,230 ,74,229,71,229,71,229,71,229,71,228,71,228,72,226, 78,222,84,219,90,212,106,210,111,209,112,209,113,2 08,115,208,117,208,117,208,117,208,117,208,119,208 ,121,208,121,208,121,208,121,208,122,208,122,208,1 23,209,124,209,124,209,125,210,125,210,126,210,126 ,210,126,210,126,211,126,211,126,211,126,212,126,2 12,126,212,126,212,126,212,126,212,126,212,126,212 ,126</exp>
</expert>


You may add as many <exp>'s as you like. Just place the coordinates inbetween new <exp></exp> tags and you're done. Here's some code you can use to get coordinates from a drawing you've made:



mousePos = new Array();
this.createEmptyMovieClip("line", 1);
line.lineStyle(0, 0x000000, 100);
this.onMouseDown = function() {
mousePos.push(_root._xmouse);
mousePos.push(_root._ymouse);
line.moveTo(_root._xmouse, _root._ymouse);
this.onEnterFrame = function() {
mousePos.push(_root._xmouse);
mousePos.push(_root._ymouse);
line.lineTo(_root._xmouse, _root._ymouse);
};
};
this.onMouseUp = function() {
this.onEnterFrame = null;
trace(mousePos);
};


When you have finished drawing, Flash will output the coordinates array. Copy and paste these into the XML file inbetween new exp tags, and then they will be read and redrawn by the code given above.

Attached are example files.

[xMetal]

wow! Man, that is awesome, exactly what I was looking for. I GREATLY appreciate the help on this. I'm going to work on integrating all that into my existing framework of stuff.

Thanks so much, that's fantastic.

:beer:

Don't go too far, who knows what I'll screw up next. :geek:

[Voetsjoeba]

Anytime ;)