TagCloud is an automated Folksonomy tool. Essentially, TagCloud searches any number of RSS feeds you specify, extracts keywords from the content and lists them according to prevalence within the RSS feeds. Clicking on the tag's link will display a list of all the article abstracts associated with that keyword.

Previously the only way to get TagCloud feeds to display on your website, etc. was to include a bit of javascript (as an include) in your page. Which meant you have almost no control outside of CSS on how that data was presented. It worked, it just wasn't as flexible as some might like. Now, you're able to get at any particular feed using XML as your data source!

Part of the reason I used Flash to render my XML data was the fact that I couldn't supply a target for the links coming out of the javascript fetch. So if I had access to all the data myself, I could simply add my targets. Then I was told by John Herren about an upcoming XML service from TagCloud that I could play with and test. With that, I built my application, and thought it would be a good thing to let others build theirs if they wanted to. This sample application is very simple, but if you're fairly proficient in Flash, you could build some pretty wild UI.

This tutorial assumes you have a copy of Flash MX 2004 Pro installed. We use the Data Binding Component and also need to publish to Flash 7.

Figure 1 is an example screen shot of what the result of this quick tutorial will allow you to put into your webpage:

So see a live implementation of this application, visit my website (www.ericd.net/new_css/) where you'll see it at the top of my blog section.

Getting Started
I will assume you already know how TagCloud works and how you can place it on your website. If not, please go to TagCloud (www.tagcloud.com/) and read up on it. It's pretty simple.

TagCloud can now supply XML from a URL request. For instance www.TagCloud.com/cloud/xml/ericd/default/22.

If you open that URL in Internet Explorer, you'll see the XML as it is returned to the browser from TagCloud. I previously set that cloud to include the Fullasagoog.com flash feed. The trailing 22 in the URL means to return 22 matching keywords.

If you open the URL in Safari RSS, you'll see a lot of data. View Source on the page to see the XML.

The Returned XML
Here's how the returned XML is formatted (I am not showing you all of the XML here - you should get the idea).

So, you see all the data you need is there to access. Each returned keyword is represented as a <Tag> node. And each has a Name, Scale, and Link. The Scale indicates the prevalence for an individual keyword (more of those keywords equals a larger value). The Link is a URL where you can view the items that were matched using that keyword.

All we need to do now is to create a tiny Flash application that will fetch that information and display it.

Creating the Flash Application
I have included 6 files in this tutorial source code release (see source code link for this article). You can either rifle through those files to learn on your own, or follow along to get things up and running, and explained how the application works.

I'll talk about that proxy file in a bit.

Open the FLA or you can start from scratch by recreating this simple layout:

All you really need to be concerned with is having a textfield set to HTML, multiline. To the right of that is a UIScrollbar component - set to scroll that text field instance. Give the dynamic text field an instance name of "links" for now. All we are going to do is load the XML, parse the data, format the data, and present it as hyperlinks.

We're going to make parsing the XML a lot easier than what you may have become accustomed to with typical looping techniques. Flash 7 comes with a basic implementation of XPath. Xfactorstudio has some great XPath libraries, but for this application I think it would be overkill. If you haven't heard of XFactorStudio's XPath implementations for ActionScript, you should check them out.

Anyway, we need to drop a DataBinding component on the Stage so it can be used. Where can you find it (it's not listed with your normal components)? Look here (the Classes Library):

When you open that Library, you should see something like this:

Drag that DataBindingClasses component to your Stage, then delete it. This places the component in your own FLA's Library - ready for use.

ActionScript
We'll jump right into the ActionScript that gets the data, and then displays it. I'll walk you through it below the code block. Not much code, is there?

import mx.xpath.XPathAPI;

var myCSS = new TextField.StyleSheet();
var cssURL = "http://www.ericd.net/new_css/sections/TagCloud.css";
myCSS.onLoad = function( success ){
   if (success){
    links.styleSheet = myCSS;
   }
};
myCSS.load( cssURL );
var rssfeed_xml = new XML();
rssfeed_xml.ignoreWhite = true;
rssfeed_xml.load
("http://www.ericd.net/new_css/sections/TagCloud_proxy.asp");

var statement:String = "";
var sc:Number;

rssfeed_xml.onLoad = function(success) {
if (success) {
var namePath:String = "/Cloud/Tags/Tag/Name";
name_array = mx.xpath.XPathAPI.selectNodeList(this.firstChild, namePath);

var scale:String = "/Cloud/Tags/Tag/Scale";
scale_array = mx.xpath.XPathAPI.selectNodeList(this.firstChild, scale);

var titlePath:String = "/Cloud/Tags/Tag/Link";
title_array = mx.xpath.XPathAPI.selectNodeList(this.firstChild, titlePath);

links.text = "";
for (var i = 0; i<title_array.length; i++) {

sc = Number(scale_array[i].firstChild.nodeValue);

switch( sc ){

case 1:
  sc = 12;
  break;
case 2:
  sc = 14;
  break;
case 3:
  sc = 15;
  break;
case 4:
  sc = 16;
  break;
case 5:
  sc = 18;
  break;
case 6:
  sc = 19;
  break;
case 7:
  sc = 20;
  break;
case 8:
  sc = 22;
  break;
case 9:
  sc = 24;
  break;
}

// The line below should be continuous... it is on
// multiple lines here in the tutorial for ease of display

statement += "<a href='" + title_array[i].firstChild.nodeValue +
"' target='_blank'>
<font size='" + sc + "'>" + name_array[i].firstChild.nodeValue + "</font> ";
statement += " ";
}
links.htmlText = statement;
} else {
trace("error loading XML");
}
};