AS3 Using XML data and parse it to a List Component – FLASH CS3
by Carlos Pinho, February 16th, 2008
  • Share
  • Share

Using AS3 to load XML data it’s quite different than using AS2. In this tutorial I will explain to you, how we can load an external XML data, bring it to the fla file, and parse it to a List component. Using your notepad or similar program, make a simple XML file like the above example.

<?xml version=”1.0″ encoding=”iso-8859-1″?>

<news>
<item date = “01/01/2007“>
<title>news1</title>
<description>Lorem ipsum elitrgh dolor sit amet, consectetuer adipiscing elit. Maecenas vitae nisi.</description>
<pic>japao1</pic>
</item>
<item date = “02/02/2007“>
<title>news2</title>
<description> Lorem ipsum elitrgh dolor sit amet, consectetuer adipiscing elit. Maecenas vitae nisi.</description>
<pic>japao2</pic>
</item>
<item date = “03/03/2007“>
<title>news3</title>
<description> Lorem ipsum elitrgh dolor sit amet, consectetuer adipiscing elit. Maecenas vitae nisi.</description>
<pic>japao3</pic>
</item>
<item date = “04/04/2007“>
<title>news4</title>
<description> Lorem ipsum elitrgh dolor sit amet, consectetuer adipiscing elit. Maecenas vitae nisi.</description>
<pic>japao4</pic>
</item></news>

Save it at the same directory as your fla file, naming it as news.xml. Now, the first step to load the xml file, we use the following code:


var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

xmlLoader.load(new URLRequest(“news.xml”));

As you are using AS3, every time we define a variable, we must identify, which kind of variable is it. In the above code we say that the variable xmlLoader belongs to the URLLoader class (xmlLoader:URLLoader), and the xmlData is the type XML (xmlData:XML). When the data is loaded, we must say to the code “where to go”. It’s an event, so xmlLoader.addEventListener(Event.COMPLETE, LoadXML);, it’s the same as saying that when the xml data was completely loaded, then calls the function LoadXML. Now drag a List component into stage, and name it as my_lst.

The following code will define which data we want to show on the List component, as also parse into it.

function LoadXML(e:Event):void {

xmlData = new XML(e.target.data);

ParseNews(xmlData);

}

function ParseNews(newsXML:XML):void {

var newsList:XMLList = newsXML.item.title;

for each (var newsTitle:XML in newsList) {

my_lst.addItem({label:newsTitle, data:newsTitle});

}

}

Run your movie.

On the next tutorial, I will define a new var, to be used as data, instead of using same as label (label:newsTitle, data:newsTitle), giving us the opportunity to bidding data with other components, and retrieve other data by other parameters. By Carlos Pinho

This entry was posted on Saturday, February 16th, 2008 at 12:52 am and is filed under AS3, Components, Flash, Resources, Source Code, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Copy and Paste the code below
Email and IM
Websites
Forums
Get This

27 Responses to “AS3 Using XML data and parse it to a List Component – FLASH CS3”

  1. David Says:
    February 19th, 2008 at 8:14 am

    Great, that was just what im looking for…really hanging out for the next part with a different var for data.

  2. sushil Says:
    March 14th, 2008 at 7:32 am

    it is great…
    But can you write more like how and where to load this with some complete example so that i can get more idea in less time about it.
    thanks

  3. nikos101 Says:
    March 21st, 2008 at 9:40 am

    how would you parse the list to an array instead of a list?

  4. Adnan Says:
    July 17th, 2008 at 4:39 pm

    Anyone know this same tutorial for AS2 also?

  5. jishnu Says:
    August 12th, 2008 at 7:21 pm

    very gooddddddd

  6. jishnu ms Says:
    August 12th, 2008 at 7:22 pm

    it is greatttttttt

  7. Flash tutorials | Using XML and E4X,XML data and Parse AS3 in Flash CS3 roundup | Lemlinh.com Says:
    August 14th, 2008 at 1:03 pm

    [...] AS3 Using XML data and parse it to a List Component – FLASH CS3 [...]

  8. zeroone Says:
    August 21st, 2008 at 10:32 am

    Great !

  9. L Says:
    September 5th, 2008 at 11:43 am

    This does not work.. really.. I’ve done everything right, but it just gives me errors: XML parser failure: element is malformed.

    What’s wrong ?

  10. Carlos Pinho Says:
    September 5th, 2008 at 11:59 am

    Hi L,

    Which line is reverting the error?

  11. This script contains error Says:
    September 12th, 2008 at 1:55 pm

    This script contains error. I try stept by step, and it doesn’t work. Does anyone has the .fla file?

  12. RichM Says:
    September 18th, 2008 at 10:59 pm

    I get the same error as L…

    TypeError: Error #1090: XML parser failure: element is malformed.
    at test/LoadXML()
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at flash.net::URLLoader/onComplete()

    Help please! :)

  13. RichM Says:
    September 18th, 2008 at 11:01 pm

    My bad, had the same problem as with the “s around news.xml. You have to convert them all to standard ” rather than “. Works now, thanks.

  14. Sanstenarios Says:
    November 4th, 2008 at 5:08 pm

    Would you have a link to provide regarding parsing XML to a datagrid component with html columns… in AS3 !;

  15. Lisa Says:
    November 6th, 2008 at 3:43 am

    parse XML

  16. Melda Says:
    November 13th, 2008 at 12:44 pm

    I also got the same error as L:
    TypeError: Error #1090: XML parser failure: element is malformed.
    at list_fla::MainTimeline/LoadXML()
    at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at flash.net::URLLoader/flash.net:URLLoader::onComplete()

    What did I do wrong? Help, please..

  17. Melda Says:
    November 13th, 2008 at 12:50 pm

    It works now! Yep the “s in the news.xml have to be changed to “

  18. BobN Says:
    November 18th, 2008 at 11:28 pm

    Works for me! now i have changed the commas in the xml document

  19. BobN Says:
    November 18th, 2008 at 11:41 pm

    Hi Carlos do you have a link to the follow on tutorial where you define a new var as data instead of (label:newsTitle, data:newsTitle)…cannot find it on the site….and its exactly what I am looking for

    Thanks …great work!!

  20. samson Says:
    November 22nd, 2008 at 1:18 pm

    what do ya mean the (“) needs to be changed to (“) ???

  21. Piano Chords Says:
    March 9th, 2009 at 10:17 pm

    Great, just what I was looking for. Thanks!

  22. integrationgeneration Says:
    March 11th, 2009 at 2:22 am

    hi, i am trying to get this done, but it does not work. i dont understand what has to be changed.
    please let me know.
    ig

  23. Flexr org Says:
    May 26th, 2009 at 12:42 am

    I think it is a shame that Adobe didn’t include error handling for XML parser failures. Most of the time you are in control of the XML that is being delivered to you, but not always. I am doing a project where I have to use XML data delivered by a company that OCR’s books. Their software makes mistakes…

  24. Martijn Says:
    July 17th, 2009 at 9:45 am

    Two things,
    1. “Now drag a List component into stage, and name it as my_lst.”
    What is a list component? I draged a textfield into stage.
    And 2. I get this error: 1061: Call to a possibly undefined method addItem through a reference with static type flash.text:TextField.

  25. Fighterlegend Says:
    August 8th, 2009 at 10:43 pm

    Hello, this has helped me.

    But not on this part..

    my_lst.addItem({label:userTitle, data:userTitle});

    I want the data to be what’s inside the news.

    Well, actually what I’m using is User.. It’s for a little app I’m making..

    I have this code:

    function announceLabel(e:ListEvent):void {
    var list:List = e.target as List;
    var item:Object = e.userTitle;
    trace(“Label: ” + item.label);
    trace(“Label displayed: ” + list.itemToLabel(item));
    infoBox.text = list.itemToLabel(item);
    infoBox.appendText(“\n”);
    infoBox.appendText(item.label);
    }

    to display the data into a text box, but I don’t have any data.

    Help?

  26. Grzegorz Widla Says:
    June 29th, 2010 at 8:29 am

    @ Martijn

    I know it’s been almost a year already but maybe someone needs very same knowledge.

    Component are nothing more than blocks of pre-made code you can populate with data. There are few default components in Flash, for example List, FLVPlayback or UILoader to name most known. You can access them by opening Components window (and edit using Component Inspector) by clicking on Window -> Components on the top bar in Flash. They appear in the application from Flash MX version.

    Your second issue is showing that method addItem is not defined for TextField, which is of course right. You need to open Components window, drag list component and name it’s instance ‘my_lst’ to follow the tutorial.

    Good luck!

  27. Web Designing Company Says:
    August 1st, 2010 at 8:35 am

    Great work. Nice post.. very helpful this is exaclty what i was looking for..

Let leave a Comments for this post.