?
Solved

Displaying XML Results in Multiple Objects

Posted on 2008-01-31
17
Medium Priority
?
244 Views
Last Modified: 2008-02-06
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.
0
Comment
Question by:EMB01
  • 9
  • 8
17 Comments
 
LVL 17

Expert Comment

by:julianopolito
ID: 20793300
//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
 
LVL 14

Author Comment

by:EMB01
ID: 20795946
Thank you; but is there anyway to do it so the images are not at random positions?
0
 
LVL 14

Author Comment

by:EMB01
ID: 20798036
Optimally, I want them (the results of the XML document) to go into three specified movieclips (i.e. mc1, mc2, mc3, etc.).
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
LVL 17

Expert Comment

by:julianopolito
ID: 20800624
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
 
LVL 17

Expert Comment

by:julianopolito
ID: 20800633
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
 
LVL 14

Author Comment

by:EMB01
ID: 20801222
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
 
LVL 17

Expert Comment

by:julianopolito
ID: 20801257
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
 
LVL 17

Expert Comment

by:julianopolito
ID: 20801261
and the structure of the xml matters. it differs the way you reach nodes depending on the xml tree
0
 
LVL 14

Author Comment

by:EMB01
ID: 20801351
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
 
LVL 17

Expert Comment

by:julianopolito
ID: 20801974
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
 
LVL 14

Author Comment

by:EMB01
ID: 20802096
When you say "no interaction" do you mean without links? In that case, I would prefer for there to be links.
0
 
LVL 17

Accepted Solution

by:
julianopolito earned 1500 total points
ID: 20804292
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
 
LVL 14

Author Comment

by:EMB01
ID: 20804393
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
 
LVL 17

Expert Comment

by:julianopolito
ID: 20805005
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
 
LVL 14

Author Comment

by:EMB01
ID: 20805081
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
 
LVL 17

Expert Comment

by:julianopolito
ID: 20827005
ok, there is no problem. I'll then do an AS 2 version for you. I'm sorry for the inconvenience.
0
 
LVL 14

Author Comment

by:EMB01
ID: 20832145
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Magento is the best technology for eCommerce start-ups as it offers the technical expertise and visual appeal to create a store that pulls sales and earns high ROI (Return on investment).
Now many of you may wonder how you can reach great design with least number of essentials. Isn’t stuffing ‘more and more number of elements that speak for the purpose’ the right way to do it? Erm, not always, and in this write-up, you will see why.
The goal of the tutorial is to teach the user how to how to load their YouTube profile onto Flash Media Live Encoder.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month5 days, 22 hours left to enroll

589 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question