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
hey roy can u please tell how can i use this pluggin succesfully in blogger??
Comment by sam — August 29, 2008 @ 7:55 am
Hi Sam. No I can’t. I haven’t used Blogger in over five years. Amanda (see the comment above yours) may be able to help you though… she’s working on a tutorial about using cumulus on Blogger
Comment by Roy — August 29, 2008 @ 10:13 am
[...] para exponer de forma diferente las etiquetas (labels) de nuestro blog. Este mismo efecto ya existía para WordPress y ya tiene un plugin para esto y no cabe duda que es una gran forma de mostrar nuestros [...]
Pingback by Wp-Cumulus Para Blogger | Corbec Soluciones — September 2, 2008 @ 9:31 pm
Hi, i’m using the example (without the xml file) and the tags are not displayed.
When I add the file tagcloud.xml, the tags in the file are displayed.
It seems that the swf always looks for the tagcloud.xml file.
Is there a solution about that ?
Thanks a lot!
Comment by Rindra — September 3, 2008 @ 10:14 am
Hmmm… it appears the problem exists only in IE. I’ll have to look into this. It probably isn’t the Flash movie’s fault, because in Firefox (and in Chrome
) it works flawlessly.
Comment by Roy — September 3, 2008 @ 12:12 pm
I’ve already try with Firefox and IE but I have the same result.
Perhaps, there’s something wrong in my code here.
Could you check if it’s so.
thanks again.
This will be shown to users with no Flash or Javascript.
var so = new SWFObject(”tagcloud.swf”, “tagcloud”, “600″, “400″, “9″, “#336699″);
//so.addParam(”wmode”, “transparent”);
so.addParam(”mode”, “tags”);
so.addParam(”distr”, “false”);
so.addVariable(”tagcloud”, “Tag name“);
so.addVariable(”tcolor”, “0xff0000″);
so.write(”flashcontent”);
Comment by Rindra — September 3, 2008 @ 4:11 pm
Hi Rindra. The only thing I can see wrong with your code is that there needs to be a node around the tags. I do not have the time to look into the issue right now, but will try to update this asap.
Comment by Roy — September 3, 2008 @ 5:46 pm
I’ve investigated a little further, and it looks like the example does not work properly in an IETab (using the IETab plugin for Firefox). On my machine it does work in IE7.
Comment by Roy — September 9, 2008 @ 8:40 am
hi Roy
any news with the unicode support
& greek UTF-8.
thanks ioannis
Comment by Ioannis — September 9, 2008 @ 9:18 am
Hi Ioannis. I made the plugin open source so you can add whichever characters you need for your language. It’s not possible for me to do versions for all languages, so I made the source code for the movie available, and wrote a short tutorial: http://www.roytanck.com/2008/08/04/how-to-add-more-characters-to-wp-cumulus/ .
Comment by Roy — September 9, 2008 @ 12:02 pm
Hmm, The code looks strangely familiar to some other flash file i saw, If i remember correctly it was called ‘3D Text’ and it is up on various flash sites. Any chance of mentioning/thanking them?
Comment by 3dguy — September 11, 2008 @ 5:37 pm
Is it possible to use this flash tag cloud for Del.icio.us?
When I stumbled upon your awesome tag cloud, I couldn’t help but be transfixed by its simple yet magestic beauty. Then I thought, this would be great if I could apply it to my Del.icio.us account tags..
Does anyone else like this idea?
Comment by Greg — September 11, 2008 @ 10:40 pm
Hello roy,
I would use your tagcloud on Myspace platform but It seems not working because Myspace doesn’t use javascript language. Have you an idee to soluce my prob ?
Thx a lot.
Comment by romk — September 13, 2008 @ 3:25 pm
Hi Romk. There are ways to embed flash into a page that do not require javascript. See here for more info: http://perishablepress.com/press/2007/04/17/embed-flash-or-die-trying/ . You’ll have to add the appropriate flashvars to get the movie functioning properly.
Comment by Roy — September 13, 2008 @ 7:08 pm
Hi Roy.
I’d love to be able to use this on my website. I’ve downloaded the example and it runs very well, except that nothing happens when I click on a word in the cloud. The word is marked with a border but I am not redirected to the href within the anchor tag. I am using IE7 and flash player activex 9.0.124.
Can you help or offer any suggestions?
Thanks.
David
Comment by DavidW — September 16, 2008 @ 3:47 pm
Hi David. You may be bumping into Flash’s security features. Have you uploaded your version to a web server and made sure the domain for the movie and the links are identical?
Comment by Roy — September 17, 2008 @ 10:53 am
@3dguy: Except for some snippets of 3D code I copied from a tutorial years ago, and have been using since, this entire project is homebrew. Do you have an url for the ‘3D text’ project you mentioned?
Comment by Roy — September 17, 2008 @ 1:33 pm
Hi Roy
Awesome plug-in and very intuitive.
Just a note on David’s comment - I had the same issue in that hyperlinks would show in the cloud but the links would go no where when clicked (ie6, ie7, Firefox and Chrome).
I resolved it by removing moving the http:// from the href in the tagcloud.xml and just putting the file name eg href=”test.html” - it then took the root and added test.html to the path.
Hope this is useful
Steve
Comment by Steve G — September 17, 2008 @ 6:57 pm
Hi
Update - whilst the above suggestion works I think Roys comments about Flash security stopping the hyperlinks from working are correct - I have just set up a test web server with same domain for the movie and links and the full http://.. href links now work fine.
Steve
Comment by Steve G — September 17, 2008 @ 8:37 pm
Hi Roy
I read the instructions how to change the character set
Unfortunately i do not have flash
SO if you could make a UTF-8 version it would cover most people with non
latin characters
Thanks again for a wonderfull plugin
Ioannis
Comment by Ioannis — September 18, 2008 @ 10:50 am
@Ionannis: A utf-8 version is technically impossible due to limitations in the Flash player and file size restrictions.
Comment by Roy — September 19, 2008 @ 7:05 am
[...] How to repurpose my tag cloud Flash movie | Roy Tanck’s weblog Blogged with the Flock Browser [...]
Pingback by Flash tag clouds « Merveilles du web 2.0 — September 19, 2008 @ 2:27 pm
Hi Roy,
Great tag cloud. Love it!
I have used it as a standalone visualisation tool (www.tweet3d.com) and would like all links to open in a new window/tab. Is there a way to be able to do this?
Many thanks
Edward
Comment by Edward Terry — September 24, 2008 @ 8:50 pm
I’m putting the code on the template to appear in 2 places, I’m putting at the top and at the bottom, but it only shows the top one…
the bottom one, says that i don’t have flash installed :/
Can you make it, so that i can have two on the theme?
Comment by ORiOn — September 26, 2008 @ 3:49 pm
hmm,
What if we have an href like this : http://www.mysite.com/index.php?id=1&cat=12
Then what
?
It wont accept the “&” sign or the &
Any ideas ?
Comment by Sandbird — October 1, 2008 @ 11:52 am
Hi Sandbird. The WordPress implementation uses urlencoding to avoid this. You can simply urlencode the entire tag cloud and feel the resulting string to the Flash movie.
Comment by Roy — October 1, 2008 @ 1:46 pm
Hi Roy, is there any way to use this pulling tags from Wordpress but to display on a non Wordpress page?
Comment by tom — October 24, 2008 @ 10:38 am
Hi Tom, There probably is. You could query WordPress’s database from any PHP file. It might even be possible to include WP’s core functionality into a PHP page you write by including the right files. The codex (codex.wordpress.org) should be able to get you started.
Comment by Roy — October 24, 2008 @ 12:15 pm
Hi Roy!
Thanks for a great bit of code.
I wanted to let you know I have added it to the Serendipity Blog Engine http://www.s9y.org
There is a demo running at my site.
Thanks for the clear example!
-Rob A>
Comment by Rob A — October 24, 2008 @ 2:20 pm
Is there a way to specify a frame destination for the cloud’s links ?
For example, in the xml file :
Yahoo
Thanks
Comment by franck — October 31, 2008 @ 11:31 pm
I re write my question coz the link has been activated.
For example :
a href=”http://www.yahoo.com” class=”tag-link-66″ title=”2 topics” rel=”tag” style=”font-size: 19.55556pt;” target=”bas”>yahoo
Comment by franck — October 31, 2008 @ 11:33 pm
Hi everyone.
I can’t use two clouds. How can I do this?
Comment by Durbek — November 1, 2008 @ 4:47 am
Flash Tag Cloud for Serendipity…
Tag CloudWhile surfing about the net I ran across a nifty tag cloud implemented as a flash movie, WP-Cumulus. Unfortunately, it was a wordpress plugin[?]. Fortunately the creator, Roy Tanck, was kind enough to not only open source WP-Cumulus, but to …
Trackback by Rob A's (Im)personal Blog — November 5, 2008 @ 3:44 am
Chmura tagów we flashu…
Bardzo ciekawy sposób przedstawienia chmury tagów. Wynik dostajemy we flashu w postaci kuli 3D zbudowanej z tagów….
Trackback by pligg.com — November 9, 2008 @ 12:56 pm
Roy,
I’m trying to send url parms but it appears to be choking on the &, any suggestions? I want to use the “cloud text links” as normal links to call pages with parms.
Any help would be greatly appreciated.
…
Comment by Webspeeder — November 12, 2008 @ 10:56 pm
Hi Webspeeder. You’ll either need to use urlencoded &’s or urlencode the entire tag cloud (which is what the WordPress plugin does).
Comment by Roy — November 13, 2008 @ 9:47 am
Hi there,
When trying to add a javascript-link in the href, and testing it afterwards, this doesn’t work. I am using thickbox to open an url (cf. javascript:tb_show(”, ‘http://www.yahoo.com?tbshow=…’);)
Any ideas how to solve this?
Comment by Kosmicc — November 20, 2008 @ 9:26 am
Hi ! Great Work !
I would like to have the tagcloud.swf in 380px x 80 px size…
Is it possible ?
i can’t open the .fla because my version of flash is older
many thanks !
Comment by Charline — November 20, 2008 @ 12:04 pm
@Kosmicc: You could try urlencoding the links or in fact the entire tag cloud.
@Charline: The Flash movie adjusts itself to whatever dimensions you give it in the embed code, but 80px is very small. I don’t think you’ll be able to read smaller tags.
Comment by Roy — November 20, 2008 @ 4:26 pm
I love this tagcloud and have been tryin to figure out exactly what I need to do to install it on my non WP site.
I’m using a PHPbb based portal called IntegraModm and there are no manuals listed here on how to successfully integrate this unto my site.
First thing Im nowhere near being considered Tech savvy. I can follow basic instruction however.
Could someone post exactly how I could embed this into my homepage.
I can figure the linking and sizing and font colors out later.
This is the more important part for me.
Heres my site: http://www.loadedparanormal.com
I want it on the front page, in what I guess would be considered a module block in the center.
Comment by XHIBIT — November 26, 2008 @ 11:17 pm
Hi…this script is awesome…thanks for your contributions…
I have a question though..
Can we make this flash to automatically rotate ? I mean i dont want to the flash move ater the cursor will over to it…
I want it to auto rotate always…
How can ı do that? thnkx for your replies…
Comment by delikassap — November 27, 2008 @ 7:08 pm
[...] Roy Tanck who created Cumulus, tells howto … [...]
Pingback by deviation » Blog Archive » Playin’ with cumulus — November 30, 2008 @ 6:28 am