Displaying XML Results in Multiple Objects

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.
LVL 14
EMB01Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

julianopolitoCommented:
//Actionscript 3.0
var xmlImages:XML = <images>
  <image>img/image1.jpg</image>
  <image>img/image2.jpg</image>
  <image>img/image3.jpg</image>
  </images>;

for each(image:XML in xmlImages.image){//xmlImage.image is a XMLList with all images
       var imgldr:Loader = new Loader();//this is kind of movieclip, but it can load external content
       imgldr.load(new URLRequest(image.toString()));
       imgldr.x = Math.random()*300;//positions randomly
       imgldr.y = Math.random()*300;
       addChild(imgldr);//adds the loader to stage, so it can be seen
}

Put this code in the first frame of Actionscript 3.0 document, and put the 3 images in the xml in the same folder. This will load the 3 images and put them at random points on stage.


0
EMB01Author Commented:
Thank you; but is there anyway to do it so the images are not at random positions?
0
EMB01Author Commented:
Optimally, I want them (the results of the XML document) to go into three specified movieclips (i.e. mc1, mc2, mc3, etc.).
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

julianopolitoCommented:
yes it is very simple actually. The sample I sent you is more complex than what you want.
Put 3 movieclips on stage as you want, let's say you name them mc1,mc2,mc3.

//Actionscript 3.0
var xmlImages:XML = <images>
  <image>img/image1.jpg</image>
  <image>img/image2.jpg</image>
  <image>img/image3.jpg</image>
  </images>;
var mcs:Array = [mc1,mc2,mc3];
var i:int = 0;
for each(mc:MovieClip in mcs){//iterates through each mc in the array
       var imgldr:Loader = new Loader();//this is kind of movieclip, but it can load external content
       imgldr.load(new URLRequest(xmlImages.image[i])); //You should have number of images >= number of mcs
       mc.addChild(imgldr);//adds the loader to each mc, so it can be seen
}

Put this code in the first frame of Actionscript 3.0 document, and put the 3 images in the xml in the same folder. This will load the 3 images and put them into 3 pre-defined movieclips
0
julianopolitoCommented:
UPDATE:the code has an error, here it is again:

var i:int = 0;
for each(mc:MovieClip in mcs){//iterates through each mc in the array
       var imgldr:Loader = new Loader();//this is kind of movieclip, but it can load external content
       imgldr.load(new URLRequest(xmlImages.image[i])); //You should have number of images >= number of mcs
       mc.addChild(imgldr);//adds the loader to each mc, so it can be seen
       i++;
}
0
EMB01Author Commented:
I'll give that a shot. Just to make sure, I am using an external XML document; so does it matter when the XML structure is as has been attached?
<?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

0
julianopolitoCommented:
Well, you said tou wanted to know how to parse xml and use it's info to do load images in movieclips, but based on the xml, I can see you are trying to make somthing like a menu?
0
julianopolitoCommented:
and the structure of the xml matters. it differs the way you reach nodes depending on the xml tree
0
EMB01Author Commented:
Exactly right, what I have now is basically a slideshow with links; but I want each of the entries to instead show up side by side. How much would the code have to change to make this possible?
0
julianopolitoCommented:
some of it. You want it to be static? no interaction? I'll make a sample displaying each image in the xml side by side statically.
0
EMB01Author Commented:
When you say "no interaction" do you mean without links? In that case, I would prefer for there to be links.
0
julianopolitoCommented:
Here it is. images from xml put side by side containing links. Save the code snippet into AnotherSlide.as and use it as document class for a actionscript 3.0 .fla.
package
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.utils.Dictionary;
	import flash.display.Loader;
	import flash.net.URLRequest;
	import flash.net.navigateToURL;
 
	public class AnotherSlide extends Sprite
	{
		private var info:Dictionary;
		public function AnotherSlide(){
			var xmlImages:XML = <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>;
			var xpos:Number = 0;
			info = new Dictionary();
			for each(var pic:XML in xmlImages.pic){//xmlImage.image is a XMLList with all images
			       var imgldr:Loader = new Loader();//this is kind of movieclip, but it can load external content
			       imgldr.load(new URLRequest(pic.image.toString())); 
			       var sprite:Sprite = new Sprite();
			       sprite.addChild(imgldr);
			       sprite.x = xpos;
			       sprite.y = 50;
			       sprite.scaleX = 0.2;
			       sprite.scaleY = 0.2;
			       info[sprite]= {};
			       info[sprite].link = pic.url.toString();
			       info[sprite].caption = pic.caption.toString();
			       
			       sprite.addEventListener(MouseEvent.CLICK,linkImage);
			       xpos += 60;
			       addChild(sprite);//adds the loader to stage, so it can be seen
			}
				
		}
		private function linkImage(e:MouseEvent):void{
			navigateToURL(new URLRequest(info[e.currentTarget].link),"_blank");
		}
	}
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
EMB01Author Commented:
This is probably a stupid question... How do I save the code snippet as an .as file? Also, is there anyway to accomplish this without having to use classes and AS3? Could we do it in AS2, perhaps; and still use classes? Sorry for the trouble.
0
julianopolitoCommented:
open flash , create new actionscript file, copy the code snippet and paste there. Yes it can be done without classes and in as2. Yes it can be done in as3 without classes too. But your question was:
"How do I use ActionScript to program the results of an XML file to be displayed in three different movieclips"
As you did not specify that you wanted in as 2, and also accepted the first code I sent as 3 I did it in as 3. Also you asked how to program results of xml, so I assumed you knew how to acquire the xml by coding. In AS 2 the handling of XML is totally different, cause in as3 XML is treated as E4X spec.
0
EMB01Author Commented:
Sorry, julianopolito - I have not been clear. I have Flash MX 2004; I didn't realize the different versions would be so... different. If you please, I can open a new question that is specific to ActionScript 2.0 and I can accept this as a solution for ActionScript 3.0?
0
julianopolitoCommented:
ok, there is no problem. I'll then do an AS 2 version for you. I'm sorry for the inconvenience.
0
EMB01Author Commented:
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Flash

From novice to tech pro — start learning today.