RSS Widget – AS3

NOTE: I’ve found an alternative to loading multiple RSS feeds. Check it out here.

This short tutorial demonstrates how to create a simple RSS reader in actionscript. This actionscript code loads multiple RSS feeds (XML files) into Flash, parses the data and displays all the content in a widget. The files are totally customizable. Here is a link to another post if you just want to know how to load multiple XML files into Flash using actionscript.

Download the source files here.

Because you cannot load files from one domain to another domain, I use a file called proxy.php to make it look like the request is coming from the same domain.

You can do a lot of cool stuff with the PHP Curl library. I’ve also use Curl to scrap MLS listings for a real estate client to manage their properties. Check out the real estate demo site here.

You also have to add the crossdomain.xml file to the root of your server. Here’s a link that explains security in Flash.

Here is the XML file that has all the links to my RSS feeds.

<?xml version="1.0" encoding="utf-8"?>
<m21m:rsswidget xmlns:m21m='http://www.m21m.com/schema/m21m'>
 <m21m:rssfeeds>
  <m21m:feed image="images/blogger.gif" feed="http://www.m21m.com/rss.xml" />
  <m21m:feed image="images/twitter.gif"
       feed="http://twitter.com/statuses/user_timeline/14305992.rss"/>
 </m21m:rssfeeds>
</m21m:rsswidget>

I will load this file to get all the feed attributes. You can add whatever RSS links and images you want just add another feed node with a feed attribute to your new RSS feed. I tried to add my Facebook RSS feed but gave up after to many problems with their security. If you can figure out how to make it work please post your solution in the comments.

You can read my other blog post to see how I load all the XML files into arrays.

Here is my actionscript code.

//import the Scroll class
import com.m21m.util.Scroll;
//add scrolling to the main_mc
var sb:Scroll = new Scroll(main_mc);
//total feeds to show per rss
var TOTALPERFEED = 6;
//be sure to change this.
var PROXY = "http://yoursite.com/proxy.php?url=";
//array to hold all the rss links from rss-widget.xml
var xmlManifest:Array = new Array();
 
//array to hold each XML file
var xmlDocs:Array = new Array();
 
//the XML file to be loaded.
var rssWidgetRequest:URLRequest = new URLRequest("xml/rss-widget.xml");
var urlLoader:URLLoader = new URLLoader();
 
//all my XML files
var docsXML:XML = new XML();
docsXML.ignoreWhitespace = true;
//load rss-widget.xml and when COMPLETE run function loadDocs
urlLoader.addEventListener(Event.COMPLETE,loadDocs);
urlLoader.load(rssWidgetRequest);
 
//images from the image attribute in m21m:feed image="images/twitter.gif"
var images:Array = new Array();
 
//load the docs
function loadDocs(event:Event):void {
 docsXML = XML(event.target.data);
 //m21m is the name space defined in my doc m21m:feed...
 var m21m:Namespace=docsXML.namespace("m21m");
 //get all the feed nodes
 var feeds=docsXML..m21m::feed;
 for (var i:int=0; i < feeds.length(); ++i) {
  //add images from the image attribute and add it to the images array
  images[images.length] = feeds[i].attribute("image");
  //add the feed to the xmlManifest array
  xmlManifest[xmlManifest.length] = feeds[i].attribute("feed");
 }
 //load the xml for each doc
 loadXMLDocs();
}
 
//load all the XML files
function loadXMLDocs() {
 if (xmlManifest.length>xmlDocs.length) {
 
  var rssURL:URLRequest = new URLRequest(PROXY+xmlManifest[xmlDocs.length]);
  var urlLoader:URLLoader = new URLLoader();
  var xmlDoc:XML = new XML();
  xmlDoc.ignoreWhitespace = true;
  urlLoader.addEventListener(Event.COMPLETE,getDoc);
  urlLoader.load(rssURL);
  function getDoc(event:Event) {
   xmlDoc = XML(event.target.data);
   //hold all the xml of each doc in an array
   xmlDocs[xmlDocs.length] = xmlDoc;
   loadXMLDocs();
  }
 } else {
  //create the feeds on the screen
  createFeeds();
 }
}
 
function createFeeds():void {
 for (var t:int=0; t < xmlDocs.length; t++) {
  //get the XML for the files
  docsXML = XML(xmlDocs[t]);
  //get all the item nodes from the rss feeds
  var xmlList=docsXML..item;
  var totalLength:int;
  //check to see how many nodes to display per each feed
  if (xmlList.length() < TOTALPERFEED) {
   totalLength = xmlList.length();
  } else {
   totalLength = TOTALPERFEED;
  }
  if (TOTALPERFEED >= 100) {
   totalLength = xmlList.length();
  }
  for (var i:int=0; i < totalLength; i++) {
   //add are feed movieclip from the library
   var feed_mc:Feed = new Feed();
   main_mc.content_mc.addChild(feed_mc);
   var loader =new Loader();
   loader.load(new URLRequest(images[t]));
   feed_mc.loader_mc.addChild(loader);
   feed_mc.feed_txt.htmlText = "<a href='"+xmlList[i].link.text()+"'>"+
           xmlList[i].title.text()+"</a>";
  }
 }
 //order the feeds on the screen
 orderFeeds();
 
 //garbage collection
 destroy();
}
 
 
function orderFeeds() {
 //loop through the movieclips and stack them
 for (var i:int=1; i < main_mc.content_mc.numChildren; i++) {
  main_mc.content_mc.getChildAt(i).y = main_mc.content_mc.getChildAt(i - 1).y +
            main_mc.content_mc.getChildAt(i - 1).height + 1;
 }
}
 
 
//delete all variables
function destroy() {
 xmlManifest = null;
 xmlDocs = null;
 rssWidgetRequest = null;
 urlLoader = null;
 docsXML = null;
 images = null;
}
 
//Custom Right Click Menu
var myMenu:ContextMenu = new ContextMenu();
myMenu.hideBuiltInItems();
//Add You Blog or Links to your site.
var menuItem:ContextMenuItem = new ContextMenuItem("www.m21m.com");
menuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, goToURL);
myMenu.customItems.push(menuItem);
this.contextMenu = myMenu;
function goToURL(e:ContextMenuEvent):void {
 var url:String = "http://www.m21m.com";
 var request:URLRequest = new URLRequest(url);
 navigateToURL(request, '_blank');
}

The Scroll class can be used in any Flash file. You can skin it to look how you want.

Add it to your file like this.

import com.m21m.util.Scroll;
var sb:Scroll = new Scroll(main_mc);

The top part of the actionscript file is covered in my blog post Load Multiple XML Files – AS3, so I’ll start with the createFeeds() function. TOTALPERFEED is set at the top of the file and will set how many items to display per RSS feed. If you set TOTALPERFEED to 100 it will load all the RSS items that are in your RSS feed (more than 100 if there are more).

If you look in the library, feed_mc is the Feed movieclip in the library. You can skin it to look however you want. If you do let me know so I can see how it looks. If I had a ton of time I would make this look better, but just wanted to post this for learning purposes.

The orderFeeds() function stacks the feeds on top of each other.

The destroy() function deletes the XML and other variables. You probably don’t have to do this, the Flash player eventually will do it’s own garbage collection. Read more on garbage collection here.

I added a link to the Context Menu (right click over the Flash movie). You can add however many you want. I figured someone might want that little piece of code too.

If anyone has a better way to do anything let me know in the comments.

March 13th, 2009 | Categories: Actionscript, Development |

Leave a Comment


Make sure you enter the *required information where indicated.








Hey Brian,

There’s no actual schema hosted on my site. You can create one and host it on your site, but the file doesn’t exist here. You should be able to add an attribute and have it read in the code to limit the feeds per XML/RSS file.

Have you seen this post? http://www.m21m.com/actionscript/super-easy-way-to-load-multiple-rss-feeds-into-flash you can limit the feed in yahoo pipes instead of code. I’m not sure if that would work for you.

Comment by admin — November 22, 2010 @ 9:31 am

Hi Steve,

I really like what you’ve done here with the RSS reader. I am working with it to make some modifications for a project I am working on. I am trying to set it up so you can specify the number of items you pull per feed in the rsswidget xml file as an attribute of each feed. I’m running into a bump because the changes are conflicting with the schema you have set up for the xml file. Is there any way you could post the xml schema for me to look at?

Thanks,

Comment by Brian Rivet — November 20, 2010 @ 1:47 pm