Label Cloud widget "Blogumus" is an Flash based tag cloud widget created by Roy Tanck for WordPress Cumulus plugin and Amanda had converted the script for use in blogger blogs. I am interested too with this widget and starting to learn it. Simply you can add this widget to your blog with copy and paste only.
Blogumus uses a combination of javascript and Flash animation to parse and display your blog labels. As usual to see the widget in action, both Flash and Javascript must be installed and enabled for your internet browser. However, the label links will still be clickable but not animated for those who prefer do not use JavaScript or Flash plug-in.
Particularly Blogumus uses SWFObject version 1.4 (javascript) and Flash TagCloud (swf) files. SWFObject itself released under MIT license and author by Geoff Stearns from blog deconcept. TagCloud created and compiled by Roy Tanck under flash-based. SwfObject is use to embed Flash content. And now i have just add Hicolor element without any major changes to make hover color different as you can see above.
By the way to maximize your browsing experience, consider to install the latest Adobe Flash player plugin version 10.0.32.18 size 1.83 Mb from here. It supports Windows, Firefox, Safari and Opera.
Another plug-in you should have is the latest Java for Windows 6 version 17 plug-in (file size = 18 Mb) here. Latest java 6u17 supports Windows 7, Vista, XP, 2000, 2003 and 2008 Server. To make the Flash Cloud works, you require to install flash version 7 and up.
Installing the widget in your blog
Go to Layout=>Edit HTML in your Blogger dashboard, and search for the following line :
<b:section class='sidebar' id='sidebar' preferred='yes'>
Paste this code after the above line :
<b:widget id='Label77' locked='false' title='Labels' type='Label'>Thats it, preview your template and if installed correctly, you should see the Tag Cloud appear in your sidebar. You can edit the element's variable to suit your blog appearance.
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title></data:title></h2>
</b:if>
<div class='widget-content'>
<script src='http://url-swf.object.js" type='text/javascript'>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://url-tagcloud.flash.swf", "tagcloud", "520", "330", "7", "#F2F2F2");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x0A0AFF");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "90");
so.addVariable("hicolor", "0xCC0000");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a href='data:label.url' style='13'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.addParam("quality", "high");
so.write("flashcontent");
</script>
<b:include name='quickedit'>
</b:include></div>
</b:includable>
</b:widget>
Tips to customize Blogumus Cloud Label :
You can alter these variables appropriately
* Width is set to 520px
* Height is set to 330px
* Background color is "Pale-White"
* Text color is "Blue"
* Font size is "13"
* Text Hover color is "Red"
* Flash Quality is "High"
* Animation Speed is "90"
* Required Flash version is "7"
# Followed the color attached to alter the variables.
Save the script SWFObject1.js & Save the Flash file TagCloud1.swf
Right click the link and choose "Save As".
Then Host all the two files to your hosting site, for example to Google Group.
Even you can customize the tagcloud like this (second example) :
Feel free to ask me if you have any trouble and please post a comment in Vista-sg blog.
Also i attach this Flash Object and Embed Attributes if you want to learn (from Adobe).
Both object and embed:
•width - Specifies the width of the movie in either pixels or percentage of browser window.
•height - Specifies the height of the movie in either pixels or percentage of browser window.
object tag only:
•classid - Identifies the ActiveX control for the browser.
•codebase - Identifies the location of the Flash Player ActiveX control so that the browser can automatically download it if it is not already installed.
•movie (param) - Specifies the location (URL) of the movie to be loaded.
embed tag only:
•src - Specifies the location (URL) of the movie to be loaded.
•pluginspage - Identifies the location of the Flash Player plug-in so that the user can download it if it is not already installed. EMBED only.
Optional attributes and possible values:
The following attributes are optional when defining the object and/or embed tags. For object , all attributes are defined in param tags unless otherwise specified:
•id (attribute for object, object only) - Movie Identifier. Identifies the Flash movie to the host environment (a web browser, for example) so that it can be referenced using a scripting language.
•name (embed only) - Movie name. Identifies the Flash movie to the host environment (a web browser, typically) so that it can be referenced using a scripting language such as JavaScript or VBScript.
•swliveconnect - Possible values: true, false. Specifies whether the browser should start Java when loading the Flash Player for the first time. The default value is false if this attribute is omitted. If you use JavaScript and Flash on the same page, Java must be running for the FSCommand to work.
•play - Possible values: true, false. Specifies whether the movie begins playing immediately on loading in the browser. The default value is true if this attribute is omitted.
•loop - Possible values: true, false. Specifies whether the movie repeats indefinitely or stops when it reaches the last frame. The default value is true if this attribute is omitted.
•menu - Possible values: true, false.
•true displays the full menu, allowing the user a variety of options to enhance or control playback.
•false displays a menu that contains only the Settings option and the About Flash option.
•quality - Possible values: low, high, autolow, autohigh, best.
•low favors playback speed over appearance and never uses anti-aliasing.
•autolow emphasizes speed at first but improves appearance whenever possible. Playback begins with anti-aliasing turned off. If the Flash Player detects that the processor can handle it, anti-aliasing is turned on.
•autohigh emphasizes playback speed and appearance equally at first but sacrifices appearance for playback speed if necessary. Playback begins with anti-aliasing turned on. If the actual frame rate drops below the specified frame rate, anti-aliasing is turned off to improve playback speed. Use this setting to emulate the View > Antialias setting in Flash.
•medium applies some anti-aliasing and does not smooth bitmaps. It produces a better quality than the Low setting, but lower quality than the High setting.
•high favors appearance over playback speed and always applies anti-aliasing. If the movie does not contain animation, bitmaps are smoothed; if the movie has animation, bitmaps are not smoothed.
•best provides the best display quality and does not consider playback speed. All output is anti-aliased and all bitmaps are smoothed.
•scale - Possible values: showall, noborder, exactfit.
•default (Show all) makes the entire movie visible in the specified area without distortion, while maintaining the original aspect ratio of the movie. Borders may appear on two sides of the movie.
•noorder scales the movie to fill the specified area, without distortion but possibly with some cropping, while maintaining the original aspect ratio of the movie.
•exactfit makes the entire movie visible in the specified area without trying to preserve the original aspect ratio. Distortion may occur.
•align (attribute for Object) - Possible values: l, t, r, b.
•Default centers the movie in the browser window and crops edges if the browser window is smaller than the movie.
•l (left), r (right), t (top), and b (bottom) align the movie along the corresponding edge of the browser window and crop the remaining three sides as needed.
•salign - Possible values: l, t, r, b, tl, tr, bl, br.
•l, r, t, and b align the movie along the left, right, top or bottom edge, respectively, of the browser window and crop the remaining three sides as needed.
•tl and tr align the movie to the top left and top right corner, respectively, of the browser window and crop the bottom and remaining right or left side as needed.
•bl and br align the movie to the bottom left and bottom right corner, respectively, of the browser window and crop the top and remaining right or left side as needed.
•wmode - Possible values: window, opaque, transparent. Sets the Window Mode property of the Flash movie for transparency, layering, and positioning in the browser.
•window - movie plays in its own rectangular window on a web page.
•opaque - the movie hides everything on the page behind it.
•transparent - the background of the HTML page shows through all transparent portions of the movie, this may slow animation performance.
•bgcolor - [ hexadecimal RGB value] in the format #RRGGBB . Specifies the background color of the movie. Use this attribute to override the background color setting specified in the Flash file. This attribute does not affect the background color of the HTML page.
•base - . or [base directory] or [URL]. Specifies the base directory or URL used to resolve all relative path statements in the Flash Player movie. This attribute is helpful when your Flash Player movies are kept in a different directory from your other files.
•flashvars - Possible values: variable to pass to Flash Player. Requires Macromedia Flash Player 6 or later.
•Used to send root level variables to the movie. The format of the string is a set of name=value combinations separated by '&'.
•Browsers will support string sizes of up to 64KB (65535 bytes) in length.
I hope this will obviously explain How the Blogumus Works. Thank you.
My Last Post : Hack and Embed You Tube Video in Blog Post
end
Posts
