Link to home
Start Free TrialLog in
Avatar of EMB01
EMB01Flag for United States of America

asked on

Displaying XML Results in Multiple Objects w/ AS2

How do I use ActionScript to program the results of an XML file to be displayed in three different movieclips. For example, the XML file would have three entries (images) and there are three movieclips in the animation - each of the movieclips would display one of the three images from the XML file. Optimally, I want them (the results of the XML document) to go into three specified movieclips (i.e. mc1, mc2, mc3, etc.). The movieclips should also be links; as described in the attached XML code snippet.
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<images>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/kresge.jpg</image>
        <caption>Kresge</caption>
        <url></url>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/medialab.jpg</image>
        <caption>Media Lab</caption>
        <url>http://www.emarketbuilders.com/</url>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/stata.jpg</image>
        <caption>Stata Center</caption>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/stata_lobby.jpg</image>
        <caption>Stata Lobby</caption>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/construction.jpg</image>
        <caption>Construction</caption>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/dome.jpg</image>
        <caption>The Dome</caption>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/structure.jpg</image>
        <caption>Structure</caption>
    </pic>
</images>

Open in new window

Avatar of blue-genie
blue-genie
Flag of South Africa image

do you know how to get the xml into flash first of all?
what is the criteria for which xml node goes where?

here's what i'd do.
load the xml - split them into 3 different arrays according to however you need it.
(or use a multidimensional array - the former would be easier but you're advanced so you can go that way too).

then use the nodeValue of your xml node as a link. if you're using AS2 - getURL or navigateToURL for AS3.

 blu.
Avatar of EMB01

ASKER

Thanks for your response, blue-genie. This question is in reference to this question: https://www.experts-exchange.com/questions/23127849/Displaying-XML-Results-in-Multiple-Objects.html?cid=239. That question contains a solution to this problem in AS3. The expert there said that they would post an AS2-specific solution here. Thanks again for your help.
Ok here we go. I'll send you the code in a moment.
Let's go. First create a XML file (just open Notepad or other text editor and paste the following):
<images>
      <pic>
            <image>http://www.kirupa.com/developer/mx2004/pg/kresge.jpg</image>
            <caption>Kresge</caption>
            <url>http://www.kresge.com/</url>
      </pic>
      <pic>
            <image>http://www.kirupa.com/developer/mx2004/pg/medialab.jpg</image>
            <caption>Media Lab</caption>
            <url>http://www.emarketbuilders.com/</url>
      </pic>
      <pic>
            <image>http://www.kirupa.com/developer/mx2004/pg/stata.jpg</image>
            <caption>Stata Center</caption>
            <url>http://www.statacenter.com/</url>
      </pic>
      <pic>
            <image>http://www.kirupa.com/developer/mx2004/pg/stata_lobby.jpg</image>
            <caption>Stata Lobby</caption>
            <url>http://www.stataloby.com/</url>
      </pic>
</images>

- Save and name it "images.xml" (without quotes)
- Create new .FLA document, actionscript 2.0
-in First frame paste the following code:
- Save the FLA file in same folder as the XML (or change the xml path in forth line of code)
-Run

If you have any doubts let me know. I put enough comments so you will not be lost, but if need asking something, just ask. I'm attaching Flash 8 file zipped together with xml file. This is the oldest version I can save to, cause I'm using flash cs3 . Remember to change the attached file extension from .pdf to .zip.
var xpos:Number = 0;//the incrementng position of the mages
var xmlImages:XML = new XML();//xml document - will load from external file
xmlImages.ignoreWhite = true;//ignores whitespace characters, so it won't ruin the xml structure
xmlImages.load("images.xml");//tell it to load the external xml
xmlImages.onLoad = function(ok) {
	if (ok) {//if it loads ok
		var images:Array = this.firstChild.childNodes;//get the main <pic> nodes in a array
		for (i=0; i<images.length; i++) {//iterate through each <pic> node
			//get the text value of each sub tags of pic
			var img = images[i].childNodes[0].firstChild.nodeValue;//<image>
			var caption = images[i].childNodes[1].firstChild.nodeValue;//<caption>
			var link = images[i].childNodes[2].firstChild.nodeValue;//<url>
			var mc:MovieClip = _root.createEmptyMovieClip("mc__"+i, i);//create a movieclip to hold the image
			mc._x = xpos;//set its x position - dynamic
			mc._y = 50;//set its y position - static
			mc._xscale = 20; // set the scale so it is small
			mc._yscale = 20; //same
			mc.useHandCursor = true;//uses the hand to show it is a link
			mc.link = link; // set its link - in as2 MovieClip is dynamic, so it accepts any runtime property you create
			mc.caption = caption; // same for caption
			mc.onPress = function() {
				trace("clicked:"+this.link);
				//set its behavior so when clicked will open the link in new page
				getURL(this.link, "_blank");
			};
			mc.loadMovie(img);//loads the image
			//updates the x position, so the next image stays on side
			xpos += 60;
		}
	} else {
		trace("xml could not be loaded. check file name");
	}
};

Open in new window

displayXML.zip.pdf
One thing more: keep your xml structured. The xml you posted is missing some nodes, so you should treat them if needed. In my example I filled all missing tags, so there was no need to treat the missing ones.
Avatar of EMB01

ASKER

Thanks, but the code only produces one image. Also, the links don't seem to work. If it is easier at this point, I would have liked the XML data to appear in three movieclips (already in the scene) named mc1, mc2, mc3. That way, I can move and scale the images visually.
First let me correct a mistake in the first code, I'm sorry for that. Here I'm correcting the links not working, I forgot a line of code.
var xpos:Number = 0;//the incrementng position of the mages
var xmlImages:XML = new XML();//xml document - will load from external file
xmlImages.ignoreWhite = true;//ignores whitespace characters, so it won't ruin the xml structure
xmlImages.load("images.xml");//tell it to load the external xml
xmlImages.onLoad = function(ok) {
	if (ok) {//if it loads ok
		var images:Array = this.firstChild.childNodes;//get the main <pic> nodes in a array
		for (i=0; i<images.length; i++) {//iterate through each <pic> node
			//get the text value of each sub tags of pic
			var img = images[i].childNodes[0].firstChild.nodeValue;//<image>
			var caption = images[i].childNodes[1].firstChild.nodeValue;//<caption>
			var link = images[i].childNodes[2].firstChild.nodeValue;//<url>
			var mc:MovieClip = _root.createEmptyMovieClip("mc__"+i, i);//create a movieclip to hold the image
			//create a subclip in the mc, to load image
			//this is needed so the parent movieclip can receive clicks
			mc.createEmptyMovieClip("img", 0);
			mc._x = xpos;//set its x position - dynamic
			mc._y = 50;//set its y position - static
			mc._xscale = 20; // set the scale so it is small
			mc._yscale = 20; //same
			mc.useHandCursor = true;//uses the hand to show it is a link
			mc.link = link; // set its link - in as2 MovieClip is dynamic, so it accepts any runtime property you create
			mc.caption = caption; // same for caption
			mc.onPress = function() {
				trace("clicked:"+this.link);
				//set its behavior so when clicked will open the link in new page
				getURL(this.link, "_blank");
			};
			//here I load the img into the subclip, not in the mc , because of event handling
			mc.img.loadMovie(img);//loads the image
			//updates the x position, so the next image stays on side
			xpos += 60;
		}
	} else {
		trace("xml could not be loaded. check file name");
	}
};

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of julianopolito
julianopolito
Flag of Brazil image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of EMB01

ASKER

That worked flawlessly. However, I've one more question for you... I have the XML images playing in an animation but the images are missing from the first ten frames of the opening sequence because the XML has not yet been loaded. Is there anyway to pre-load the XML data from an ealier frame, so that it is ready by the time the animation starts?
the problem is not the xml not been loaded, but the images themselves. Yes, there is a way to preload xml and images. Let me think the easiest way to do that in the code I've sent you.
Avatar of EMB01

ASKER

Okay, and to simply clarify; the the movieclips are inside of another (master) movieclip which is the subject of the animation.
in the firstframe , after your preload, you do this:

stop();
var xmlImages:XML = new XML();//xml document - will load from external file
xmlImages.ignoreWhite = true;//ignores whitespace characters, so it won't ruin the xml structure
xmlImages.load("images.xml");//tell it to load the external xml
xmlImages.onLoad = function(ok) {
     play();
}

then in the frame where you have all the code, you don't need to wait for the xml, just use it directly:




var xpos:Number = 0;//the incrementng position of the images
var mcs:Array = [mc1,mc2,mc3];//movieclips predefined on stage
 
		var images:Array = this.firstChild.childNodes;//get the main <pic> nodes in a array
		for (i=0; i<images.length && i < mcs.length; i++) {//iterate through each <pic> node until there are movieclips on stage
			//get the text value of each sub tags of pic
			var img = images[i].childNodes[0].firstChild.nodeValue;//<image>
			var caption = images[i].childNodes[1].firstChild.nodeValue;//<caption>
			var link = images[i].childNodes[2].firstChild.nodeValue;//<url>
			var mc:MovieClip = mcs[i];//here we get a predefined mc on stage
			mc.createEmptyMovieClip("img",0);
			mc.link = link; // set its link - in as2 MovieClip is dynamic, so it accepts any runtime property you create
			mc.caption = caption; // same for caption
			mc.onPress = function() {
				trace("clicked:"+this.link);
				//set its behavior so when clicked will open the link in new page
				getURL(this.link, "_blank");
			};
			mc.img.loadMovie(img);//loads the image
			//updates the x position, so the next image stays on side
			xpos += 60;
		}
	

Open in new window

Avatar of EMB01

ASKER

For some reason, nothing happens. No errors are reported in the output either.
can you send the files? zip all of them, change extension to.pdf, and attach here. I'll test for you. The problem may be the scope.
Avatar of EMB01

ASKER

Here it is:
xml-multiple-demo.pdf
I don't know if you sent correct file. I can't find mc1 mc2 and mc3 on stage, also can't find the rest of the code. I'll modify it and send you
I made a mistake, forgot to change one line of code.

var xpos:Number = 0;//the incrementng position of the images
var mcs:Array = [mc1,mc2,mc3];//movieclips predefined on stage
 
		var images:Array = xmlImages.firstChild.childNodes;//get the main <pic> nodes in a array
		for (i=0; i<images.length && i < mcs.length; i++) {//iterate through each <pic> node until there are movieclips on stage
			//get the text value of each sub tags of pic
			var img = images[i].childNodes[0].firstChild.nodeValue;//<image>
			var caption = images[i].childNodes[1].firstChild.nodeValue;//<caption>
			var link = images[i].childNodes[2].firstChild.nodeValue;//<url>
			var mc:MovieClip = mcs[i];//here we get a predefined mc on stage
			mc.createEmptyMovieClip("img",0);
			mc.link = link; // set its link - in as2 MovieClip is dynamic, so it accepts any runtime property you create
			mc.caption = caption; // same for caption
			mc.onPress = function() {
				trace("clicked:"+this.link);
				//set its behavior so when clicked will open the link in new page
				getURL(this.link, "_blank");
			};
			mc.img.loadMovie(img);//loads the image
			//updates the x position, so the next image stays on side
			xpos += 60;
		}

Open in new window

xml-multiple-demo2.zip.pdf
Avatar of EMB01

ASKER

I can't open the .fla file from the Zip Archive. The mc1, mc2, mc3 movieclips are in the "XML_multiple" library item. This library item also holds the code.
in XML_multiple, change line 5 to :

var images:Array = _root.xmlImages.firstChild.childNodes;
Avatar of EMB01

ASKER

Thanks, that worked perfectly. The comments you added also help me understand how ActionScript works.
anytime you need just call me