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. Nick, please visit my site http://www.fruticultura.net/moodle: you’ll see WP-Cumulus implemented as a HTML block. A few key aspects must be implemented under Moodle, but I could give you a hand.
    Thanks to Roy for his clear guidance to repurpose this amazing 3D tag cloud.
    Regards!

    Comment by Larry Lugo — October 8, 2010 @ 4:50 am

  2. Larry
    Thanks for that; I’ve trtied to link but cannot get through. Can you contact me by email, please. I’m very interested in what you have achieved with WP-Cumulus in Moodle.

    Comment by Nick — October 8, 2010 @ 10:18 am

  3. hi, Roy:
    I tried the example you provides. The dancing word cloud looks pretty. However, the http link you embeded in the page does not seem to work when I click the flying word. Is it the way it is supposed to be?

    thanks

    Comment by Jason — October 11, 2010 @ 4:10 pm

    • Jason, that is usually because you’re testing locally. Uploading to the server usually fixes this.

      Comment by Roy — October 14, 2010 @ 2:04 pm

  4. hi roy,
    great, fairly easy to use. i bulit a plugin for indexhibit, and its working fine.
    thanks.
    jan

    Comment by jan — October 18, 2010 @ 7:36 pm

  5. hi roy,
    great, fairly easy to use. i built a plugin for indexhibit, and its working fine.
    thanks.
    jan

    Comment by jan — October 18, 2010 @ 7:37 pm

  6. I adapted the cloud as an indexhibit plugin:
    http://www.department-deluxe.org/index.php?/news/indexhibit-plugintagcloud/
    Jan

    Comment by jan — October 19, 2010 @ 6:50 am

  7. hi, Roy:
    thank you for your reply. Just curious, is it even possible to have a image (.gif) as a flying token instead of latin word?

    Comment by Jason — October 19, 2010 @ 8:12 pm

    • Hi Jason. Yes, it is. But the effect doesn’t work very will with text and images mixed. That’s why I created the Flickr and Photo Widgets also found on this site. They do images instead of text.

      Comment by Roy — October 20, 2010 @ 8:43 am

  8. In order to get it working correctly change any occurrences of the “&” (ampersand) sign that appears in your tags into the “%26″ (percent symbol followed by the number 26) flash friendly equivalent sign.

    Comment by MikeFromNapoli — October 24, 2010 @ 5:24 pm

  9. Hi Roy,

    Great flash I must say. I took the code from the example, placed the swf, js, and the xml to the root dir, and it worked!

    The trouble I’m facing is that I have the movie on my MasterPage (ASP.NET), which is a wrap for all other pages on the site, so I assume the movie should show on every page… but it doesn’t. It only shows on those pages that reside in the root directory – the dir with the movie files. As soon as I move to a page in other directory, say /Account/Register.aspx, it doesnt show anything but the DIV saying “This will be shown to users with no Flash or Javascript.”(the default text). When I run the site in the ‘debug mode’ on the other non-root pages, it says “SWFObject is not defined”. I think thats’ because it takes the relative path and not absolute.

    Here’s my code:
    This will be shown to users with no Flash or Javascript.

    var so = new SWFObject(“tagcloud.swf”, “tagcloud”, “200″, “200″, “7″, “#ffffff”);
    // uncomment next line to enable transparency
    so.addParam(“wmode”, “transparent”);
    so.addVariable(“tcolor”, “0x206c02″);
    so.addVariable(“tcolor2″, “0x206c02″);
    so.addVariable(“hicolor”, “0xff0000″);
    so.addVariable(“tspeed”, “100″);
    so.addVariable(“distr”, “true”);
    so.addVariable(“xmlpath”, “tagcloud.xml”);
    so.write(“flashcontent”);

    So the question: is there any way to specify the path to the movie, JS, and XML, say SWFObject(“/tagcloud.swf”…) or SWFObject(“/Cumulus/tagcloud.swf”…)?

    Comment by David — October 26, 2010 @ 10:30 pm

  10. Hi David. That would depend entirely on the way your server is set up. Using a slash (for web root) as you suggest, or even full paths could work. The XML path is relative to the movie’s folder, so you rpbably won;t need to add path stuff there.

    Comment by Roy — October 27, 2010 @ 9:29 am

  11. Roy,

    I’ve no enough knowledge to study the JS file, otherwise I wouldn’t ask the question. Let’s make it simple: assuming the movie stuff is located in a sub-directory called /Cumulus, what would be the code?

    Thanks,
    – David

    Comment by David — October 27, 2010 @ 5:08 pm

  12. David, the JS file wasn’t written by me. It’s a standard library for embedding Flash into web pages. It’s used everywhere, even Adobe themselves use it.

    If you see the no-flash content, odds ar the javascript did not “fire”. If it had, you’d probably see an empty area with “movie not loaded” under the right movie button. I assume you do not have a full, absolute path in the

    Comment by Roy — November 9, 2010 @ 9:28 am

  13. Link: [Flash CS5] - Tag Cloud 3D / wp cumulus - Flashforum
  14. Hi Roy,

    First, thank you very much for your plugin which i’ve been using for 2 years :)

    Over time, I wonder one thing: is there any way to make the Cloud moving every time, even if the mouse don’t come to bother the tags ? Could i use some extra parameters with wp_tag_cloud ?

    regards,

    f.

    Comment by Fabrice Régnier — November 11, 2010 @ 1:26 am

  15. Hеllo!
    Excuse my bad english language.
    I have one stupid question. Where to upload plugin.tagcloud.php, and after that is it enough to post

    to work it?
    Thanks for a great job!

    Comment by Dani — November 14, 2010 @ 2:54 pm

    • Dani, there’s no plugin.tagcloud.php in my WP-Cumulus project. It may be part of a non-WordPress port, in which case the author of the port should be able to help you.

      Comment by Roy — November 17, 2010 @ 10:26 am

  16. Hi Roy,

    I guess you missed my question 2 posts ago ;) Can i have any hint ?

    regards,

    f.

    Comment by Fabrice Régnier — November 17, 2010 @ 10:41 am

  17. Thanks, Roy.
    Have a nice day!

    Comment by Dani — November 17, 2010 @ 4:33 pm

  18. Hi Fabrice. Sorry I missed your question. It’s possible to change this behavior in the AS3 code, but there’s no external parameter to set this without recompiling the movie.

    Comment by Roy — November 18, 2010 @ 12:51 pm

  19. Hi again Roy!

    Thanks for help, the “/Cumulus” worked fine… The case as that I was usin it in development environment, where “/” didn’t work cause my machine was using a virtual path, something like “localhost:2456/Commerce/” and the Cumulus was appearing as “localhost:2456/Cumulus/” instead of “localhost:2456/Commerce/Cumulus”. I was so blind :) So that was the reason I was confused, and of course it wouldn’t work on dev environment because of that. After transferring the solution to the production it took the right location, cause there were no virtual paths…

    Great movie again!
    - David

    Comment by David — November 19, 2010 @ 2:27 pm

  20. hi roy,
    thank you for this script. i used it on my homepage (at the bottom, right corner), but unfortunately, the tags are not clickable. even your example tags are not. the links starts with “http” and i have no idea what’s wrong. could you help me?
    thanks in advance
    benni

    Comment by benni — December 15, 2010 @ 4:31 pm

  21. hi again roy,
    i am almost hopeless. i copied the code from a website, where it works (the tags are clickable) to my website just to see what happens. the code, that works on the other side, doesn’t work at mine. what’s going on there?

    hope you can help me
    thanks again
    benni

    Comment by benni — December 20, 2010 @ 1:36 am

  22. Hi,

    I solved the problem with the xhtml 1.0 strict validation “element tags undefinded”.

    Just replace with < > in attributes “tags” and “a”

    That’s all

    Alessandro

    Comment by alessandro capezzuoli — December 25, 2010 @ 10:38 am

  23. Hi,

    I solved the problem with the xhtml 1.0 strict validation “element tags undefinded”.

    Just replace “” with “<” “>” in attributes “tags” and “a”

    That’s all

    Alessandro

    Comment by alessandro capezzuoli — December 25, 2010 @ 10:39 am

  24. How do i show UTF-8 characters (such as arabic or persian language)???

    I change page encoding , but ….!

    help me , plz

    Comment by Bill — January 17, 2011 @ 12:47 am

  25. Hello, is it possible to have colored tags? I know it has already been answered negatively, but I was wondering that maybe something has been changed lately in the plugin or wordpress latest versions.

    Comment by Sandro — January 19, 2011 @ 10:10 pm

  26. HI and thank you,

    I wanted to know if anyone had found a solution for arabic script (in order and, if possible, not separated..)

    Thx,

    Nico

    Comment by Nicolas — February 8, 2011 @ 7:18 pm

  27. Hi Roy,

    I found your Cumulus integrated in the website http://www.sendungverpasst.de/ and I am really well impressed – so now I want to integrate your Cumulus on my own Website.

    In intention to integrate the Cumulus I downloaded several files, for example the Cumulus Example.
    It works on my computer without any errors.
    I can clik on the topics (Word Pres, Roy Tack and more….) but the link’s mentioned in the source base “example.html” doesn’t work – the websites don’t open….
    What for a kind of mistake am I doing?

    Kindly Regards

    Fabian CapC

    Comment by Fabian CapC — February 12, 2011 @ 10:50 pm

  28. Hi Roy,

    I’ve tried this and this and now the Cumulus works in my offline website (laying on my computer, not on my server).
    The following days I will try a little bit more that the cumulus is finally integrated in my online Website (laying on my server).

    I wish to thank you for a so amazing PlugIn like the Cumulus.

    Have a nice evening….

    Fabian CapC

    Comment by Fabian CapC — February 12, 2011 @ 11:21 pm

  29. Hi Roy,

    how can I change the size of the cumulus?
    The exmaple is oversized.
    I would prefer the size of http://www.sendungverpasst.de/ – can you tell me how I can change the size?

    Kindly regards,

    Fabian CapC

    Comment by Fabian CapC — February 13, 2011 @ 10:13 pm

  30. @Fabian: Flash’s security sandbox prohibits links to websites (http://) when running locally (file://). It should work once you put things online.

    The size of the flash movie is specified in the html. You can change the width and height to any two numbers, the movie will adjust automatically.

    Comment by Roy — February 15, 2011 @ 9:57 am

  31. Hi Roy!

    Can you help me in this?
    I tried to add hungarian characters to the tagcloud.fla. I’ m using Adobe Flash CS4. I tried to save the work in CS4 and CS3 format also, but finally the tags did not appear. So nothing appears on the output.

    What Flash version do I need to use for it or what could cause this problem?

    Thank you for your reply in advance,

    Br,
    Laszlo

    Comment by Laszlo — February 18, 2011 @ 4:26 am

    • Hi Laszlo. Are you on a mac? If so, you may need to change the font’s name in the actionscript code. Fonts often have slightly different names on different platforms.

      Comment by Roy — February 18, 2011 @ 9:25 am

  32. Hi Roy,

    No, I’m using Windows, but I’m going to try this proposal right now.

    Comment by Laszlo — February 18, 2011 @ 9:48 am

  33. Hi Roy,

    A could not find the action script code.
    I found only one keyframe on the timeline, but it does not contain any AS code.

    So finally I changed the font type to Tahoma via Properties pane and then I added these few charachters: áÁéÉíÍöÖüÜóÓőŐúÚűŰ

    But it did not work. Nothing appeared :).

    Comment by Laszlo — February 18, 2011 @ 10:21 am

  34. Simple question, what does the 7 in the following line do?

    var so = new SWFObject(“tagcloud.swf”, “tagcloud”, “200″, “200″, “7″, “#ffffff”);

    I’ve tried substituting other numbers and can’t see any changes, it even works without it? What does it do? And are there other values I could use in it’s place that do something else?

    Thanks,
    Art

    Comment by Art — March 5, 2011 @ 1:22 am

    • Art, that’s the line that controls the filename to embed, the object name in the page’s DOM, the dimensions, required player version and the background color. If nothing changes at all, you’re probably running into a caching issue or – as happens to me all the time – you’re not viewing the document you’re editing :).

      Comment by Roy — March 8, 2011 @ 8:59 am

  35. Roy,

    http://www.bieber.org

    Thanks,

    Bieber

    Comment by Bieber — March 6, 2011 @ 3:19 pm

  36. Link: How to repurpose my tag cloud Flash movie | Roy Tanck’s weblog | Mustafa Kipergil Hakkında Herşey…
  37. Hy Roy,
    just discovered this and i love it, thankyou very much for sharing it.
    I am trying to make it work on a facebook application and it does’t.
    I’ve understood there has to be done some complicate steps to use the swfobject in facebook so I kinda have it working locally without that, with this code:

    But on FB still doesn’t show anything.
    Do you have any experience with your menu and fb?
    Thanks again.

    Matteo

    Comment by Matteo — April 26, 2011 @ 10:55 pm

    • Matteo, none whatsoever. I’m afraid you’re on your own… (don’t even have de fb account)

      Comment by Roy — April 27, 2011 @ 9:25 am

  38. Wow this is the coolest thing I’ve seen can’t wait to give it a try.
    Is it possible to set this up on a Non WordPress Site.

    Comment by Brett @ One IT Cloud Computing — April 28, 2011 @ 12:07 am

  39. Roy, love it. I wrote an ASP page to update my XML file and it worked, but I have tried every solution under the sun to reload the cloud with the updates. Setting no-cach, setting experation, load a second version of the movie, no matter what I have tried I have to close my browser to get it to update. I checked my browser cache and the file does not appear to be cached locally. Ideas?

    Comment by Brian — May 2, 2011 @ 5:59 pm

    • Brian, Flash itself may be caching. Have you tried using a random url var in the XML url (assuming you’re specifiying it)? Something link “tagcloud.xml?r=234″ where the number is randomly generated each time?

      Comment by Roy — May 10, 2011 @ 12:38 pm

  40. Hi Roy, do you have plans to build an HTML5 (non-Flash) version of the Cumulus ?

    Comment by Tikko — May 11, 2011 @ 5:23 pm

    • Hi Tikko. No, but version 2.0 will be built with addition frontend options, such as html5 in mind. We’re working to make it as flexible as possible.

      Comment by Roy — May 13, 2011 @ 10:02 am

  41. Hello, Roy :)

    Great that you put the source out! Thanks!

    I have a problem: a recompiled a flash movie, having added some cyrillic characters, and the links don’t work.
    It grabs all the date from an .xml – ok, shows text, but doesn’t want to follow the links.

    Could you please help me?

    Comment by Shu — May 14, 2011 @ 3:07 pm

    • Shu, there seems to be something wrong with the way non-latin links are “processed” by Flash, but I’m not sure how to fix it. Shoudl you find a solution, please let me know.

      Comment by Roy — May 18, 2011 @ 2:39 pm

  42. Laszlo, try use the .xml file – I had such an issue with Russian – inline it didn’t show, but when through the xml, was ok.

    Comment by Shu — May 14, 2011 @ 6:07 pm

  43. It has probably some issues with JS – when I embed it in a plain html – everything is ok, but when I embed it onto the site, full of other scripts and different things – the links are not working -(
    Though no JS errors passed.

    Comment by Shu — May 18, 2011 @ 2:47 pm

  44. Hi Roy,

    Thank you for sharing this… was wondering if it is possible to embed it into a Joomla site yet…

    I’m not a developer and have built what I have so far so if it’s possible to do it.. Would really appreciate any pointers.

    Cheers!

    Comment by Tahir — May 20, 2011 @ 4:01 pm

    • @Marco: No, the current version doesn’t support non-latin characters.

      @Tahri: You should try googling for “Joomulus”.

      Comment by Roy — May 21, 2011 @ 11:12 am

  45. hello this is a great plugin !!
    good work
    Is there any way that will work with non latin characters?

    Comment by Marco Antonio - Zrii en Colombia — May 20, 2011 @ 6:34 pm

  46. I found a solution to one thing.

    When the tagcloud.swf is embedded from another server (src=”http://…”) the links do not work.
    I used an iframe to show the swf, and added target=”_parent” to all the links in the tagcloud.xml.

    Maybe that may come handy to someone.

    Comment by Shu — May 22, 2011 @ 9:48 pm

  47. Any way to either support CSS layout options or other means of further layouting? For example, I can add newlines to tags through newline escape but then we’d want to do text-align:center or something. Maybe something to add in the future? (like you added the optional color and hicolor attributes)

    Comment by Jonas — May 24, 2011 @ 2:51 am

    • Hi Jonas. I’ll consider that. I’m not very fond of Flash’s CSS support, but it’s been a while since I actually used it.

      Comment by Roy — May 24, 2011 @ 7:46 am

  48. Hi bro
    It’s left a very nice post and I want it on my blog http://www.mohajer4ever.mihanblog.com
    but I can not help give it on blog .
    In addition to this text because I translated with Google
    My language looks different and so hard
    Please help me dude

    Comment by mehdi — May 31, 2011 @ 12:30 pm

  49. Dear Roy,

    Is it possible to put javascript into the . The reason is that I would like to open a pop-up window window.open() instead of just a new “_blank” html.

    Thanks for your valuable cumulus,

    Alex

    Comment by Alex Medialand — June 7, 2011 @ 5:32 pm

    • Hi Alex. I’m afraid you can’t. Flash treats javascript calls differenly from simple href links, plus there’s a potential for XSS exploits.

      Comment by Roy — June 9, 2011 @ 8:48 am

  50. thanxx

    Comment by Alex — June 9, 2011 @ 5:52 pm