How to load xml in Actionscript 3
If you have content stored in a database or in xml that is suitable for presenting in flash, then XML is one of many ways to give flash the content. Information stored in XML can be similar to this example:
<mobiles> <mobile image="images/C905_product_quality_image_1.png" name="C905" /> <mobile image="images/G502_product_quality_image_1.png" name="G502" /> <mobile image="images/T650i_product_quality_image_1.png" name="T650i" /> <mobile image="images/W302_product_quality_image_1.png" name="W302" /> <mobile image="images/W350_product_quality_image_1.png" name="W350" /> <mobile image="images/W902_product_quality_image_1.png" name="W905" /> <mobile image="images/X1_product_quality_image_1.png" name="X1" /> <mobile image="images/z770i_product_quality_image_1.png" name="Z770i" /> </mobiles>
In order to get the XML content in flash you have to create a URLLoader and load the url where the XML is located. Here is an example how to get the attributes in the mobile node:
//create a array holding the items
var items:Array = new Array();
//create the urlloader object
var loader:URLLoader = new URLLoader();
//set the loaders listener function that gets the event when the xml is loaded
loader.addEventListener(Event.COMPLETE, handleXMLLoaded);
//load the xml file from it's location
loader.load(new URLRequest("http://yourdomain.com/yourdataholder.xml"));
//the listener that gets the load complete event
function handleXMLLoaded(e:Event):void
{
//create a new flash.xml.XMLDocument object
var xml:XMLDocument = new XMLDocument();
//ignore the white spaces in the file
xml.ignoreWhite = true;
//parse the content and create a xml structure in the XMLDocument
xml.parseXML(loader.data);
//firstchild represents first node, childNodes represent the nodes in the firstChild
for(var i:int = 0; i < xml.firstChild.childNodes.length; i++){
var o:Object = xml.firstChild.childNodes[i].attributes;
//creating a new item of MobileItem with the image url and name received from xml
var item = new MobileItem(o.image, o.name);
//pushing the item to the items array holding the mobiles
items.push(item);
}
}
You may want to create a class representing the content in flash like the code above includes. In this example you should create a class called MobileItem with the attributes image and name. Here is a class representing the mobile object:
package
{
public class MobileItem extends Sprite
{
private var _imageUrl:String = "";
private var _name:String = "";
private var _image:Sprite;
public function MobileItem(imageUrl:String, name:String)
{
_imageUrl = imageUrl;
_name = name;
//use the LoadExternal class from http://flash.lillegutt.com/?p=55 to load the image, remember to remove the '//'
//_image = new LoadExternal(imageURL);
}
public function getImage() : Sprite
{
return _image;
}
public function getName() : String
{
return _name;
}
}
}
There you go. Have fun!
I don’t get it. Where does the _image var that gets returned by the getImage() come from?
It’s not declared anywhere and not set. Wouldn’t you have to make a loader that loads the image from the _imageUrl string and then return that? Did you miss something here, or am I?
Hi,
You are completely correct. What you should do is go to my post Loading External resources in as3: http://flash.lillegutt.com/?p=55 and use that class to load the image, before you set it in the MobileItem. I actually had the initial image loading in the constructor in this class and therefore forgot to remove the Sprite reference in the get and set methods. I updated the source so you know where to put your code.
lillegutt
Right.. What about using E4X in xml and as3? I used this in my smooth xml picture gallery, check it out here: bit.ly/7aWzXt
I am new to as3 and I need your help please. I was trying to load and unload multiple images from an xml file with a button to load and another button to unload. I was able t load the images perfectly, however, I couldn’t unload it. Here is my code :
var thumb_width:Number;
var thumb_height:Number;
var thumbs_x:Number;
var thumbs_y:Number;
var my_videos:XMLList;
var my_total:Number;
var main_container:Sprite;
var thumbs:Sprite;
var thumb_loader:Loader;
//Loading the video playlist xml file
var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest(“playlist_Tech2day.xml”));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);
//Processing the video XML file data
function processXML(e:Event):void{
var myXML:XML = new XML(e.target.data);
thumb_width = myXML.@THUMB_WIDTH;
thumb_height = myXML.@THUMB_HEIGHT;
thumbs_x = myXML.@THUMBS_X;
thumbs_y = myXML.@THUMBS_Y;
my_videos = myXML.vid;
my_total = my_videos.length();
makeContainers();
//callThumbs();
}
//Crating a sprite container that houses the video images or thumbs and text description.
function makeContainers():void{
main_container = new Sprite();
addChild(main_container);
thumbs = new Sprite();
thumbs.x = thumbs_x;
thumbs.y = thumbs_y;
main_container.addChild(thumbs);
}
//creating a function that loads thumbs and text description from the loaded xml file.
function callThumbs():void{
for (var i:Number = 0; i < 3; i++){
var thumb_url = my_videos[i].@thumb;
thumb_loader = new Loader();
thumb_loader.load(new URLRequest(thumb_url));
thumb_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
thumb_loader.y = (thumb_height+10)*i;
}
}
function thumbLoaded(e:Event):void{
var my_thumb:Loader = Loader(e.target.loader);
thumbs.addChild(my_thumb);
}
btn1.addEventListener(MouseEvent.CLICK, addthumbs);
function addthumbs(e:MouseEvent):void{
callThumbs();
}
btn2.addEventListener(MouseEvent.CLICK, removethumbs);
function removethumbs(e:MouseEvent):void{
thumb_loader.unload();
}
Any assistance is appreciated! Thank you!