using XML to display an image

Hi,

I'm having a hard time wrapping my head around XML, in particular using XML to place an image on the stage.

I've got some code which I've appropriated from a tutorial, which creates a nice XML driven menu - And I would like to adapt it so that when I click on a menu item it displays a JPG (it currently calls up defined labels on my timeline, which is not really what I'm looking for)

I'm really hoping somebody can help me out with this, as trawling google hasn't really given me the simple answer I was looking for (lots of XML galleries tutorials, but I couldn't find an easy tutorial to display 1 image)

Here is my XML:

Code:

---

<?xml version="1.0" encoding="iso-8859-1"?>
<menu>
<menu buttonName = "item 1" />
<menu buttonName = "item 2" />
<menu buttonName = "item 3" />
</menu>

---

Now, I know I need to put another node in my XML with a URL for my image - I'm just not 100% sure how I should insert that into this code

and here is the AS:
I have created an MC on the stage with the instance name "imageHolder".
The following code currently doesn't have any provision to use any image.

Code:

---

pages.stop();
ready = false;
speed = 5;
xStart = 5;
yStart = 48;
bWidth = 82;
bHeight = 18;
var menuXml = new XML();
//loadXml("../assets/xml-menu/menu.xml");
loadXml("menu.xml");
function loadXml(file:String) {
    menuXml.ignoreWhite = true;
    menuXml.onLoad = loadMapData;
    menuXml.load(file);
    function loadMapData() {
        for (var i = 0; i<this.firstChild.childNodes.length; i++) {
            var bn = this.firstChild.childNodes[i].attributes.buttonName;
            var b = _root.attachMovie("button", bn, i);
            b._x = xStart;
            b._y = yStart+(bHeight*i);
            b.txt = bn;
            b.onPress = function() {
                pages.gotoAndStop(this.txt);
                pages.heading = this.txt;
                target = this._y;
            };
            /*b.onRollOver = function() {
            this.gotoAndStop(2);
            };
            b.onRollOut = function() {
            this.gotoAndStop(1);
            };*/
        }
    }
}
var c = this.attachMovie("current", "current", 100);
var d = this.attachMovie("draw", "draw", 101);
d._x = 5;
d._y = 160;
c._x = xStart+bWidth;
c._y = 200;
target = yStart;
this.onEnterFrame = function() {
    if (ready) {
        current._y += (target-current._y)/speed;
    }
};

---

If anyone could spare a moment to help me understand how I can make this happen with this code I'd be very appreciative.
cheers

add an image attribute to the XML -

PHP Code:

---

<?xml version="1.0" encoding="iso-8859-1"?>
<menu>
<menu buttonName = "item 1" imgName="1.jpg"/>
<menu buttonName = "item 2" imgName="2.jpg"/>
<menu buttonName = "item 3" imgName="3.jpg"/>
</menu>

---

parse the imgName and link to the buttons -

PHP Code:

---

pages.stop();
ready = false;
speed = 5;
xStart = 5;
yStart = 48;
bWidth = 82;
bHeight = 18;
var menuXml = new XML();
//loadXml("../assets/xml-menu/menu.xml");
loadXml("test.xml");
function loadXml(file:String) {
    menuXml.ignoreWhite = true;
    menuXml.onLoad = loadMapData;
    menuXml.load(file);
    function loadMapData() {
        for (var i = 0; i<this.firstChild.childNodes.length; i++) {
            var bn = this.firstChild.childNodes[i].attributes.buttonName;
            var b = _root.attachMovie("button", bn, i);
    var img = this.firstChild.childNodes[i].attributes.imgName;
    b.link = img;
            b._x = xStart;
            b._y = yStart+(bHeight*i);
            b.txt = bn;
            b.onPress = function() {
    trace(this.link);
    // imageHolder.loadMovie(this.link);  // load to empty movieclip
                pages.gotoAndStop(this.txt);
                pages.heading = this.txt;
                target = this._y;
            };
            /*b.onRollOver = function() {
            this.gotoAndStop(2);
            };
            b.onRollOut = function() {
            this.gotoAndStop(1);
            };*/
        }
    }
}
var c = this.attachMovie("current", "current", 100);
var d = this.attachMovie("draw", "draw", 101);
d._x = 5;
d._y = 160;
c._x = xStart+bWidth;
c._y = 200;
target = yStart;
this.onEnterFrame = function() {
    if (ready) {
        current._y += (target-current._y)/speed;
    }
}; 


---

thanks for your reply.. It's certainly got me on the track, but not quite there yet..

When I test my movie, and click on one of my menu buttons, rather than getting an image to display I'm instead getting the name of the image typed into the OUTPUT window in flash..

Any ideas on why that might be happening.

Once again, thanks for your help

ahhh success!!!

looking over your code again, I realized you made your amendments as comments..

it worked - thanks so much.. Scratching my head with this over the last 24 hours, and I now have a much better understanding of how XML works..

thank you..

For anyone else reading this.. my code is now as follows:

Code:

---

pages.stop();
ready = false;
speed = 5;
xStart = 5;
yStart = 48;
bWidth = 82;
bHeight = 18;
var menuXml = new XML();
//loadXml("../assets/xml-menu/menu.xml");
loadXml("menu.xml");
function loadXml(file:String) {
        menuXml.ignoreWhite = true;
        menuXml.onLoad = loadMapData;
        menuXml.load(file);
        function loadMapData() {
                for (var i = 0; i<this.firstChild.childNodes.length; i++) {
                        var bn = this.firstChild.childNodes[i].attributes.buttonName;
                        var b = _root.attachMovie("button", bn, i);
                        var img = this.firstChild.childNodes[i].attributes.imgName;
                        b.link = img;
                        b._x = xStart;
                        b._y = yStart+(bHeight*i);
                        b.txt = bn;
                        b.onPress = function() {
                                imageHolder.loadMovie(this.link);  // load to empty movieclip
                                pages.gotoAndStop(this.txt);
                                pages.heading = this.txt;
                                target = this._y;
                        };
                        /*b.onRollOver = function() {
                                    this.gotoAndStop(2);
                                    };
                                    b.onRollOut = function() {
                                    this.gotoAndStop(1);
                                    };*/
                }
        }
}
var c = this.attachMovie("current", "current", 100);
var d = this.attachMovie("draw", "draw", 101);
d._x = 5;
d._y = 160;
c._x = xStart+bWidth;
c._y = 200;
target = yStart;
this.onEnterFrame = function() {
        if (ready) {
                current._y += (target-current._y)/speed;
        }
};

---