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:

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!

First, we need to set up the XML file.  In the text editor of your choice, you can begin setting it up by entering the following code:

<?xml version="1.0" encoding="utf-8"?>
<site>
   <theItem></theItem>
</site>

In the code above, we simply set up the main tag, named site, and put another tag named theItem inside of it. (I’m not going to get into explaining best practices for setting up XML files here. That’s a topic for another post.)  Inside the theItem tag, we can put our text. I’ll start by putting one sentence, contained inside of a <p> tag, with <b>, <i>, and <a> HTML tags.

<theItem><p>This is an example of XML text with <b>bold</b> and <i>italic</i> words, as well as <a href="#">hyperlinks</a>.</p></theItem>

Save your XML file as “text.xml”.

Now that we have the XML built, let’s move over to Adobe Flash and import the XML.  With Adobe Flash open, create a new ActionScript 3.0 file, and make a new dynamic text field and name it “text_txt”.  Set the color, font, and size to your own liking.  Then, create a new layer, named Actions, and lock it.  (I always name my ActionScript layer “Actions”, lock it, and put it as the top layer.  It’s a good practice to get into if you don’t already.)  Save your Flash file in the same directory location as the XML file.

Now, in your Actions panel, type the following code:

var theXML:XML;
var xmlData:Array = new Array();
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, processXML);
loader.load(new URLRequest("test.xml"));

function processXML(e:Event){
   theXML = new XML(e.target.data);
   var xmlLength:Number = theXML.theItem.length();
   for (var i=0; i<xmlLength; i++){
      xmlData[i] = theXML.theItem[i];
   }
   text_txt.text = xmlData[0];
   text_txt.multiline = true;
   text_txt.wordWrap = true;
   text_txt.height = text_txt.textHeight + 6;
}

Here’s a quick rundown of what this code does:
- Define a new XML object named theXML
- Create a new Array named xmlData
- Create a new URLLoader named loader.  This loader then gets an event listener that will fire the function processXML when loading is complete.  To load the XML file, we load a new URLRequest to the path of our XML file (which should be in the same directory as your Flash file.)
- The processXML function then creates our XML object, filling it with the data from the loader.
- Create a number variable containing the length of the XML. This is essential for what’s coming next.
- Run a for loop starting at 0 and going through the length of the XML object.  This loop populates our Array, xmlData, with each theItem tag from the XML.
- Fill the text field with the text from the first spot in the array (our only tag in this example).
- Set multiline and wordWrap to true so the text won’t be limited to one line.
- Set the text field height so it includes all of the text, plus a few extra pixels of buffer at the bottom.

Save your Flash file and test your movie.  You’ll see something very similar to the image below, which isn’t very appealing yet.

Close the test movie and return to your Actions panel.

In the Actions panel, we’re going to change the line of code that sets the text in our text field to the array data.  Instead of using text_txt.text, we’re going to use text_txt.htmlText = xmlData[0];

Save your Flash file and re-test your movie.  You’ll notice the results are much nicer, but the lines break up each time there is an HTML tag, as in the image below.  The good news is that the bold and italic tags display the text correctly, and the hyperlink does work.  But there’s really no way to tell the user that the hyperlink is actually a hyperlink.

Close the test movie and return to your Actions panel once again.

To style our HTML text, we’re going to need to create a style sheet object and attach it to our text field.  To do this, we can use the following code, placed above our processXML function:

var textStyles:StyleSheet = new StyleSheet();
textStyles.setStyle("a:link", {color:'#01628b', textDecoration:'underline'});
textStyles.setStyle("a:hover", {color:'#d68402', textDecoration:'underline'});
text_txt.styleSheet = textStyles;

Here, we create a new StyleSheet object, and set styles for <a> tags, based on the correct syntax that Flash uses.  In this example, we assigned a color and underline to our link, and to its hover state.  (For more info on StyleSheets, consult the Flash documentation on StyleSheets.

Lastly, we set the styleSheet attribute on our text field to our StyleSheet object.

Save your Flash file and re-test your movie again.  Our lines are still broke, but our hyperlink now looks like a hyperlink.  We’re getting closer.

Close the test movie, and return to your XML file.

Here, we will get to the key to successfully displaying the HTML content correctly, and on one line:  The CDATA tag.

In order to display HTML content and special characters successfully, we need to put a CDATA tag into our theItem tag.  The syntax of the CDATA tag starts with <![CDATA[ and ends with ]]>.  It wraps around the outside of the theItem content, like this:

<theItem><![CDATA[<p>This is an example of XML text with <b>bold</b> and <i>italic</i> words, as well as <a href="#">hyperlinks</a>.</p>]]></theItem>

Save the XML file, and return to Flash.  Once in Flash, re-rest your movie.  You’ll notice that the text now flows correctly, and is styled according to our HTML tags and style sheet data!

Ah, sweet success!  We did it!  But the fun doesn’t stop there.  Inside of the CDATA tag, we not only have the ability to successfully show HTML tags, but also special characters.  Let’s put some special characters into our XML tag and see what happens.

To use special characters, we will need to know the respective HTML Entity Number, which can be found at the W3 Schools website here: HTML Entity Number Reference.

Now that we have a reference for finding special character entity numbers, we’ll put in another sentence containing a handful of them to see how they look.  In your XML file, add another sentence to the theItem tag, like the one I’ve included below:

<![CDATA[<p>This is an example of XML text with <b>bold</b> and <i>italic</i> words, as well as <a href="#">hyperlinks</a>. It also contains special characters, like &#198;, &amp;, &#169;, &#174;, and &#187;.</p>]]>

Save the XML file, return to Flash, and re-test your movie.  Notice that the special characters show up correctly, and in line with everything else without those annoying line breaks!

Now, I will say this:  CDATA tags aren’t needed to merely display HTML tags and special characters within Flash. Flash has done a good job with the htmlText attribute, but we still need to set up the XML file with CDATA tags to make the content flow properly without the line breaks.

Here’s a look at our final code for this test:

<!-- Begin XML -->
<?xml version="1.0" encoding="utf-8"?>
<site>
   <theItem>
      <![CDATA[<p>This is an example of XML text with <b>bold</b> and <i>italic</i> words, as well as <a href="#">hyperlinks</a>. It also contains special characters, like &#198;, &amp;, &#169;, &#174;, and &#187;.</p>]]>
   </theItem>
</site>
<!-- End XML -->

/* Begin ActionScript */
var theXML:XML;
var xmlData:Array = new Array();
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, processXML);
loader.load(new URLRequest("test.xml"));

var textStyles:StyleSheet = new StyleSheet();
textStyles.setStyle("a:link", {color:'#01628b', textDecoration:'underline'});
textStyles.setStyle("a:hover", {color:'#d68402', textDecoration:'underline'});
text_txt.styleSheet = textStyles;

function processXML(e:Event){
   theXML = new XML(e.target.data);
   var xmlLength:Number = theXML.theItem.length();
   for (var i=0; i<xmlLength; i++){
      xmlData[i] = theXML.theItem[i];
   }
   text_txt.htmlText = xmlData[0];
   text_txt.multiline = true;
   text_txt.wordWrap = true;
   text_txt.height = text_txt.textHeight + 6;
}
/* End ActionScript */

If you want the source files, you can download them here.  Download Source Files »

I hope that this sheds some light on the topic of getting HTML text to correctly display and flow inside of your Flash application.  Until next time, happy coding!