Streaming RSS Feeds into Your Flash Application
Posted by Anthony in Flash, Tutorials, XML tagged actionscript 3, arrays, Flash, rss, XML
One of the great things about RSS feeds is that RSS formats are specified using XML. Because of this, you can parse the RSS feed in your Flash applications just as you would an XML file. So if, for instance, you have a Flash-based website that you would like to add a “Recent Blog Posts” section to, you can just import the RSS into Flash and *BAM*, you’re all set. Here’s a quick rundown of how to do it:
Step 1: Locate the RSS Feed
If you’re the owner of a blog that you want to get the RSS feed to, all you should need to do is go to the blog’s home page, and add “/feed/” to the end of the URL. (For example: http://www.hesslerdesign.com/blog/feed/) This is an XML-based page that gives you a list of the blog’s posts, titles, contents/extracts, etc.
If you need an RSS feed through a service like FeedBurner, you first need to go to the FeedBurner page of the site you want an RSS feed from. (For example: http://feeds.feedburner.com/hesslerdesign) This page is NOT the one you need to link to, however. At this page you’ll notice a link to “View Feed XML” in the Subscribe Now! box. Click on that link, and you’ll be presented with a page exactly like that of the “/feed/” URL mentioned in the previous paragraph.
Once you get to the XML-based page, copy the URL, because you’ll need it in Flash. (If you want to confirm that the page is the correct one, view the page’s source. It will be set up as an XML file, with a line like <?xml version="1.0" encoding="UTF-8"?> at the very top.)
Step 2: Importing the RSS Feed into Flash
To import the feed into Flash, just follow the normal steps you would to import an XML file. Create an XML object and a URLLoader object, then load your RSS feed URL using the URLLoader. Since I’m the type of developer who likes to code as dynamically and flexibly as possible, I like to also set up an empty array for each of the items I want to hold from the RSS feed, such as titles and permalinks. Then, when I parse the XML, I assign a slot in the appropriate array for each title and accompanying permalink, and then have them to use when I display the Recent Posts section. Here’s how to do this:
/* Begin ActionScript 3.0 Code */
var rssXML:XML;
var rssLoader:URLLoader;
var rssTitles_arr:Array = new Array();
var rssLinks_arr:Array = new Array();
function importFeed():void {
rssLoader = new URLLoader();
rssLoader.addEventListener(Event.COMPLETE, loadRSS);
rssLoader.load(new URLRequest("http://www.hesslerdesign.com/blog/feed/"));
}
function loadRSS(e:Event):void {
rssXML = new XML(e.target.data);
trace(rssXML);
for (var i=0; i<4; i++) {
rssTitles_arr[i] = rssXML.channel.item[i].title;
rssLinks_arr[i] = rssXML.channel.item[i].link;
}
// Garbage Collection
rssLoader.removeEventListener(Event.COMPLETE, loadRSS);
}
importFeed();
/* End ActionScript 3.0 Code */An important note:
To dig down into the XML and get things like Post titles and permalinks, you need to be familiar with the structure of the RSS file. You can see from the code above that the title for each post is inside an item tag, which sits inside of the channel tag. If you want to get more info than just these two items, just go to the RSS URL (see Step 1) and view the page source. Or, you can do as I’ve done in the code above and trace out the XML in Flash once the XML loads. This is a helpful first step to see what the structure of the XML file is before you get into parsing the XML into appropriate arrays.
Another quick thing to note is in the for loop, inside of the loadRSS() function. I used the number 4 as a benchmark to populate my arrays (seen in the snippet i<4). You can use a different number if you want. It’s a matter of (a) the number of posts available in the RSS feed, and (b) personal preference.
Once you incorporate the code above, you can then use the arrays populated with RSS info and populate text fields, buttons, etc. Since it’s stored in an array, the possibilities are virtually limitless.
So there you have it. The flexibility of RSS feeds makes it just that easy to import into Flash. Until next time, happy coding!
Facebook
LinkedIn
Twitter
This is cool but I can’t see the info in the flash when I test it, I can see it in the output box only.
If you followed the code I put in the example, then yes, you’ll only see it in the output box, because I set a trace() statement to trace out the XML. The titles and links are stored in their respective arrays, “rssTitles_arr” and “rssLinks_arr” in this example. So once those are set (after the ‘for’ loop runs in the loadRSS function), you will have all of the titles and links available to you at your disposal, which you can then use to populate text fields on your stage.
Hope it helps!