Flash tag clouds

//

WP-Cumulus tag cloud plugin

WP-Cumulus is now open source. Although based on an older version of the movie, the information on this page is still mostly correct. But why not get the actual source movie to play around with? See http://wordpress.org/extend/plugins/wp-cumulus/ for more info. You can get the development version which includes the sources from the download page.

I’ve been getting a lot of questions about my WP-Cumulus WordPress plugin. Many people have asked my whether they can use the Flash movie in their own projects, and how to go about it. Well, here’s how.

When you download the plugin you’ll find it consists of three files. The first, wp-cumulus.php is the actual WordPress plugin. It hooks into WordPress, adds the options panel to the backend, and replaces the [WP-CUMULUS ] tag with the Flash movie. You’ll also find SWFObject, which is used to embed the Flash movie into your page (future version might not use this, as it appears to cause problems for some people).

If you’re looking to repurpose the Flash movie, all you’ll need is the ‘tagcloud.swf’ file. Here’s what you’ll need to know in order to use it.

  1. The movie requires Flash Player 7 or better.
  2. It contains only Latin characters, I’ve posted some other unicode ranges on the plugin’s release page.
  3. The movie is set to fill the available Stage size but keep it’s aspect ratio (Flash’s default scaling behavior). It is square, so if you embed it at 800*500 the sphere will be exactly the same size as when you embed at 500*800. With 150px of empty space on two sides.
  4. Landscape aspect ratios work best because text is oriented horizontally.

Flashvars

The movie gets the tags information through ‘flashvars’. See here for more info on flashvars. SWFObject implements flashvars a little differently (see here). The actionscript code inside the movie looks for the flashvars in the root timeline, so if you’re planning on loading the movie inside another Flash movie, just pass the vars to that movie.

The flashvar used to pass the tags info is called “tagcloud”, and contains XML data describing the tags. If it is not passed the movie will look for a file called “tagcloud.xml” in the current path and parse that instead. This was used for testing, but might also prove useful if you’re using the movie outside WordPress.

The XML layout used is:
<tags>
  <a href="http://www.roytanck.com/tag1" style="font-size:9pt;" >Tag name<a>
  <a href="http://www.roytanck.com/tag2" style="font-size:12pt;" >Tag two<a>
  ...
</tags>

The other attributes used in WordPress’ default tag cloud output are not used. The style attribute is searched for numbers using a very crude mechanism. You can simply use

style="12.4"

In order to set the font size to 12.4.

To prevent problems with character encoding, the WordPress plugin passes the tags urlencoded, but your project might not need this. It should work either way.

The text color is also passed as a flashvar called “tcolor” and should be a string in the ‘0xff0000′ format (the example would set the text color to red).

Example

The following will render a tag cloud with two red tags and a transparent background at 600 by 400 pixels. As always with SWFObject, it will replace a div (here called ‘flashcontent’) in your page. This is the Javascript part only.

<script type="text/javascript">
var so = new SWFObject("tagcloud.swf", "tagcloud", "600", "400", "7", "#336699");
so.addParam("wmode", "transparent");
so.addParam("mode", "tags");
so.addParam("distr", "true");
so.addVariable("tcolor", "0xff0000");
so.addVariable("tagcloud", "<tags><a href='http://www.roytanck.com/tag1' style='9'>Tag name</a><a href='http://www.roytanck.com/tag2' style='12'>Tag two</a></tags>");
so.write("flashcontent");
</script>

Download (updated!) example files here (37kB).

That’s all there is to it. Of course, this movie was created to fit the needs of the WP-Cumulus plugin. Chances are the way scaling is handled (for instance) does not fit your needs. If this is the case, you can contact me about whipping up a custom version. In case you were wondering, I’m not planning to release the source file for the Flash movie. Sorry about that. It’s really quite complex, and I’m already getting tons of support requests for this plugin.

st_go({blog:’4106032′,v:’ext’,post:’234′}); var load_cmc = function(){linktracker_init(4106032,234,2);}; if ( typeof addLoadEvent != ‘undefined’ ) addLoadEvent(load_cmc); else load_cmc(); _uacct = « UA-60838-3 »; urchinTracker();

How to repurpose my tag cloud Flash movie | Roy Tanck’s weblog

Blogged with the Flock Browser

1 commentaire

  1. This is a cool plugin. I would definitely use it but won’t it be a pain for web visitors who have slower computers? I don’t want to make them load something their computers can’t handle.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :