Monday, October 27, 2008

Welcome

Have you checked out my Free Flash Slideshows? Still not? What are you waiting for?

http://www.flshow.net/

Don't comment on this blog, I do not maintain it: it is just a tutorial.

Example

This is my Carousel Slideshow working in a blog post.

This example has been tested with IE 7, FireFox 3, Opera 9, Chrome beta.

How to - Introduction

This is a step by step guide to include my Carousel in your Blog/Forum/CMS post.

If your Blog/Forum/CMS platform allows you to upload any file format (like swf, xml, jpg, png), please refer to http://ffss.splinder.com/.

For more info refer to Blog, Forum, and CMS on the flShow dokiwiki.

All you need is:
- a web space to publish your images, the Carousel and the xml configuration file;
- the ability to included a simple Flash file in your post (provided that your Blog/Forum/CMS platform allows you to do this!).

How to - Step1

Publish your photos

I have a web space here:
http://www.dsi.uniroma1.it/~caminiti/
This is my homepage at my istitution; you can use any web space.

I created a folder called carousel4blogger inside my personal folder and I uploaded 3 images there:
http://www.dsi.uniroma1.it/~caminiti/personal/carousel4blogger/me1.jpg
http://www.dsi.uniroma1.it/~caminiti/personal/carousel4blogger/me2.jpg
http://www.dsi.uniroma1.it/~caminiti/personal/carousel4blogger/me3.jpg

How to - Step2

Setup a Carousel

I downloaded the Carousel: I got the template with white background.

I edited default.xml to let the Carousel use my images. My xml file is this:

<slide_show>
  <options>
    <background>#FFFFFF</background>    <!-- #RRGGBB, transparent -->
  </options>
  <photo>http://www.dsi.uniroma1.it/~caminiti/personal/carousel4blogger/me1.jpg</photo>
  <photo>http://www.dsi.uniroma1.it/~caminiti/personal/carousel4blogger/me2.jpg</photo>
  <photo>http://www.dsi.uniroma1.it/~caminiti/personal/carousel4blogger/me3.jpg</photo>
</slide_show>

I uploaded default.xml, and Carousel.swf in the very same folder where i put all images.

With the solely purpose of testing, I also uploaded intext.html and swfobject.js. You can check the result.

For more information on Carousel configuration and options please refer to the flShow dokuwiki.

How to - Step3

Now I simply added the Carousel.swf to one of my posts, using it's complete url:

http://www.dsi.uniroma1.it/~caminiti/personal/carousel4blogger/Carousel.swf

The way/code you should use strictly depends on the Blog/Forum/CMS platform you are using.

Here, on blogger, I used the following code:

<object width="450" height="250" type="application/x-shockwave-flash" data="http://www.dsi.uniroma1.it/~caminiti/personal/carousel4blogger/Carousel.swf"><param name="movie" value="http://www.dsi.uniroma1.it/~caminiti/personal/carousel4blogger/Carousel.swf" /><param name="bgcolor" value="#FFFFFF" /></object>

Notice that the swf file name is reported twice. Also notice that I wrote this code in the HTML code mode; the system may interfere with your code adding undesired line breaks (<bg> tags): pay attention.