Flash Slideshows Within Blog Entries
When I wrote my short review of the Besta TA-3000 Electronic Chinese-English Dictionary, I wanted to show readers how easy it is to handwrite characters. The ideal way to do this was to use a Flash Slideshow, so that is just what I did:
Example of entering a Chinese character into the dictionary:
1. Your browser does not support Javascript.
2. If you are using RapidWeaver, please make sure your theme is using the most up-to-date version of the javascript include file.
Better than a textual description, right?
If you’d like to learn how to do this, read on.
You’ll need the “swfobject.js” for this to work. You can get it here (right click to download).
1) Create a RapidWeaver Photo Album page. Select the album that you wish to use for this slideshow.
2) Open the Page Inspector, select the “Page” tab. Check “Use Flash Slideshow”. Check “Scale Image” and set the size you wish the slideshow to be. Still in the “Page” section, select the “Flash Slideshow tab. Uncheck “Controls”, “Info”, “Activate on Rollover” and “Link to Large Images”. Set “Scale Images” to “Scale to Fit”. set slideshow size.
3) Export the page and open the folder in Finder. Open your FTP program and create a folder to hold the slideshow files. I created mine in my blog directory, but it doesn’t really matter where you put yours. Upload all the files to this new folder. Open the “slideshow.swf” file in your browser. It will probably fill the whole page, but it should be working. An example.
While you’ve got your FTP program open, upload the “swfobject.js” file. Note the URL leading to the file.
4) In the Page Inspector, select the “General” tab. Uncheck both “Enabled” and “Show in Menu”.
5) Go to your Blog page and open the Page Inspector again. This time select the “Header” tab, within that select “Header”. Into this field you’ll need to paste* the following:
<script type="text/javascript" src="PATH_TO/swfobject.js"></script>
Change “PATH_TO” to the path to the file.
6) Where you want the slideshow to appear, paste* the following:
<div id="UNIQUE_ID">
Sorry, I cannot display the flash slidehsow for one of the following reasons.<br />
1. Your browser does not support Javascript.<br />
2. If you are using RapidWeaver, please make sure your theme is using the most up-to-date version of the javascript include file.<br />
</div>
<script type="text/javascript">
var so = new SWFObject("PATH_TO_SLIDESHOW/slideshow.swf", "mymovie", "320", "240", "6", "#ffffff");
so.addParam("quality", "high");
so.addParam("wmode", "transparent");
so.addParam("base",".");
so.write("UNIQUE_ID");
</script>
PATH_TO_SLIDESHOW should be changed to the full URL leading to the “slideshow.swf” file.
UNIQUE_ID should be a unique name, that no other object in the page is likely to contain.
7) Upload the changes to your Blog page, check to make sure it worked.
If you ran into problems, or notice an error in the tutorial, please let me know by leaving a comment or sending me an email.
Of course, if everything worked perfectly, I’d like to hear about it as well!
Always do this when pasting code. Always.
If you don’t do this, there is a good chance that the code will break. Always do this!
As an added precaution, open the Page Inspector, go to the “General” tab and choose “Output: Default”. This will stop RapidWeaver from inadvertently breaking PHP or HTML code.
Scroll to top
Roy's Wordpress Cumulus Tag Cloud in Rapidweaver!
-> Revised (23/09/08) <-
MAJOR UPDATE: This tutorial has been updated to work with the new version (1.14) of Roy's Cumulus Tag Cloud. The embed script has changed significantly. If you had trouble with the last version, give this one a try - it has been improved a lot!
If you scroll down and look left, beneath the menu you’ll see a new addition to the page.
I’ve managed to find a way to integrate Roy’s awesome tag cloud plugin with Rapidweaver’s blog page.
And now that you’ve seen it, I figure you’ll want it too - and this is how to do it:
Note: requires php - will NOT work on .Mac.
This tutorial has been written with the “code-phobic” in mind. It may bore you with details that you feel are obvious. If so, just skim read until you find the parts that interest you. I’ve included screenshots of various steps in the process - to view the full size images, just click on the thumbnail of each image. The image will load on top of this page.
If you feel that this tutorial is too complicated, or you run into any problems, please let me know by posting a comment below.
As long as your server has PHP, I am confident that you/we will be able to get this beatiful tag cloud going.
3) Download the tag cloud file pack here. This It contains a snippet that is used to insert the cloud, the swf file, "swfobject.js" and “cloud_creator.php”, that gets tag information.
0x333333
to any hex colour. I use The RGB Colour Calculator to get my hex values.
For example, from:
<script type="text/javascript" src="http://pagesofinterest.net/mikes/swfobject.js"></script>
<? include('http://pagesofinterest.net/mikes/blog_of_interest_files/cloud_creator.php'); ?>
To:
<script type="text/javascript" src="PATH_TO/swfobject.js"></script>
<? include('PATH_TO/cloud_creator.php'); ?>
12) Publish your page - you’re done!
13) With the updated version of the flash file, there are a few extra options worth mentioning:
so.addVariable("tspeed", "100");
so.addVariable("distr", "true");
The first controls the speed of rotation. Increase it for faster rotation, decrease it for slower. I use slower rotation for bigger clouds, and faster for smaller to be best.
The second tells the cloud whether to attempt to spread the tags out evenly throughout the sphere. Change "true" to "false" to disable this (why would you want to disable it? I don't know).
Thanks for reading - if you like this tag cloud, head over to Roy's Site and let him know!
It has been brought to my attention that some hosts do not allow standard use of the “include(‘URL’)” function. If you get a message that looks similar to this:
Warning: include() [function.include]: URL file-access is disabled in the server configuration in /a/path/to/a/domain.com/index.php on line XX
In your "include" parts (there are two, one in the snippet, one that gets pasted in the header in step 11), instead of using this (with paths changed to suit your site):
<?php include("http://pagesofinterest.net/cumulus_test/blog/cloud_creator.php"); ?>
Do this (changing the paths to suit your site):
<?php include($_SERVER['DOCUMENT_ROOT']."/files/cloud_creator.php"); ?>
The $_SERVER['DOCUMENT_ROOT'] asks the server for the path to the current file, ."/files/cloud_creator.php" appends the path to the file we want.
The snippet's include should look something like:
<?php include($_SERVER['DOCUMENT_ROOT']."/files/cloud_file.html"); ?>
When you get it working, or get stuck - I want to know! Leave a comment and I’ll respond as soon as I am able.
Email
delicious
Digg
Reddit
Newsvine
Furl
Google
Stumble
HaoHao(0 Comments)
Scroll to top