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:
Sorry, I cannot display the flash slidehsow for one of the following reasons.
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.
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!
*
Remember to select the pasted code and either choose “Format > Ignore Formatting” from the RapidWeaver menu, or press “⌘ + .”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