1. Code
  2. XML

Build an OOP Tag Cloud in ActionScript 3.0

Read Time:9 minsLanguages:

In this tutorial I'll show you how to build a flexible, animatable tagcloud using an Object Oriented Programming approach. I don't believe in a right or wrong method, but rather several degrees of efficiency. If you have any constructive criticism on my code feel free to comment.

That said, lets start!

Step 1: How to Think Cloud

This step is the most important one as it will dictate all the following steps. I start by looking at what I want to achieve and then break it into pieces, here's my line of thought:

I want to be able to add multiple tag clouds in a page. I want it to be simple and customizable. So what do I need to build this tag cloud?

I need a word array, a color, a font, minimum and maximum size definitions, oh and I need tag cloud elements to store that information, these elements should be textField based. Since I want several clouds the obvious choice is to create an instanceable tagCloud class that in this case will extend a Sprite.

Here's what my main function should look like:

As you can tell there are plenty of parameters which need to be defined, the following will walk you trough the process. Create the following files:

  • MainTagCloud.fla - this file will instantiate the tagcloud
  • - this is the class that will create the tagcloud
  • - this is the element that will populate the tagcloud

Step 2: Building the Mother Class

Open and write this code

import these libraries:

define these variables:

You'll end up with something like this:

Step 3: Construct Your Main Function

Here's the main function that will build our cloud.

Step 4: Adding a Word Counter

Let's see how many words we're dealing with.

Step 5: Set the Element Size

I set the element size by using a formula found on wikipedia:

Step 6: Creating a Single Word List

This calls a filter for the array.

Now set the filter rules.

Step 7: How to HitTest

We're going to need to test for overlapping positions.

Step 8: Setting up an Element Getter

This is just a getter of an element by name, in case I need one over the main timeline.

Step 9: Inside the Element Class

Step 10: Implementation

Now, all that's left to be done is to implement this class in a real .fla file with all the stuff that you are accustumed to (ie:timeline) :P

You'll need to create a font so you can display the textFields, I embeded an Arial font.

Then in the first frame of your .fla import the TagCloud class, set a stage.align to the top left (so that we can find the stage middle position without much work) and create a new instance of the font we just added to the library:

Step 11: Build an RSS Feed Request

Now we need to grab a feed from somewhere so we can cloud it. I chose the CNN news feed. To be able to load an XML you need 4 objects including a urlRequest that will be used as a path to the feed.

Step 12: The Initialization Method

Now inside our main function I need to add the complete event handler to the request so that it can be called upon a successful load.

Step 13: The Data Structure

The data structure is stored inside the so we create the XML here by doing:

Step 14: Building the Word List

Instanciate the titleWords in every iteration so that you have a clean array everytime we have a new title.

Step 15: Starting the Tag Cloud

Now we have all the elements we need to make this tag cloud.

Step 16: The Final Code

Here's the complete code for you to read fully.


I could have used linked lists and while loops to make this a bit faster, but you'll find it reasonably quick. One final note: be sure to set the random size big enough or you'll get a stackOverFlow error when the cloudElement can't find a place to be put.

I hope you liked this tutorial, thanks for reading!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.