Yesterday I added to my blog a 3D Tag Cloud made in Flash (you can see it at left). I found it more visually exciting than the usual Tag Cloud supplied by BlogEngine.NET, so I decided to share it with other BlogEngine.NET users.
Flash Tag Cloud allows you to display your site's tags, using a Flash movie that rotates them in 3D. It has the same features as a regular tag cloud, but is more visually exciting.
It is based upon wpCumulus, the flash tag cloud for Word Press (for additional information see http://wordpress.org/extend/plugins/wp-cumulus/).
I ported it on BlogEngine.NET 1.6.1 as a widget (this version of the widget doesn't have the XSS vulnerability reported in this page: http://www.vupen.com/english/advisories/2009/3322)
You can download the widget from here: FlashTagCloudBE.zip
and the source code from here: FlashTagCloudBE src.zip

Installation

Copy the folders in the zip in the root of you BlogEngine.NET installation.
After that, you will see a new widget "Flash Tag Cloud" in the Widget Zone.

Settings

The settings page allows you to change the tag cloud's dimensions, change the tag colors as well as the background etc.

Width of the Flash tag cloud

The tag cloud will scale itself to fit inside whatever dimensions you decide to give it. If you make it really small, chances are people will not be able to read less-used tags that are further away. Anything up from 300 will work fine in most cases.

Height of the Flash tag cloud

Ideally, the height should be something like 3/4 of the width. This will make the rotating cloud fit nicely, while the extra width allows for the tags to be displayed without cropping. Western text is horizontal by nature, which is why the ideal aspect is slightly landscape even though the cloud is circular.

Tag Color 1

Type the hexadecimal color value you'd like to use for the tags.
Black (#000000) will obviously work well with light backgrounds, white (#ffffff) is recommended for use on dark backgrounds.

Tag color 2

Optionally, you can use the tag color 2 to specify a different color. When two colors are available, each tag's color will be from a gradient between the two.
This allows you to create a multi-colored tag cloud.

Tag highligth

Tag highligth lets you specify a mouseover highlight color.

Background color

The hex value for the background color you'd like to use. This options has no effect when 'Use transparent mode' is selected.

Use transparent mode

Turn on/off background transparency. Enabling this might cause issues with some (mostly older) browsers.

Rotation speed

Allows you to change the speed of the sphere. Options between 25 and 500 work best.

Distribute tags evenly on sphere

When enabled, the movie will attempt to distribute the tags evenly over the surface of the sphere.

Minimum Tag size

Allows to set the minimun size of the font for the tags. A value of 8 is good enough

Maximun Tag size

Allows to set the maximun size of the font for the tags. A value of 20 is good enough

blog comments powered by Disqus