Mar
27
2010

 

This is a basic example of loading and processing RSS2 Feed in Flash. It assumes familiarity with the Flash authoring environment and basic programming, in particular, XML processing and text field. For an introduction to using XML in Flash, you are encouraged to read this post:
http://permadi.com/blog/2010/03/flash-as3-basic-xml-reading-and-parsing-example-part-1/

For our example, let’s use RSS2 standard since that is the newest. Let’s use the RSS feed from my website as an example. The address for my website feed is http://permadi.com/blog/feed/rss2/

[c]
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>permadi.com - Blog</title>
	<atom:link href="http://permadi.com/blog/feed/" rel="self" type="application/rss+xml" />
	<link>http://permadi.com/blog</link>
	<description>development, web, and computer programming stuff</description>
	<lastBuildDate>Wed, 24 Mar 2010 04:20:47 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
		<item>
			<title>Android SDK: Using Custom View In XML Based Layout (Download Example Project)</title>
			<link>http://permadi.com/blog/2010/03/android-sdk-using-custom-view-in-xml-based-layout-download-example-project/</link>
			<comments>http://permadi.com/blog/2010/03/android-sdk-using-custom-view-in-xml-based-layout-download-example-project/#comments</comments>
			<pubDate>Wed, 24 Mar 2010 04:18:37 +0000</pubDate>
			<dc:creator>permadi</dc:creator>
			<category><![CDATA[Google Android]]></category>
			<category><![CDATA[Java]]></category>
			<category><![CDATA[Programming]]></category>
			<category><![CDATA[Technology]]></category>
			<category><![CDATA[tutorial]]></category>
	
			<guid isPermaLink="false">http://permadi.com/blog/?p=2204</guid>
			<description><![CDATA[Download: http://www.permadi.com/blog/wp-content/uploads/CustomViewClassWithXML.zip [...]]]></description>
			<wfw:commentRss>http://permadi.com/blog/2010/03/android-sdk-using-custom-view-in-xml-based-layout-download-example-project/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		</item>

		<item>
			<title>Android SDK: Using Custom View In XML Based Layout</title>
			<link>http://permadi.com/blog/2010/03/android-sdk-using-custom-view-in-xml-based-layout/</link>
			<comments>http://permadi.com/blog/2010/03/android-sdk-using-custom-view-in-xml-based-layout/#comments</comments>
			<pubDate>Tue, 23 Mar 2010 07:42:29 +0000</pubDate>
			<dc:creator>permadi</dc:creator>
			<category><![CDATA[General]]></category>
			<category><![CDATA[Google Android]]></category>
			<category><![CDATA[Java]]></category>
			<category><![CDATA[Programming]]></category>
			<category><![CDATA[Technology]]></category>
			<category><![CDATA[tutorial]]></category>
	
			<guid isPermaLink="false">http://permadi.com/blog/?p=2182</guid>
			<description><![CDATA[This tutorial demonstrates how to use a custom view class [...]]]></description>
			<wfw:commentRss>http://permadi.com/blog/2010/03/android-sdk-using-custom-view-in-xml-based-layout/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		</item>
		</channel>
</rss>

[/c]

You see there are two items node in the feed (the number varies and later we will show you how to get the total count). Each item basically represent an post and within it, there are information such as the title, link, comments and publication date. The description node has a summary of the post.

A simple flash movies, consisting several text fields. The text fields names are printed on each of them so you can easily recreate the FLA.
Each of them is a Dynamic text field.

For example, below is the property of the channelTitle text field.

Using ActionScript 3, parsing the XML is relatively straight-forward. For the first example, we are just going to display the first post (referred as channel.item[0] in the code below). The code then prints the values into the text-fields that we created earlier.

[c]

import flash.events.IOErrorEvent;

var urlLoader:URLLoader=new URLLoader();
urlLoader.load(new URLRequest("http://www.permadi.com/blog/rss2/"));
urlLoader.addEventListener(Event.COMPLETE,onXMLFileLoaded);
urlLoader.addEventListener(IOErrorEvent.IO_ERROR,onIOError);
description.text="LOADING";
stop();

var numbeOfPosts:int=0;
var currentPost:int=0;
var myXML:XML=null;

/**
* Called when the XML data has been loaded.
*/
function onXMLFileLoaded(e:Event):void
{
	myXML=new XML(e.target.data);
	//description.text=String(myXML.toXMLString());
	currentPost=0;
	numbeOfPosts=myXML.channel.item.length();
	displayPost();	
}

/**
* Display currentPost.
*/
function displayPost():void
{
	channelTitle.text=myXML.channel.title;
	title.text=myXML.channel.item[currentPost].title;
	description.text=myXML.channel.item[currentPost].description;
	pubDate.text=myXML.channel.item[currentPost].pubDate;
	
	// Print categories.
	// Need to iterate them and adds a comma as separator
	var categoryList:XMLList=myXML.channel.item[currentPost].category;	
	categories.text="";
	for (var i:int=0; i<categoryList.length();i++)
	{
		categories.text+=categoryList[i].toString();
		if (i<categoryList.length()-1)
			categories.text+=", ";
	}
}

/**
* Helps diagnose problem when the loader failed to load the XML data.
*/
function onIOError(e:IOErrorEvent):void
{
	trace(e.toString());
	description.text=e.toString();
}
			
[/c]

Download the FLA: example.fla

Possible Problems

Problem: The movie runs fine locally but not when put on the server.
Cause: There are such as the server being down temporarily or the URL is mistyped. One of the most difficult cause is when it is a Cross Domain policy issue. The Cross Domain policy prevents Flash from loading the RSS from the RSS server, so if this is the case, then you might be out of luck.

Solutions:However, if you have access to the RSS server, you can add a cross-domain policy file as described in Adobe site. Otherwise, the more direct solution is to use PHP as a bridge between Flash and the RSS server. In the example below, I created a PHP file that reads from the RSS server and prints the RSS. Calling this function from Flash bypasses the Cross Domain restriction.

Let’s say this file is called reader.php:

[c]

<?php
$xmlData=file_get_contents($_GET['url'], FILE_TEXT);
echo ($xmlData);
?>

[/c]

To call this in Flash, replace the URLRequest to call the script, passing the RSS url as the parameter. The script should reside on the same server as the swf.

[c]

// These three lines loads the RSS feed.  The cacheBreaker is a random number to prevent caching by browsers.
var urlLoader:URLLoader=new URLLoader();
urlLoader.load(new URLRequest("http://www.permadi.com/reader.php?url=http://www.permadi.com/blog/rss2/&cacheBreaker="+int(Math.random()*9999999)));
urlLoader.addEventListener(Event.COMPLETE,onXMLFileLoaded);
stop();
[/c]

Continue to: Cycling Posts

Comments are closed.