How to repurpose my tag cloud Flash movie

WP-Cumulus tag cloud plugin

WP-Cumulus is now open source. So instead of going through the documentation below you can download it and have a look inside. 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.
To fix an XSS vulnerability, Version 1.23 of the plugin no longer supports calling ‘javascript:’ links from tags. If you need the Flash movie to interface with javascript, I recommend downloading the source files and implementing AS3′s ExternalInterface class to handle communication.

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 9 or better.
  2. It contains only Latin characters. This short tutorial guides you though the process of adding support for your language.
  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" target="_blank" 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.

Here’s a list of currently available flashvars:

NameFormatDescription
modeString: tags|cats|bothTells the movie to expect and display tags, categories or both.
distrString: true|falseIf set to true, the tags are distributed evenly over the sphere’s surface.
tcolorHex color value: 0xff0000 for red.The default tag color
tcolor2Hex color valueSecond tag color. If supplied, tags will get a color from a gradient between both colors based on their popularity.
hicolorHex color valueTag mouseover/hover color
tspeedNumber: percentageDetermines the speed of the sphere’s rotation. The default is 100, higher numbers increase the speed.
tagcloudXML string (urlencoding optional)The tag cloud, XML format described above.
xmlpathPath to load the XML fromURL, defaults to ‘tagcloud.xml’

Per-tag colors

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>

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.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tcolor", "0xff0000");
so.addVariable("hicolor", "0x000000");
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 (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.

682 Comments

  1. hi Roy,
    I’ve tried this plugin and running well (using xmlpath). But when I try using tagcloud variable, it’s not running anymore. Flash player always return an Error #2007:Parameter child must be non-null.
    I’ve done the same as you write above, and tried using urlencode but it still not works. I’s running out of ideas right now. This is my code, maybe you can help me on this :
    so.addVariable(“mode”, “tags”);
    so.addVariable(“distr”, “true”);
    so.addVariable(“tcolor”, “0xff0000″);
    so.addVariable(“hicolor”, “0×000000″);
    so.addVariable(“tagcloud”,”lorem ipsumciceroli europan lingues“);

    regards,

    Comment by rie — June 11, 2011 @ 10:19 am

    • Hi Roy,

      is it possible to use the tag clouds without using flash ?

      thanks..

      Comment by John — December 15, 2011 @ 6:49 am

      • Not at this time. There are people working on creating the same effect with html5/canvas, but I’ve not seen a complete implementation yet.

        Comment by Roy — December 20, 2011 @ 10:30 am

  2. oow, sorry, the tags is return as link in my comment before. But for sure I do as you told in example (using node)

    Comment by rie — June 11, 2011 @ 10:24 am

    • Hi rie. I’ve never seen that error. Does your XML validate? You can check by opening it in a browser.

      Comment by Roy — June 13, 2011 @ 10:07 am

  3. Hi Roy, I just saw this article. And I see so many comments to this article. This proves that your writing is so well liked. material that you wrote really helped me to understand more about the tag cloud Flash movie. thank you very much.

    Comment by Ade Fr — June 11, 2011 @ 1:00 pm

  4. my mistake, I forgot something on javascript. Case closed.
    Thx Roy.

    Comment by rie — June 13, 2011 @ 3:27 pm

  5. Hey Roy,

    How can i remove border on mouse over.

    Thanks in advance
    paul

    Comment by Paul — June 17, 2011 @ 3:18 pm

    • The code is actually pretty easy to find in the Tag.as class. Once you make your changes, you’ll need to compile the movie using (a trial version of) the Flash IDE.

      Comment by Roy — June 20, 2011 @ 10:51 am

      • Can you give me hint which parameter I have to edit, please?!

        Thx in advance =)

        Comment by Dani — July 16, 2011 @ 6:01 pm

        • From memory (I’m not on my development PC right now): There should be a section of code that draws the box, and is labelled with a comment. The lineStyle function has an “alpha” argument that you can set to 0.

          Comment by Roy — July 17, 2011 @ 9:10 am

  6. great visuals, but I want to use jquery animation instead of flash. do you know if this has been successfully implemented in jquery, and is there such a distribution that you would recommend …

    Comment by zaz — June 22, 2011 @ 9:40 am

    • As far as I know, there’s one, but I’ve only seen it in the wild once. Animation is far less smooth, but it did work. Sorry, don’t have a link…

      Comment by Roy — June 22, 2011 @ 12:33 pm

  7. can i use this for an commercial website?

    Comment by murooo — June 28, 2011 @ 3:14 pm

    • Yes, the open source license allows you to use it on any website you like, including commercial ones. Should you at some point decide to redistribute a modified version of the project, then some restrictions apply.

      Comment by Roy — June 28, 2011 @ 3:29 pm

  8. Thank you for the fast answer…

    Comment by murooo — June 28, 2011 @ 3:35 pm

  9. Am I right that this tag cloud does not support tags containing images?

    Comment by William GUss — June 29, 2011 @ 8:49 am

    • Actually, WordPress does not (without the help of plugins) support tags with images. My plugin is merely a flashy front-end for WP’s tag system.

      Comment by Roy — July 5, 2011 @ 1:42 pm

  10. Hi, Roy
    Could All the Tags achieve this Effects with a HTML Form?

    Comment by Christ Paul — June 30, 2011 @ 10:36 am

    • hi christ paul….m developing a web application …news stream…really want to use the 3d tag effect for my app…is it possible to add just using Html/jquery…. …mainly with out using flash…?? pls mail me back at monsterwarrior127@gmail.com…thx…

      Comment by ravibasskar — February 13, 2012 @ 10:50 pm

  11. When i’m using “&” signs in my URLs, the animation doesn’t load; when i remove the “&”, it works fine.

    How should i escape this character? (urlencode doesn’t seem to work)

    Comment by Martijn — June 30, 2011 @ 5:26 pm

    • You can urlencode any characters, the movie will decode them.

      Comment by Roy — July 5, 2011 @ 1:38 pm

  12. Roy is there a way to add images to tags?

    Comment by William GUss — July 1, 2011 @ 4:33 am

  13. Oh my God! I just had the exact same requirement with William GUss, with only a day later!

    Roy, please, is it possible to move an Image instead of just text ? Is it too hard to implement ? I would love this feature!

    A’

    Comment by Anodynos — July 3, 2011 @ 1:01 am

    • I’ll assume you found the “Photo widget” in the shortcuts menu above?

      Comment by Roy — July 5, 2011 @ 1:36 pm

  14. Hi Roy,
    tried hundred times to change .fla size (with many publish params). but tag clouds remains invisible (no errors). Also tested just opening the .fla and publish with no changes and… still invisible.
    What’s wrong ?

    Regards from Paris

    JKW

    Comment by Junkwaffle — July 4, 2011 @ 10:54 pm

    • Sounds like a font issue. PLease check that the name of the font in the Tag.as class and the one used on the stage are the same. The font of course must also be available in your OS under the exacte same name.

      Comment by Roy — July 5, 2011 @ 1:29 pm

      • Thanks,
        you rule !

        It worked on my laptop, i now fully understand why… !

        thanks again.

        Best regards

        JKW

        Comment by Junkwaffle — July 5, 2011 @ 10:19 pm

  15. Hi,

    stupid question…but where is the tag.as-file? it isn’t included in the “example files”-download.

    Comment by Dani — July 12, 2011 @ 9:28 pm

    • Tag.as is part of the Flash source files, which in turn are part of the “developer version” download on wordpress.org.

      Comment by Roy — July 13, 2011 @ 10:45 am

  16. Hy Roy,
    If i add this tag cloud as a flash, the that tags appear as links on page? I know that google don’t like pages that have many links, so i am afraid to use cloud tags. But if google doesn’t see the links from flash then i think it’ ok to use it.

    Comment by automate cafea — July 18, 2011 @ 2:24 pm

    • Google has become better at looking inside Flash files, and I recently noticed that it now finds the tagcloud.xml file, and indexes it. Whether this affects SEO I don’t know. If you’re using the (urlencoded) flashvar, I think the links will not be indexed. The WordPress plugin does output the regular tag cloud as part of the “non-flash” content.

      Comment by Roy — July 19, 2011 @ 2:58 pm

  17. Hi Roy,
    I’m using this independently from WordPress to create a “quote cloud”. Therefore some of my tags are very long. Do you know how to put line breaks and/or wrap the text in the tags? Thanks.

    Comment by Yog144 — July 18, 2011 @ 11:20 pm

    • The text field used in the Flash is a single line one that scales to fit any text. I’m afraid a bit of Actionscript programming would be required to modify that behavior.

      Comment by Roy — July 19, 2011 @ 3:00 pm

  18. That’s fine. Could you tell me where I can get the .fla file to do that?
    Thank you!

    Comment by Yog144 — July 19, 2011 @ 5:30 pm

  19. Cool. For some reason when I downloaded a zip file previously from somewhere else, it didn’t contain the flash source fiiles. Thanks, Roy!

    Comment by Yog144 — July 21, 2011 @ 5:29 pm

  20. Link: WP-Cumulus | WordPress Designer
  21. Hi Roy -
    this is MOST useful.

    One question:
    I want to be able to use the links to drive some interactivity on the page by targetting the links on an iframe. I understand you exclude JS from the tag links but I cannot seem to get querystrings or hash values to come through. (BTW I use an XML file)
    Is this possible?

    Cheers, Adam

    Comment by Adam — September 14, 2011 @ 8:40 pm

    • I think the movie currently only accepts links where the first four characters are “http”. That rules out “javascript:”, but is admittedly a very crude way of doing so.

      Comment by Roy — September 15, 2011 @ 12:19 pm

      • [RESOLVED]
        I should have known better; query strings on links were not coming through because I was running things locally. Works fine off web server.
        Cheers, Adam

        Comment by Adam — September 16, 2011 @ 9:21 am

  22. Hi Roy,

    We’re using the flashtagcloud, somewhat based on the wp_cumulus cloud in a drupal site. Right now we’re using th xml file approach. (I basically get the data from the database and write it out ‘on the fly’ to a file on the server) but I would like to input the cloud tag data using a string instead.

    I’m not exactly sure if this is possible but if you have any suggestions it would be greatly appreciated.

    Thanks,
    Jeff

    Comment by Jeff — September 15, 2011 @ 12:47 am

    • Hi Jeff. You can use the “tagcloud” flashvar for that. You’ll also need to set the “mode” to “tags”. The example files contain html examples of both approaches.

      Comment by Roy — September 15, 2011 @ 12:18 pm

      • Thanks Roy, for quick feedback.

        As this is a drupal site, I’m actually using the artviper flashtagcloud. The flashvars from this post don’t seem to work.

        I tried this ->
        mode:”tags”,
        tagcloud:””
        // where $output is the same tag data thats contained in the xml file

        in place of this -> cloud_data:”cloud_data.xml?cacheB=”+new Date().getTime(), // the time bit is to force the flash refresh

        …but no luck. Artviper gives no feedback so I was just hoping you might have an idea what the correct way to do this might be.

        And btw, thanks for sharing all this with the community. I know it must take a fair amount of time and energy.

        Thanks,
        Jeff

        Comment by Jeff — September 16, 2011 @ 1:53 am

        • I’m not really familiar with Artviper’s modifications. My suggestions were for “my” version. Hope you get it working though…

          Comment by Roy — September 20, 2011 @ 12:10 pm

  23. Hi Roy,
    First I want to thank you for this plugin. We use it on our cms Guppy (http://www.elevescripp.eu/index.php?lng=fr) and there is a small problem. All the links from cumulus are working fine but when I want to return on the start page with the back arrow ( test with mozilla and ie) it’s stay on the same page. When I call a new page with an internal link, it’s works.
    Sorry for my bad english
    videocripp

    Comment by videocripp — September 30, 2011 @ 5:22 am

    • From what I can tell, the back button does return you to the previous page, but it instantly gets forwarded again to where you were. I assume there’s some javascript at play that affects navigation?

      Comment by Roy — October 3, 2011 @ 2:52 pm

      • Hi Roy, thanks for your answer, yes there are 4 calls javascript (3 are from the cms and one from a plugin of our cms ) but what can i do ?

        Comment by videocripp — October 6, 2011 @ 10:56 am

        • Clicking a link in the cloud does the exact same thing as clicking a regular link does, except that it does not (also) fire javascript events (onclick and such). This is a fundamental limitation in Flash, but relying on javascript for essential navigation is also a poor choice imho. I’m not sure this can easily be fixed.

          Comment by Roy — October 10, 2011 @ 9:33 am

          • hi Roy and thanks for your answer, well it’s not a great problem, i was just wondering if you already saw such things. Anyway thanks for your job

            Comment by videocripp — October 10, 2011 @ 1:04 pm

  24. hi roy,
    thanks for keeping it in download..

    thank u so much for it…
    ur creation is extraordinay..
    try to do more ……
    great ….job

    Comment by sairam — October 6, 2011 @ 6:41 pm

  25. Do you plan to develop an HTML 5 version of the tag cloud ?

    It would be even more free than it is right now.

    Alex

    Comment by alex — October 7, 2011 @ 4:37 pm

    • Yes and no. I’ll fully support anyone who manages to create a good HTML5 version, but my own attempts at getting text to animate smoothly have failed so far. HTML5 is a very good alternative for many things, including video, but it doesn’t do everything Flash does as well as Flash does it. Including animating text. I hope this will change though.

      Comment by Roy — October 10, 2011 @ 9:25 am

      • Thank you.

        If I try (and succeed), I will let you know

        ;-))

        Comment by alex — October 10, 2011 @ 8:23 pm

  26. Hello Roy,

    I’m in the process of repurposing your tagcloud for one of our non-WP sites.
    I would like to extend clouds width and force the tag sphere’s rotation to fill the new dimension, is this possible? I’ve tried changing the W Size of tagcloud.fla in Flash, but it will not fill….

    many thanks.

    Comment by Alex — October 9, 2011 @ 2:28 pm

  27. Link: Cumulus Wolke Farbe Hintergrund - Web to Date Forum
  28. I downloaded the example zip. The flash does work, but clicking on words (tags) doesn’t work… Nothing happens.. Any idea why? Tried it with Chrome and IE9.

    Comment by Nancy — October 11, 2011 @ 5:55 pm

    • In order for the links to work, the movie should be uploaded to a web server, and the links should point to the same (sub)domain.

      Comment by Roy — October 12, 2011 @ 3:34 pm

  29. hi i have a problem vith fonts like š č ž can you hellp me??

    Comment by Boske — October 12, 2011 @ 2:44 pm

    • The current version does not support non-latin characters. You can add them, but that requires recompiling the Flash movie (there’s a guide on this blog).

      Comment by Roy — October 12, 2011 @ 3:25 pm

      • Hvala that means Thanks :)

        Comment by boske — October 13, 2011 @ 1:32 pm

  30. Can I use this widget in a normale web site?

    Comment by Alexandro — October 20, 2011 @ 11:29 am

    • Yes, the info on this page can be used to do that.

      Comment by Roy — October 24, 2011 @ 9:07 pm

  31. Roy, it works great! Thank you. Is there a way to have a clicked tag call back a javascript function in the hosting page instead of opening a window? I’m using it directly in a web page, not WordPress.

    Comment by AllenR — October 20, 2011 @ 4:29 pm

    • OOPS! I see you answered this above…javascript cannot be called from Flash.

      Comment by AllenR — October 21, 2011 @ 12:37 am

  32. Link: WP-cumulus | DiesUndDas
  33. Roy,
    thankyou very much for your fantasic work.
    I am having problems passing more than one parameter to the xml file:
    <a href="distanza.php?r=arg1" style=… works but
    <a href="distanza.php?&r=arg1&k=arg2&j=arg3" style=… does not.
    Is there any way to make this possible?

    Matteo

    Comment by matteo gioia — October 25, 2011 @ 9:15 am

    • I don’t think that first & needs to be there, just the ?. Also, you may need to urlencode the tags if you’re using special characters.

      Comment by Roy — October 31, 2011 @ 11:53 am

  34. Hi Roy,
    In the stand-alone examples you provide (XML and embedded), the tag clouds display great. However, the links don’t work. I can click and click and nothing happens. Any thoughts? Thanks!!

    Comment by Lester W. — October 27, 2011 @ 9:32 am

    • The links only work when the whole thing is on a web server. This is a Flash security feature.

      Comment by Roy — October 31, 2011 @ 11:48 am

  35. hi roy ,
    i am very new to to development and developing my first website using wedget . i am able to use with pics but unable to do it with this words can u please give me the complete steps to get this wonderful wedget so that i can use it in my website pleae

    Comment by jaideep — October 31, 2011 @ 6:26 am

  36. Hi, Roy, great tag cloud – i love it! Can you tell me were I have to tune the rotation algorithm because I would like to have the cumulus always rotating? Thank you, best wishes, Martin

    Comment by Martin — November 2, 2011 @ 10:42 am

    • That would require changes in the actionscript code. You’d need to modify the TagCloud.as file and recompile the movie.

      Comment by Roy — November 8, 2011 @ 10:35 am

  37. Hi roy, the new siblings of your tag flash cloud are the svg tag cloud (http://code.google.com/p/svgtagcloud/) and the html5 tag cloud (http://code.google.com/p/html5tagcloud/). Both use the same cloud algortihm, but svg uses the svgweb library from google and the html version uses a html5 canvas object.
    I hope this solution helps the cloud fan base to build own versions of your cloud application.

    regards – Thorsten

    Comment by Thorsten — November 6, 2011 @ 5:56 pm

    • Wow, excellent stuff. Would you be interested in merging this into my plugin?

      Comment by Roy — November 8, 2011 @ 10:22 am

  38. I’m sorry, but I’m not the flash movie expert – but perhaps somebody reads this blog and likes to change the action script.

    Comment by Thorsten — November 8, 2011 @ 9:56 pm

  39. How can I change the font family ??? Do I have to change it in the Flash File?

    I also try to change the font family in the Flash File, but i couldn’t publish it.

    Comment by AT — November 17, 2011 @ 11:28 pm

  40. Hey, I’m using Weebly, do you have any clue how I get this on my site?

    I have Word Press, and Weebly offers custom html. But I still can’t figure it out.

    Comment by David — November 19, 2011 @ 1:13 pm

    • I’m not aware of a Cumulus implementation for Weebly, and since it’s a hosted platform, I guess you’ll have to ask them.

      Comment by Roy — November 21, 2011 @ 11:39 am

  41. Saw your “WP-Cumulus” on a web site and was blown-away!

    It is good to see that people continue to live in the space between realities. It’s the only way to advance into the unknown.

    Comment by Duncan — November 30, 2011 @ 10:53 am

  42. Is there a way to employ the WP-Cumulus for powerpoint? The 2010 version has built in flash support so I imagine there may be a workaround, no?

    Comment by N Beckloff — December 1, 2011 @ 8:04 am

    • I’ve never tried it, and I seriously doubt you’ll be able to get it to work. I don’t have PowerPoint installed, so I can’t test whether it works.

      Comment by Roy — December 7, 2011 @ 9:24 am

  43. Do I need PHP for this? I would prefer to load links via another html file. Just need the swf and a html file with the links, sizes, fonts, etc.

    Thanks.

    Comment by Eric — December 3, 2011 @ 7:27 pm

    • Actually, the tags etc need to be in an XML file, but there’s no need for PHP. Please see the example files for (duh) examples :).

      Comment by Roy — December 7, 2011 @ 9:21 am

  44. Thank you so much for the source files!
    I’m trying to use the tagcloud as a menu in flash. That’s why I don’t want to use XML, so I’m trying to change the code. But it doesn’t work :s I’m trying for hours now.. Is there somebody that also used the cloud for this purpose and can help me out?

    Thanks!

    Comment by Eve — December 6, 2011 @ 10:36 am

  45. After seeing this on The Financial Times, I thought this would be an amazing screensaver. Just a simple black screen with rotating tags updated through RSS to link to your favorite news website and recent articles with those tags. Just an idea.

    Comment by Alex P — December 9, 2011 @ 3:19 pm

  46. Hey,

    I am using WP Columns with tagcloud in my Drupal 6 website but the tagcloud columns not showing in IE 9 Please any one suggest me a solution for this.

    Regards

    Comment by Sayed — December 11, 2011 @ 10:08 am

  47. Hi

    I may have found a bug. In the example.html file. if a tag URL contains an ampersand like http://www.example.com/index.php?foo&bar then the flash object won’t render.

    Is there a way around it?

    thanks :)

    Comment by Enki — January 1, 2012 @ 1:22 am

    • You should be able to work around this by urlencoding the url.

      Comment by Roy — January 6, 2012 @ 8:17 pm

  48. hi roy, can i use this in blogger?

    Comment by balveer — January 6, 2012 @ 6:35 am

  49. Hi, Roy… thanks for you excellent work.
    I have a question for you, do you know if it’s possible to make the same effect to cumulus BUT with pictures or graphics.. no text..

    Thank you very much and best regards

    Comment by Jesus — January 10, 2012 @ 9:47 am

  50. Dear Roy,

    I am a cumulus user and fan.

    Do you know any known issue with Windows 7? The behaviour of the cumulus seems not so great: Tags do not move until you mouse over them.

    How to force the tags move on loading?

    Thanxx,

    Comment by Erick — February 26, 2012 @ 11:41 am

    • The tags should initially, for a couple of seconds, rotate when the page is loaded. Once they come to a stop, you need to mouse over them to get them going again. This is by design. If your page is very heavy, gets “assembled” using javascript, or has errors, the initial animation may not be visible. I’m pretty sure this is not a Windows 7 thing though. I run Win7, and my clouds move.

      Comment by Roy — February 27, 2012 @ 9:59 am