Get Rectangle variables from XML file

[arne75]

I am very new to Flash (have experience with Director) and I am looking at a way to use an external XML file to load variables for a rectangle into a .swf

This must be very basic stuff but I am struggeling with it.

Let's say I have the very basic XML file shown below. How do I get this information into a .swf file and change the dimensions of a rectangle in there.

<?xml version="1.0"?>

<dimensions>
<width>10</width>
<height>20</height>
</dimensions>

As said, I am new to Flash so please explain in basic terms :D

[rendall]

Hi Arne75.

It is a pretty basic question and there are lots of tutorials you can google that'll show you that better than I can here.

Look up the XML class in the flash docs to start.

basically the code is always of the form:

var rect_xml:XML = new XML();

rect_xml.load("file.xml");

rect_xml.onLoad = function(success:Boolean){
if (success) {
//... parse xml code here
}
else
{
//... error code here
}
}
Keep in mind that flash can parse xmls without a root node.
Also, it might be useful to put rect_xml.ignoreWhite=true after the declaration.

[arne75]

Thank you for the quick reply. I've been digging around for a while now and found the drawRoundRect() function. I've been passing XML variables to that fuction and it works!

The next problem is that I would like to draw multiple rectangles, like a bar graph. For some reason the fuction doesn't draw the second rectangle in the correct place if I vary the x or y values. It basically messes up the width.

Any ideas what is causing this?


<?xml version="1.0"?>


<variables>
<dimensions>
<height>50</height>
<width>40</width>
<color>0x900f0f</color>
</dimensions>
<dimensions>
<height>100</height>
<width>40</width>
<color>0x0cc98d</color>
</dimensions>

</variables>




function loadXML(loaded) {
if (loaded) {
_root.fheight = this.firstChild.childNodes[0].childNodes[0].firstChild.nodeValue;
_root.fwidth = this.firstChild.childNodes[0].childNodes[1].firstChild.nodeValue;
_root.fcolor = this.firstChild.childNodes[0].childNodes[2].firstChild.nodeValue;
_root.fheight1 = this.firstChild.childNodes[1].childNodes[0].firstChild.nodeValue;
_root.fwidth1 = this.firstChild.childNodes[1].childNodes[1].firstChild.nodeValue;
_root.fcolor1 = this.firstChild.childNodes[1].childNodes[2].firstChild.nodeValue;

drawRoundRect(0, 0, _root.fwidth, _root.fheight, {tr:5,tl:5,bl:0,br:0}, _root.fcolor, 100, "linear");
drawRoundRect(50, 0, _root.fwidth1, _root.fheight1, {tr:5,tl:5,bl:0,br:0}, _root.fcolor1, 100, "linear");
} else {
trace("file not loaded!");
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("dimensions.xml");



// drawRoundRect
// x - x position of fill
// y - y position of fill
// w - width of fill
// h - height of fill
// r - corner radius of fill :: number or object {br:#,bl:#,tl:#,tr:#}
// c - hex color of fill :: number or array [0x######,0x######]
// alpha - alpha value of fill :: number or array [0x######,0x######]
// rot - rotation of fill :: number or matrix object {matrixType:"box",x:#,y:#,w:#,h:#,r:(#*(Math.PI/180))}
// gradient - type of gradient "linear" or "radial"
// ratios - (optional :: default [0,255]) - specifies the distribution of colors :: array [#,#];
function drawRoundRect(x,y,w,h,r,c,alpha,rot,gradient,ratio s)
{
if (typeof r == "object") {
var rbr = r.br //bottom right corner
var rbl = r.bl //bottom left corner
var rtl = r.tl //top left corner
var rtr = r.tr //top right corner
}
else
{
var rbr = rbl = rtl = rtr = r;
}
// if color is an object then allow for complex fills
if(typeof c == "object")
{
if (typeof alpha != "object")
var alphas = [alpha,alpha];
else
var alphas = alpha;

if (ratios == undefined)
var ratios = [ 0, 0xff ];

var sh = h *.7
if (typeof rot != "object")
var matrix = {matrixType:"box", x:-sh, y:sh, w:w*2, h:h*4, r:rot * 0.0174532925199433 }
else
var matrix = rot;

if (gradient == "radial")
this.beginGradientFill( "radial", c, alphas, ratios, matrix );
else
this.beginGradientFill( "linear", c, alphas, ratios, matrix );

}
else if (c != undefined)
{
this.beginFill (c, alpha);
}

// Math.sin and Math,tan values for optimal performance.
// Math.rad = Math.PI/180 = 0.0174532925199433
// r*Math.sin(45*Math.rad) = (r*0.707106781186547);
// r*Math.tan(22.5*Math.rad) = (r*0.414213562373095);

//bottom right corner
r = rbr;
var a = r - (r*0.707106781186547); //radius - anchor pt;
var s = r - (r*0.414213562373095); //radius - control pt;
this.moveTo ( x+w,y+h-r);
this.lineTo ( x+w,y+h-r );
this.curveTo( x+w,y+h-s,x+w-a,y+h-a);
this.curveTo( x+w-s,y+h,x+w-r,y+h);

//bottom left corner
r = rbl;
var a = r - (r*0.707106781186547);
var s = r - (r*0.414213562373095);
this.lineTo ( x+r,y+h );
this.curveTo( x+s,y+h,x+a,y+h-a);
this.curveTo( x,y+h-s,x,y+h-r);

//top left corner
r = rtl;
var a = r - (r*0.707106781186547);
var s = r - (r*0.414213562373095);
this.lineTo ( x,y+r );
this.curveTo( x,y+s,x+a,y+a);
this.curveTo( x+s,y,x+r,y);

//top right
r = rtr;
var a = r - (r*0.707106781186547);
var s = r - (r*0.414213562373095);
this.lineTo ( x+w-r,y );
this.curveTo( x+w-s,y,x+w-a,y+a);
this.curveTo( x+w,y+s,x+w,y+r);
this.lineTo ( x+w,y+h-r );

if (c != undefined)
this.endFill();
}