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 7 or better.
- It contains only Latin characters, I’ve posted some other unicode ranges on the plugin’s release page.
- 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.
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.
Hi Roy, I tried this, I put the swf file in the same root as the html and the script after a div called flashcontent but it doesn’t work at all. Any suggestion? Thanks
Comment by Stefano — May 22, 2008 @ 11:20 am
Hi Stefano. Did you include swfobject.js in your project and include it in your HTML file? If so, what do you see when you load the page? you can check using your right mouse click to check if the plugin loads or not.
Comment by Roy — May 22, 2008 @ 11:23 am
Yes, I did.
I changed the background color so I’m sure that the swf object is loaded in my page, but tags don’t work. When I add the line so.addVariable(”tagcloud” everything stop working.
Comment by Stefano — May 22, 2008 @ 12:17 pm
Hi same is here, pls suggest wht should we do next!
Comment by san — May 22, 2008 @ 4:48 pm
There was a rather silly error in the XML markup in both examples shown above. I fixed it, and Stefano’s project now works. So please use the XML structure shown above. Sorry about this.
Comment by Roy — May 22, 2008 @ 7:26 pm
[...] 你想要吗?你真的想要吗?好吧,那点我吧! [...]
Pingback by 让你的tag cloud动起来! | thinkboke.com-辛博客 — June 8, 2008 @ 2:43 pm
I’ve set it up on my site.
In so.addVariable(”tagcloud”, “Tag nameTag two“);
use ‘ instead of ” in the anchors.
I’ll be writing a tutorial on how to embed this wonderful … thing into Rapidweaver blogs a little later on.
Mike
Comment by Michael Robinson — June 10, 2008 @ 7:35 am
Versions for other popular CMS’ would be awesome. Let me be the first to suggest Joomla! (at least on this page).
Looks like most of the hard work is already done in the Flash file, so you’d just have to figure out how to make the CMS plugin interface/package/whatnot.
Comment by Jason — June 12, 2008 @ 3:22 am
[...] a dynamic virtual tag. I was planning on using Papervision 3D to do this, but then stumbled across this blog post. The hard work had already been done after a wordpress plugin was [...]
Pingback by Visual Tag Clouds — June 15, 2008 @ 9:55 pm
hello this is a great plugin !!
good work
Is there any way that will work with non latin characters?
I tried with greek UTF-8 and the words do not appear
Thanks Ioannis
Comment by Ioannis — June 23, 2008 @ 11:10 pm
Hi Loannis. I’ve done special languages for other character sets. These are on the plugin’s release page. There currently isn’t a greek one. I’ll see if I can do something about that when I release the next version.
Comment by Roy — June 24, 2008 @ 3:56 pm
Hi Roy
That would be great
if any help needed for testing…
you have my mail
Thanks Ioannis
Comment by Ioannis — June 24, 2008 @ 10:16 pm
Hi Roy, Great version of Tag Cloud… I really like it…. I’m not a WP user so I am using the stand alone version…. I’m a Drupal user and would love to see this work as a Drupal module. In the meantime, you’ve made it possible for me to use it as is….
The enhancement I’d love is the ability to have more color choices to use on certain words to make them stand out.
Again Thanks!
- MaineBOB
Comment by Bob OConnor — July 21, 2008 @ 7:21 pm
Hi Roy,
wow stunning thing, i just included it in our website without WP. I used the example file as a template. It all works now, but i wonder if there is any way to allocate the links evenly around the sphere as seen in the WP-Version !? That is not the case in the example.
Greetings
Michael
Comment by Michael Strauss — August 21, 2008 @ 2:32 pm
Hi Michael. The info above is a little out of date, but if you get the latest version of the flash movie, you should be able to add
widget_so.addVariable(”distr”, “true”);
to your SWFObject code. I haven’t tested this though… and be sure to change the required Flash version to 9 (from 7).
Comment by Roy — August 21, 2008 @ 2:43 pm
Thank you for your fast response. Where do i get the latest version? i can just find the WP cloud…
Comment by Michael Strauss — August 21, 2008 @ 3:39 pm
It’s included in the WordPress plugin download. You can’t miss it. It’s the only SWF in the zip.
Comment by Roy — August 21, 2008 @ 3:43 pm
hmmm the new tagcloud.swf does’nt work well. As soon as i replaced the “old” one it shows only the background, the cloud as such isn’t shown. The line you posted me above makes the whole thing to not display.
I am completly out of ideas now…^^
Comment by Michael Strauss — August 21, 2008 @ 3:59 pm
@Michael: It seems WordPress is messing with the quote characters in my comment above. I just copied the latest flash into the example folder, and added the line in my comment. I then had to change the fancy double quotes WordPress inserted back into regular ones, and remove “widget_”, because the object in the example is “so”. It worked for me, with the tags placed evenly.
I’ll try to update this post asap, but you can email me for the files if you like.
Comment by Roy — August 21, 2008 @ 7:19 pm
ok i’ll try this out as soon as i have time for it. thank you very much for your efforts!^^
Comment by Michael Strauss — August 25, 2008 @ 8:25 am
This is a truly beautiful solution for displaying blog tags! Using these hints, I managed to port the plugin for use with Blogger. I have emailed you about this, and with permission I hope to write about my method for other Blogger users too.
Thank you sincerely for your hard work!
Comment by Amanda Fazani — August 27, 2008 @ 10:35 pm