FLASH CS3 TUTORIAL – AS3 How to load XML data and parse it to a List Component
by Carlos Pinho, July 24th, 2007
  • Share
  • Share

flash_cs3_63x63.gifUsing 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 bellow 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. </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.v Lorem ipsum elitrgh dolor sit amet, consectetuer adipiscing elit. Maecenas vitae nisi.v Lorem ipsum elitrgh dolor sit amet, consectetuer adipiscing elit</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.v Lorem ipsum elitrgh dolor sit amet, consectetuer adipiscing elit. Maecenas vitae nisi.v Lorem ipsum elitrgh dolor sit amet, consectetuer adipiscing elit</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.v Lorem ipsum elitrgh dolor sit amet, consectetuer adipiscing elit. Maecenas vitae nisi.v Lorem ipsum elitrgh dolor sit amet, consectetuer adipiscing elit</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.

Brgds,
CP

This entry was posted on Tuesday, July 24th, 2007 at 1:31 pm and is filed under AS3, Actionscript, Flash, 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

No Responses to “FLASH CS3 TUTORIAL – AS3 How to load XML data and parse it to a List Component”

  1. smackme Says:
    July 24th, 2007 at 11:07 pm

    Very nice!
    Keep up the good stuff.

    Cheers.

  2. Grettir Says:
    July 25th, 2007 at 10:45 am

    Ja publiquei o tutorial no meu blog.

    Gostei, ficou catita.
    Para a semana escrevo um.

    [[ ]]

  3. cpinho Says:
    July 25th, 2007 at 12:39 pm

    Tnx,

    Was the 1st, hope the next to be better…

    cya

  4. Marcos Says:
    July 26th, 2007 at 11:48 pm

    Olá Carlos. Traduzi e coloquei no meu blog também, gostei bastante, ficou simples e muito funcional. Cooquei no meu uma introdução ao Flex, vou trazduir para o ingles hoje e mando para vocês.

    Att.

  5. Joe Says:
    May 10th, 2008 at 12:23 am

    When i copy your code exactly, i get the following errors.

    TypeError: Error #1085: The element type “news” must be terminated by the matching end-tag “”.
    at Xml_fla::MainTimeline/LoadXML()
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at flash.net::URLLoader/onComplete()

  6. Carlos Pinho Says:
    May 10th, 2008 at 3:38 pm

    Hi Joe,

    Could you pls re check now? Sometimes when you try to copy from the blog, due to the format, the code revert some errors. try to copy all the code and to past it in plain text.
    But i think the problem is on the xmlLoader.load(new URLRequest(“news.xml”));

    Maybe you have only one “, i/o “”

  7. avn.rocky Says:
    May 28th, 2008 at 8:01 am

    hi Joe..

    That’s really fantastic..
    please also add the tutorial for displaying the news contents (description etc.) on clicking the components newslist

    best wishes
    avn.rocky

  8. FayeC Says:
    June 27th, 2008 at 8:17 pm

    Oi Carlos,

    Tambem gostaria de ver como expandir o codigo pra incluir a descricao, data, etc para cada item.
    Otimo tutorial.

    FayeC

  9. PetersV Says:
    August 15th, 2008 at 12:53 am

    Does anyone know how what script to use to modify an existing MP3 code, so that the file path of the MP3 being loaded is read from an XML document?

  10. Dave Says:
    January 28th, 2009 at 9:30 pm

    I get the following error when trying to run the above code:

    TypeError: Error #1090: XML parser failure: element is malformed.
    at xml_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()

    Please help!! Im doing an assignment in Flash and really stuck now!

  11. Robert Says:
    March 18th, 2009 at 4:09 pm

    Thanks for the tutorial. I get this error and a white screen upon testing

    1120: Access of undefined property my_lst.

    any ideas?

  12. R.K. Says:
    June 1st, 2009 at 5:12 pm

    to Robert:
    my_lst is a component instance name

  13. Fighterlegend Says:
    August 8th, 2009 at 10:54 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?

Let leave a Comments for this post.