-
*SOLVED* 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
Last edited by shanDB; 11-17-2009 at 08:18 AM.
-
FK'n_dog
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;
}
};
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|