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.
- The movie requires Flash Player 9 or better.
- It contains only Latin characters. This short tutorial guides you though the process of adding support for your language.
- 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.
- Landscape aspect ratios work best because text is oriented horizontally.
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:
<a href="http://www.roytanck.com/tag1" style="font-size:9pt;" >Tag name<a>
<a href="http://www.roytanck.com/tag2" target="_blank" style="font-size:12pt;" >Tag two<a>
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
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.
Here’s a list of currently available flashvars:
|mode||String: tags|cats|both||Tells the movie to expect and display tags, categories or both.|
|distr||String: true|false||If set to true, the tags are distributed evenly over the sphere’s surface.|
|tcolor||Hex color value: 0xff0000 for red.||The default tag color|
|tcolor2||Hex color value||Second tag color. If supplied, tags will get a color from a gradient between both colors based on their popularity.|
|hicolor||Hex color value||Tag mouseover/hover color|
|tspeed||Number: percentage||Determines the speed of the sphere’s rotation. The default is 100, higher numbers increase the speed.|
|tagcloud||XML string (urlencoding optional)||The tag cloud, XML format described above.|
|xmlpath||Path to load the XML from||URL, defaults to ‘tagcloud.xml’|
As of version 1.18 you can override the global tag color settings by adding two optional arguments to the tag cloud XML. The ‘color’ and ‘hicolor’ attributes let you control the tags default and hover colors.
<a href="http://www.roytanck.com/tag1" style="font-size:9pt;" color="0xff0000" hicolor="0xffcc00" >Tag name<a>
var so = new SWFObject("tagcloud.swf", "tagcloud", "600", "400", "7", "#336699");
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>");
Download (updated!) example files here (38kB).
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, feel free to contact me about possibly whipping up a custom version.