MERGE 2 ONE MEDIA

Saturday, November 22, 2008

RSS Widget - AS3

Here is a simple RSS widget/droplet whatever you want to call it. It loads RSS feeds into Flash.

Download the source files here.

The proxy file is written in PHP using curl.

You can't cross load files from one server to another so the proxy.php file make it look like the request is coming from your own server.

Curl is an awesome PHP library that can do a lot more than this. I also use it to scrap MLS listings for real estate clients to manage their properties. Check out a demo here.

You also have to add the crossdomain.xml file to the root of your server. Here's a link to 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 or add to the code or whatever.

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 this blog post 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 adding 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.

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

Labels: , , , ,

1 Comments:

Anonymous Anonymous said...

This is just what I was looking for. THANKS !!!!

November 26, 2008 at 8:15 PM  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home