sign up!

Are you interested in learning, then sign up to be notified about new tutorials.

Email:


helpful links


master flash

Are you looking to learn flash? If so you need to check out Flash, the Information you need. You will find all of these tutorials, source files and more...

Get your copy today!

Flash, This Information you need

a few friends


follow Us On

FrenchSquared on Linked in

FrenchSquared on Twitter

Frenchsquared on Facebook



Flash Tutorial, Parsing XML

To truly use the power of ActionScript you need a way to pass information to and from the swf. This is where XML comes in. Flash is very capable of reading XML with the use of ActionScript. As a practical implementation, this flash tutorial will teach you how to create a simple RSS Reader by loading, parsing and displaying data found within an external XML feed. An RSS feed is simply a standard way of laying out xml. I will refer to both RSS and XML for SEO reasons. For this flash tutorial you can treat these as the same thing

Flash: Reading XML

The first thing needed is an RSS feed, for this flash tutorial I am going to use an XML feed of coupons created by Deal of Day. You can view this RSS feed at dealofday.com/feed. There is nothing special about this XML feed and you are free to use any XML feed of your liking.

When working with a public XML feed you need to be certain you have rights to re-publish the RSS feed. If you notice your RSS reader stops working when you move the swf to a server but your RSS reader works great from your local machine, it is because the XML feed is private. There are ways to protect an RSS feed from being re-broadcasted from a server. I recommend you test with the RSS feed above and on your local computer. Once you have everything working, use your own XML feed and the php file found in the source code. The php file will allow you to re-broadcast almost any RSS feed.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Start by creating a new loader, this loader will hold your XML data

// create loader and XML variables

var xmlLoader:URLLoader = new URLLoader();

var xmlData:XML = new XML();

Feel free to copy and paste the code into the your actions layer.

//event loader to start loading the XML

xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

xmlLoader.load(new URLRequest("http://dealofday.com/feed"));

Please, remember that most RSS feeds will not work when called from a server. The actionscript found above will only work from your desktop. Once you have everything working you can change the url to a php file that will allow you to access and display the XML feed on your server.

function LoadXML(e:Event):void {

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

}

The actionscript above creates a function that actually loads the XML into a variable that you can work with. The function below then parses the XML out into a usable format. Any action you want to do to the XML data needs to be done inside the parseData function.

function parseData(xmlData:XML):void {

}

You need to add a trace to the parseData function to see if the XML data has actually been load. The output from this trace will also help you decide what information you may or may not want to use from the XML feed. Add the trace statement scene below, to the parseData function you created in the step above.

ITT

function parseData(xmlData:XML):void {

trace(xmlData);

}

Press Control-Enter to see your flash tutorial load the XML and display it in the flash output window. This may seem like alot of unusable information, but that is definatly not the case. All that text flooding your flash output window shows that your flash file is reading the XML.

The next thing we need to do is to break down the information recieved from the XML into some usable blocks. This is something that has been greatly improved of actionscript 2.0. You no longer need to deal with firstChild.nodeValue. With actionscript 3.0 you can directly target the XML element by simply calling its name.

function parseData(xmlData:XML):void {

//trace(xmlData);
trace (xmlData.channel.item.title);

}

If you press Control-Enter this time you should see your flash output screen only fill with the title from each item in the XML feed. If you are using your own RSS feed you will need to look at the orginal output and figure out how your RSS feed is structured. RSS feeds are pretty standard but there may be a tag that differers from the ones in Deal of Day.

You probably dont want every title found in the XML feed to be displayed. You can target specific titles by treating your XML like an array.

function parseData(xmlData:XML):void {

//trace(xmlData);
trace (xmlData.channel.item.title[0]);

}

Adding the sub zero will return the first title in the RSS feed.

We need to get this information out of the flash output window and onto the stage of the swf. There are several ways of doing this, you could create a dynamic text field, name it, then assign it the value of a specific XML element.

function parseData(xmlData:XML):void {

//trace(xmlData);
title_txt.htmlText = (xmlData.channel.item.title[0]);
title1_txt.htmlText = (xmlData.channel.item.title[1]);
title2_txt.htmlText = (xmlData.channel.item.title[2]);

}

The above way does make it rather simple to control the placement and style of your XML elements, but it would get rather messy, pretty fast. I would rather do everything with actionscript inside a loop.

for (var i:int = 0; i < 3; i++){

}

Create the loop

for (var i:int = 0; i < 3; i++){

var rss:TextField = new TextField();

}

creat a new textfield using only actionscipt

for (var i:int = 0; i < 3; i++){

var rss:TextField = new TextField();
rss.multiline = true
rss.wordWrap = true

}

We need to add a few lines of actionscript to tell the textfeild how to treat or XML elements. Wordwrap will allow the text to scroll down to the next line, rather then run off in one continous line. Multiline will allow the text field to grow to a height of more then one line, thus allowing room for the wordwrap.

for (var i:int = 0; i < 3; i++){

var rss:TextField = new TextField();
rss.multiline = true
rss.wordWrap = true
rss.name="rss"+i
rss.y = 100 * i
rss.x = 20
rss.width = 450;
addChildAt(rss, i)

}

Next we name add the value of i to each textfield created by the loop, this names each textfiled differently, such as rss1, rss2 and so on. We need to make sure each textField isnt placed directly on top of each other. This is done by dynamically changing the position of textfield. rss.y = 100 *1 moves each textfield down 100px with interation of the loop. We leave the x position the same for each textfield, thus placing each textfield in a straight line. Next the width is set, and finally the textfield is added to the stage. The only thing left is to get our RSS data into the newly created textfields.

for (var i:int = 0; i < 3; i++){

var rss:TextField = new TextField();
rss.multiline = true
rss.wordWrap = true
rss.name="rss"+i
rss.y = 100 * i
rss.x = 20
rss.width = 450;
addChildAt(rss, i)
rss.htmlText = ('

'+xmlData.channel.item.title[i]+'
'+xmlData.channel.item.description[i]+''+xmlData.channel.item.pubDate[i]+'

');

}

This last line looks rather complex, but that is simply because it contains standard HTML to help with the styling of or XML data. rss.htmlText = (''); is looking for a value inside the quotes. Static text such as a p tag or an href need to be placed inside quotes. While a variable such as xmlData.channel.item.link need to be outside the quotes. In actionscript you can keep a string intact and change between variables and static text by stopping the quotes ' and adding a + before the variable, resulting in ('text'+variable+'text'). We changed the [0] to [i] so that for each interation of the loop and new element is called.

That is all there is to working with XML and actionscript. You have created an actionscript based RSS reader. And added html to your textfield to style your RSS feeds. If you want to add more styling look for the next tutorial on adding css styling to your htmltext field. Yes you can add css wtih actionscript. The source files for this tutorial all ready have the css styling created and applied to them.

Remeber you need to run your RSS feed though a php script, before flash can use it on a server. In the source files I have included the needed php script and a read me explaining what to change.

Download Flash Tutorials