Groups | Blog | Home
all groups > flash actionscript > april 2005 >

flash actionscript : Drawing based on x/y pos's read in from XML


David Stiller
4/11/2005 11:58:45 AM
lumpy mcfunkerson,

[quoted text, click to view]

That's a lot of code to read through. ;)

Of course, it makes no difference where the coordinates come from --
XML, external TXT file, form response ... who cares, right? -- it sounds
like you're having trouble with the Drawing API, and that's it.

Which leads me to ask, have you successfully used the Drawing API in the
past? In other words, stepping away from the distractions of all the XML
business, care you familiar enough with moveTo(), lineTo(), etc. to draw
shapes already?

If not, I highly recommend breaking down your goal into discrete steps
and tackling each of those separately. Boring as it may seem, throw down a
quick, totally hard-wired example of the Drawing API that works, then use
that success to slowly work your way back into the main project.

I would also recommend tracing out your coordinates just before they're
drawn, to make sure you ripped them correctly from the XML. And/or use the
Debugger panel to step through your drawing routine, which will allow you to
see the variables "live and in person" as they do their thing. It may be
that you're simply passing in NaN, or that your coordinates are string types
(which they will be, coming directly from XML).


David
stiller (at) quip (dot) net
"Luck is the residue of good design."

David Stiller
4/11/2005 12:36:01 PM
[quoted text, click to view]

I shouldn't have spoken quite so confidently, because now I'm having
second thoughts. I *think* they'll be strings -- and if they are, yes, you
can convert them to numbers with Number() (this wouldn't be a cast, but a
conversion, since the two datatypes share no heritage) -- but even if that's
not it, you're on the right track by troubleshooting and consulting the API.
:)


David
stiller (at) quip (dot) net
"Luck is the residue of good design."

lumpy mcfunkerson
4/11/2005 3:53:11 PM
Howdy - I need to draw outlines of the footprints of n buildings that are
described in an xml file which I'm reading into FMX Pro. I'm loading the xml,
looping thru it, finding the node which holds the x/y coords (pipe delimited
list) all without problem. The problem is that I can't get the stinkin'
ActionScript to actually draw the footprint(s)! Aaaaarg!!

Basically, here's the process:

1. load xml
2. loop thru each building element
3. For each building, create an empty movieclip which will hold the drawing of
the building footprint outline
4. for each building, find coordinates node, parse pipe-delimited list
5. loop thru coordinates list (moveTo() first element, then lineTo()
remaining elements) drawing outline in this building's movieclip

If anyone can help me over this last hurdle (the stinkin' footprint not
drawing), I'd greatly appreciate it!

ActionScript:



//create the XML object
var myXML:XML = new XML();
myXML.ignoreWhite = true;

//create the event for when the XML object loads content
myXML.onLoad = function(success){
if(success){

//start walking the Building XML tree
for (var i:Number = 0; i < this.firstChild.childNodes.length; i++) {

//create a new building movieclip that will hold outline of building
footprint
var thisBuilding_mc:String = "thisBuilding_mc_" + i;
this.createEmptyMovieClip(thisBuilding_mc, 20 + i);

//search thru each building's nodes
for (var j:Number = 0; j <
this.firstChild.childNodes[i].childNodes.length; j++) {

//get the name:value pair of each node within a building
var nodeName:String = this.firstChild.childNodes[i].childNodes[j].nodeName;
var nodeValue:String =
this.firstChild.childNodes[i].childNodes[j].childNodes[0].nodeValue;
//trace(nodeName+"="+nodeValue);

//we need to do special processing with the <coordinates></coordinates>
node
if (nodeName == "coordinates"){

//establish an array holding each x/y coordinate for this building's
footprint
var my_str:String = nodeValue;
var my_array:Array = my_str.split("|");

//next draw the footprint within the movieclip we created for this
building
with(thisBuilding_mc) {

//loop thru the x/y position array
for (var i = 0; i<my_array.length; i++) {
trace(my_array[i]);

//start drawing the outline - if it's the first array element we
"moveTo()" otherwise "lineTo()"
lineStyle(1,0x000000,this.getNextHighestDepth());
if (i == "0") {
trace(thisBuilding_mc); moveTo(nodeValue);
}
else {
lineTo(nodeValue);
} //end if()

} //end with()
} //end if()
} //end for (j..)
} //end for(i..)
} //end if(success)

} else {
trace("There was a major error.");
}
} //end xml.onLoad()

//now load the content
myXML.load("siteplan.xml");



XML:

<?xml version="1.0" encoding="iso-8859-1"?>

<phase>
<building>
<buildingID>1</buildingID>
<name>Blackbear Lodge</name>
<status>now taking reservations</status>

<image>http://cardel.aumenta.net/gondolaplaza/images/elevation_thumb.jpg</ima
ge>
<units>54</units>
<levels>4</levels>
<priceRange>$250 - $640k</priceRange>

<coordinates>232,275|249,268|251,275|257,271|272,278|275,276|284,280|310,293|
298,324|258,307|246,311|237,311|237,331|210,317|232,375</coordinates>
</building>
<building>
<buildingID>2</buildingID>
<name>Glacier Lodge</name>
<status>sold out</status>

<image>http://cardel.aumenta.net/gondolaplaza/images/elevation_thumb.jpg</ima
ge>
<units>54</units>
<levels>4</levels>
<priceRange>$250 - $640k</priceRange>

<coordinates>232,275|249,268|251,275|257,271|272,278|275,276|284,280|310,293|
298,324|258,307|246,311|237,311|237,331|210,317|232,375</coordinates>
</building>
</phase>
lumpy mcfunkerson
4/11/2005 4:21:56 PM
Hey David - thanks for taking an interest!

Ya, I've fooled around with the drawing API a bit before but it's all still
pretty new to me (as are all things Flash - heck, it took me a while yesterday
to figure out split() as I've been spoiled for so long using CF to loop thru
lists). I did trace the coords in the middle of my drawing routine and they do
appear to be correct.

Your point about coords being String types (coming from XML) is interesting,
though! Can I cast them as numbers using Flash? Errr... hang on, I'll check the
ActionScript reference.

thanks!
Peter Blumenthal
4/12/2005 11:38:46 AM
I can see a couple of problems with this (the drawing) piece of code:

var my_str:String = nodeValue;
var my_array:Array = my_str.split("|");
//next draw the footprint within the movieclip we created for this building
with (thisBuilding_mc) {
//loop thru the x/y position array
for (var i = 0; i<my_array.length; i++) {
trace(my_array[i]);
//start drawing the outline - if it's the first array element we
"moveTo()" otherwise "lineTo()"
lineStyle(1, 0x000000, this.getNextHighestDepth());
if (i == "0") {
trace(thisBuilding_mc);
moveTo(nodeValue);
} else {
lineTo(nodeValue);
} //end if()
} //end with()
} //end if()


First of all, in your lineStyle statement you are setting the alpha of your
lines to the depth of the clip - if the clip has a depth of 1, you aren't
going to be able to see your lines....

Secondly, you arent actually using your array to draw the coordinates - you
are trying to use nodeValue, which is a string of bar delimited values,
right?

moveTo(nodeValue);


Lastly, you are trying to give the drawing API a string ("232, 275") to
parse, which will cuase it problems.

Here - this works:

var my_str:String = nodeValue;
var my_array:Array = my_str.split("|");
//next draw the footprint within the movieclip we created for this building
with (thisBuilding_mc) {
//loop thru the x/y position array
for (var i = 0; i<my_array.length; i++) {
trace(my_array[i]);
var arTemp:Array;
var nX:Number;
var nY:Number;
arTemp = my_array[i].split(",");
nX = arTemp[0];
nY = arTemp[1];
//start drawing the outline - if it's the first array element we
"moveTo()" otherwise "lineTo()"
lineStyle(1, 0x000000, 100);
if (i == 0) {
trace(thisBuilding_mc);
moveTo(nX, nY);
} else {
lineTo(nX, nY);
}
//end if()
}
//end with()
}
//end if()

lumpy mcfunkerson
4/13/2005 8:56:03 PM
Hey Peter - thanks for the tip(s). I've been looking at the code you suggested,
and trying to run it stripped down from everything else but haven't got it
working. In an effort to debug, I've just loaded in the string of x/y
coordinates into the string declaration (my_str) replacing the nodeValue.

When I get into the nitty gritty and am looping thru the arTemp[0] and
arTemp[1] values I've run a trace to see what I'm getting. Turns out it's
"undefined". Can you (or anyone else!!!) perhaps let me know what I'm doing
wrong. Here's the code:


lumpy mcfunkerson
4/13/2005 9:04:57 PM
this.createEmptyMovieClip("thisBuilding_mc", this.getHighestDepth());

var my_str:String =
"232,275|249,268|251,275|257,271|272,278|275,276|284,280|310,293|298,324|258,307
|246,311|237,311|237,331|210,317|232,375";
var my_array:Array = my_str.split("|");

//next draw the footprint within the movieclip we created for this building
with (thisBuilding_mc) {
//loop thru the x/y position array
for (var k = 0; k<my_array.length; k++) {

trace(my_array );
var arTemp:Array;

arTemp = my_array .split(",");
var nX:Number = arTemp[0];
var nY:Number = arTemp[1];
nX = arTemp[0];
nY = arTemp[1];
trace("nX: " + nX);
trace("nY: " + nY);

//start drawing the outline - if it's the first array element we "moveTo()"
otherwise "lineTo()"
lineStyle(1, 0x000000, 100);
if (k == 0) {
//trace(thisBuilding_mc);
moveTo(nX,nY);
} else {
lineTo(nX,nY);
}
}
}

lumpy mcfunkerson
4/14/2005 2:49:30 PM
Thanks so much! The arTemp = my_array[k].split(","); was absolutely the last
crucial bit I had f*cked up. Thanks to everyone else who helped too...

Problems like this are what you get when programmers become PM's and then all
of a sudden have to do some coding again. In a new technology, no less! Sheesh.

Thanks again.
Peter Blumenthal
4/14/2005 3:20:13 PM
Here you lumpy ;)

this.createEmptyMovieClip("thisBuilding_mc", this.getHighestDepth());
var my_str:String =
"232,275|249,268|251,275|257,271|272,278|275,276|284,280|310,293|298,324|258,307|246,311|237,311|237,331|210,317|232,375";
var my_array:Array = my_str.split("|");
//next draw the footprint within the movieclip we created for this building
with (thisBuilding_mc) {
//loop thru the x/y position array
for (var k = 0; k<my_array.length; k++) {
trace(my_array);
var arTemp:Array;
var nX:Number;
var nY:Number;
arTemp = my_array[k].split(",");
nX = arTemp[0];
nY = arTemp[1];
trace("nX: "+nX);
trace("nY: "+nY);
//start drawing the outline - if it's the first array element we
"moveTo()" otherwise "lineTo()"
lineStyle(1, 0x000000, 100);
if (k == 0) {
//trace(thisBuilding_mc);
moveTo(nX, nY);
} else {
lineTo(nX, nY);
}
}
}



What you missed was, instead of:
arTemp = my_array.split(",");

You need:
arTemp = my_array[k].split(",");

I also put the variable declarations outside of the for loop, as you only
need to declare them once.

HTH

}P

Peter Blumenthal
4/15/2005 12:00:00 AM

[quoted text, click to view]

Happens to us all mate ;) Glad i could help

AddThis Social Bookmark Button