flShow tutorial

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.

This is my Carousel Slideshow working in a blog post.

It has been very hard to make it work... it took me more than one hour!
That's maybe because I'm note used to work with blogs.

(Some popup blocker may prevent plugins (including FlashPlayer) to open new windows. Even if these links are exactly like an html link with target _blank.

First of all you should choose, prepare and upload your images.
For my example I’ve chosen 3 photos of flowers. Their size is about 400x250 pixels. All of them are jpg files (I could have used png format as well).

I’m not an expert but I suppose that every Blog site has it own way to let you put images and other (SWF and XML) files on your blog. What is important is that you must be able to refer their URL whenever you want.
(I have noticed that WordPress.com does not allow you to upload SWF and XML. This prevents you to make the Carousel works.)

This blog is host on Splinder. I know it’s mainly for Italian users, but a girl asked me how to do this on Splinder so I’m doing my tests here. Any way, on Splinder you have a “Multimedia” area when you can upload images and other files. So I got into this area, I created an album (this is not required) and I put my photos there. On other blog servers there should be something analogous.

Now what is really tricky is that you upload a file with given name (e.g., flower1.jpg) and the blog server gives is the name it prefers and puts it in some unexpected location.
For example my first photo ends up at this URL:
http://files.splinder.com/c89691ce40a4d8c0f4c8a7f3a944a692.jpeg

It’s not always easy to figure out the exact URL of the file you just uploaded. One way that usually works is the following: try to include the picture/file in a post (there should be an automated way to do this, such as add image) and take a look at the source code of the post. The URL should be there: copy it and cancel the post.

(If it's not like this and your blog server/system let's you put a file wherever you want with the name you prefer then you’re lucky! It’s will be easier for you to get a Carousel on your blog.)

If you want to be sure that you found the exact URL try to paste it on the browser address bar: you must obtain your original photo. Just the photo and nothing else: if you are sent to a web page containing the photo this is NOT ok. Is it clear? Let’s see the difference:

This URL refers to a photo (cut and paste it in your browser address bar):
http://files.splinder.com/c89691ce40a4d8c0f4c8a7f3a944a692.jpeg
It’s ok.

This other one refers to a web page containing the photo:
http://www.splinder.com/mediablog/saveriocaminiti/media/14678672
It’s NOT ok.

Extra tips:
1. Firefox users can right click on an image and use “copy image address” to get its URL.
2. Splinder users (and probably many others): if you keep clicking on an image in your Multimedia area, you will reach a page when you can choose the image size, like this:
http://www.splinder.com/mediablog/saveriocaminiti/media/14678672/sizes
Here you can get URL for your original image and for several other thumbnails; you can use thumbs inside the carousel that link to big images when clicked (as I did).


Now we have a set of photos available to be referred and their exact URLs. We are ready for the next step.

Now you have to upload the Carousel.swf file.
If you don’t have it you can download the latest version of the Carousel from:
http://www.flshow.net/

On Splinder, inside the Multimedia area, you can upload any file you want, not just images. I hope your Blog server does the same. Well, I put the Carousel.swf on in the default album (something was wrong when I tried to put it in another album… maybe it was just my fault) and I used the post button to create a post with that file: this way (looking at the source) I got the URL of my file:
http://files.splinder.com/84e693d79cec08b0ede97ff6b18122f4.swf

If you copy and paste this URL into your browser address bar you will see a loading bar (maybe to fast to be noticed) and then an Input/Output error message. It must be like this because the Carousel is expecting to find a configuration XML file containing the list of images to load. We will make it in the next step.

Are you with me? Have you got the swf file on your blog server? Well, time for the next step.

Now we must create an appropriate configuration file. More infos on Carousel dokuwiki.
XML files must be edited with a plain text editor (such as Notepad, TextEdit, emacs, vi, etc.). Don't use word processors (like Microsoft Mord or WYSIWYG editors)

The first part of the file contains several options. You can change the background, interaction style, how do far images look, and how do reflexes images look. More info about these parameters will be available soon on the main site: this is not the place to discuss general options. Let me rather focus on the photo list.
Here you have a sequence of <photo> tags. This is the place where you must put all your photos URL.

I have uploaded 3 photos and their URLs are:
http://files.splinder.com/7b981c51754017fde851418e5c6581c4.jpeg
http://files.splinder.com/9e763d04b252f44be63e1af2d95fcc29.jpeg
http://files.splinder.com/0b1d21ec6f8c3d90168ea00d335d05cc.jpeg

(Advanced remark: these 3 URLs are not my original images. I exploited the fact that Splinder automatically makes thumbnails for me: I’m using small images inside the Carousel).

To have a very basic carousel it is enough to make the photo list look like this:

But this way, if you click on an image, nothing happens.
It would be better to add a link to each image. To do this, simply add an href (and optionally a target) to each <photo> tag just like you do with <a> tag in html.

So for example I can link the first photo to the image itself:

(Advanced remark: the URLs are different because I used the thumbnail image to link to the original size one)

The second photo may link to the Splinder page containing it:

And the third one link to a Google search for my name:

(Advanced remark: notice that in XML you MUST escape & even inside tag values)

I’ve always used target="_blank", to open links in new windows. If your popup blocker complains about opening a new window from a flash movie, it is my opinion that you should configure your popup blocker better; otherwise it will prevent almost any action requested from a flash movie.

This is how my xml file looks like:
http://files.splinder.com/4371f0355b505dabf318133619abe41e.xml
Is your like mine? Good. Upload it on your blog and obtain its URL (exactly as we did for the swf file).

We are close to the end. Next step will be the last one.

This is the last step: make a post with the Carousel.

First of all recall that the Carousel.swf has been uploaded and its URL is:
http://files.splinder.com/84e693d79cec08b0ede97ff6b18122f4.swf

And the URL of the XML configuration file is:
http://files.splinder.com/4371f0355b505dabf318133619abe41e.xml

Now, here on Splinder, when you are editing a post there is a button to add a flash object. Using this button and providing as information the Carousel.swf URL and 450x300 as size I've got the following code (you must look at the HTML code of your post):


There several ways to include flash objects in an html pages, some makes use of <object> tag rather than <embed>, other uses JavaScript. Let's keep this tutorial as simple as possible and accept the code that Splinder generate for us.

The only information that is missing now is the configuration XML file. The way you are supposed to provide the URL of this file to the carousel is by means of flashvars. This is a simple additional parameter that you should put inside the <embed> tag.
The syntax is the following:
flashvars="xmlfile=yourXMLfileURL"

The result looks like this:


That's it.
Enjoy.