XML Flash Slideshow Documentation

XML Flash Slideshow Setup

Your download includes everything you need to create a stand-alone flash slideshow or a slideshow to add to your html pages. You do not need the Flash Authoring Software.

Step1 – Prepare Images

Size your images to the maximum size that you want them to appear in the slideshow. Save your images in JPG format into the images folder. Make sure the JPG’s are saved as non-progressive JPG’s.

Step 2 – Add Images To XML

Open slideshow.xml using a text or html editor. Avoid using word processing software. This is a simple text file that tells the slideshow which images to use, what are the captions and links for each and in what order they should be displayed. It is also used to customize the way the slideshow looks and behaves. To see the structure click here.

At the top, right after the <slideshow opening tag is a list of attributes that are used to define how the slideshow will look and behave. See chart below for a description of each.

Each image in the slideshow is represented by a <image /> node. Attributes img, link, target, tooltip and caption correspond to the JPG, link, target of link, and the caption that will appear in the slideshow. There is no limit at to the number of images that the slideshow can display. Create a tag for each image you want to display in the slideshow. Here’s an example of a properly formatted tag:

<image img="images.jpg" link="http://yoursite.com" target="_blank" caption="Custom caption" tooltip="tooltip text" />

Note:
If you omit the caption attribute, the caption will not show up. If you omit the link attribute, the image will not be clickable, etc.

Step 3 – Test and Upload

Test the slideshow by loading slideshow.html in the browser. Now upload the following files to your server: slideshow.html, slideshow.swf, slideshow.xml, flashdetect.js, and the images folder. That’s it!

 

Customizing The Slideshow Using XML

Open slideshow.xml using a text or html editor. Each name/value pair represents a setting in the slideshow. The following is a table of descriptions and sample values.

Attribute with sample value Description
displayTime="5" Time in seconds each image stays on.
transitionSpeed="1.5" Speed of transitions in seconds
transitionType="Wipe"

Type of transition. Possible value include:
"Iris"
"Blinds"
"Fade"
"Photo"
"Squeeze"
"PixelDissolve"
"Wipe"
"Zoom"

Best way to get a feel for which is which, is to play around with this setting a bit.

motionType="Strong" Type of motion to be applied to transition. Possible values include:
"Back"
"Bounce"
"Elastic"
"None"
"Regular"
"Strong"

Strong and Regular are probably the most useful, but there might be circumstances in which you would need to use the others. Play around to get a feel for each.
motionEasing="easeOut" Type of easing to be applied to transitions. Possible values include:
"easeIn"
"easeOut"
"easeInOut"

This setting will make transition slow down toward the beginning, end or both.
randomize="false" Setting to true will shuffle the order of images
slideshowWidth="435" Width of slideshow. Set to "auto" to use Stage.width
slideshowHeight="300" Height of slideshow. Set to "auto" to use Stage.height
slideshowX="center" Horizontal position of slideshow. Can be a number or the word "center"
slideshowY="0" Vertical position of slideshow. Can be a number or the word "center"
bgColor="FFFFFF" Background color of slideshow
bgOpacity="100" Background opacity
showHideCaption="false" Set to true to automatically hide captions on roll out and show on roll over. "false" will keep them shown at all times.
captionBg="FFFFCC" Caption background color
captionBgOpacity="60" Caption background opacity
captionTextSize="14" Size of text
captionBold="false" Set to true to make captions bold
captionTextColor="666666" Color of text
captionPadding="15" Padding around captions
showNav="true" Set to false to hide navigation at all times.
autoHideNav="true" Assuming showNav is set to true, setting autoHideNav to true will fade the navigation after the user has rolled off and a short pause has passed
navHiddenOpacity="20" Opacity of nav when autoHidden
navX="center" Horizontal position of nav. Set to a number or "center"
navY="200" Vertical position of nav. Set to a number or "center"
btnColor="FFCC00" Default color of buttons in nav
btnHoverColor="ffffff" Color of buttons when rolled over
btnShadowOpacity="70" Opacity of the shadow of buttons
btnGradientOpacity="20" Opacity of gradient covering buttons
btnScale="120" Scale of buttons from original size
btnSpace="10" Space between buttons
navBgColor="333333" Background color of nav
navBgAlpha="95" Background opacity of nav
navCornerRadius="20" Roundness of nav corners
navBorderWidth="2" Thickness of border around nav
navBorderColor="FFFFFF" Color of border around nav
navBorderAlpha="100" Opacity of border around nav
navPadding="15" Space between buttons and border of nav
tooltipSize="11" Text size of tooltip
tooltipColor="ff7f00" Color of tooltip text
tooltipBold="false" Set to true to make tooltip text bold
tooltipFill="FFFFFF" Background color of tooltip
tooltipStrokeColor="000000" Tooltip border color
tooltipFillAlpha="80" Tooltip background color
tooltipStroke="3" Tooltip border thickness
tooltipStrokeAlpha="100" Tooltip border opacity
tooltipCornerRadius="5" Roundness of tooltip corners
loaderWidth="150" Width of loading bar
loaderHeight="5" Height of loading bar
loaderColor="FF0000" Color of loading bar
loaderOpacity="100" Opacity of loading bar
attachCaptionToImage="false" Set to true will make captions same width as image
cropImages="false" This attribute is no longer used. Leaving it in will not hurt the slideshow.
imageScaling="fill" Controls scaling of images. Accepts the following values:
fit – scales image proportionately up or down to fit the slideshow area
fill - scales image up or down to proportionately fill slideshow area
downFit – scale images down to fit. If images are smaller than slideshow area, they are not scaled up
downFill – scale images down to fill. If images are not big enough to fill, they are not scaled up.
stretch – stretches imges to fill slideshow area
none – no scaling is applied.
slideshowMargin="20" Number of pixels between image and edge of the slideshow
showMusicButton="true" Set to true to display music button in navigation if music is defined
music="images/music.mp3" Location of mp3 music file to be used in slideshow. If not defined, no music will play and no music icon will appear in navigation.
musicVolume="100" Volume of music
musicMuted="true" Set to true to start slideshow with sound off. Users will still be able to turn the sound on if you display the navigation and the sound button.
musicLoop="true" Set to true to loop the music.
watermark="logo.swf" Define an external image to be loaded on top of the slideshow. This can be a logo or a watermark at a set opacity. You can use a jpg image or a .swf flash movie.
watermarkX="left" Horizontal location of watermark. Can be set to: "left", "center", "right" or a number.
watermarkY="bottom" Vertical location of watermark. Can be set to: "top", "middle", "bottom" or a number
watermarkOpacity="100" Opacity of watermark
watermarkLink="http://flashnifties.com" You can link the watermark to a url. Set full url, including http://
watermarkLinkTarget="_blank" Target of the watermark link.
captionsY="abstop" Vertical placement of captions. Can be set to:
"top" – top of image
"middle" – middle of slideshow
"bottom" – bottom of image
"abstop" – top of slideshow
"absbottom" – bottom of slideshow

Play around with the above settings to achieve the desired style for your slideshow.

 

Using Auto Option

In some cases you just don’t want to bother with XML, and would rather drop a bunch of images in a folder and have them appear in the slideshow. Well, you’re in luck! Follow the steps below and you won’t have to look XML in the face again.

Step 1
You will need to download this file: auto.zip

Step 2
Unzip the file and open auto.php.  At the very top set $file_dir to the directory you want the gallery to read from.  There are a couple of other options:
$show_titles will allow you to display image titles as captions (without the .jpg)
$omit_chars allows you to set the number of characters to be omitted from the beginning of the image title.  So, 01_image_title.jpg will show up as  "image_title" in the caption.  Useful for sorting.
$link_to_image lets you link each slide to the image directly.

You can also adjust the slideshow settings just as you would in slideshow.xml. Change any of the settings starting with displayTime="3" and ending with pausedAtStart="false". If you made adjustments to your slideshow.xml, you can copy/paste the settings from there.

Step 3
In your slideshow.html change the following line:
so.addVariable("file", "slideshow.xml");
to:
so.addVariable("file", "auto.php");

Step 4
Now you will need to upload everything to a server that supports php (most do).  The gallery will not work on your local computer.

This method makes things considerably easier to update, but there are sacrifices. You will not be able to set any custom settings for each slide, such as captions, tooltips, links or transitions.

 

Using HTML in captions and tooltips

The slideshow allows you to custom style each individual caption and tooltip with html tags. If you do not include any html tags, the default style will be applied, however if you want to use html formatting, you will need to create a font style for the entire caption or tooltip, otherwise it will be defaulted to black 12 point text.

HTML tags must be escaped!

If you do not properly escape the < , > and " characters, the slideshow will not work. The download includes some examples of html formatted text. Here is a handy utility you can use to convert your html code to escaped text that can be used in captions:

Oops!

It looks like you don’t have flash player installed. Click here to go to Macromedia download page.

 


Setting up iPhone version

The slideshow comes with a javascript/php version that runs on a mobile device such as an iphone or iPad. If a user does not have a flash-enabled device, a link to the slideshow is displayed in place of flash. If you are using the basic setup, you should not need to make any modifications for the iPhone slideshow to work. The slideshow reads all the content from slideshow.xml, and creates all the appropriate image sizes.

If you change your file structure or rename the xml file, you will need to set the right paths for the iPhone version.

Inside the iphone/ folder, find _config_pipho.php and open it in an html editor. At the very top you’ll see two settings that you should consider:

define(‘CONTENT_XML’, ‘../slideshow.xml’);
This sets the path for your slideshow.xml file relative to the iPhone folder. If you move the folder, you should adjust this accordingly.

define(‘BASE_URL’, ‘../’);
This is the text added to all of the image paths when viewing the iphone version. Again, this needs to be relative to the iphone/ folder.

NOTE: iPhone gallery requires PHP 5 with GD graphic library support.

 


Adding iPhone slideshow to older slideshow

Follow these steps to add iPhone support to an earlier release of the slideshow without losing any of your settings or content.

1. Download latest release and unzip the files.

2. Copy over the iphone/ folder into your slideshow folder.

3. On the page where your slideshow appears add a link to the iPhone slideshow. In the source code change:

<div id="flashcontent">
<h3>Oops!</h3>
<p>It looks like you don’t have flash player 6 installed. <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=
ShockwaveFlash" >Click here</a> to go to Adobe download page.
</p>
</div>

to:

<div id="flashcontent">
<a href="iphone/index.php" class="iphoneBtn">Launch iPhone Slideshow</a>
</div>

If your file structure is different from the default setup, make necessary path adjustments outlined above.

 

 

Free Package

Want to try before you buy? Free version has all the functionality, but includes a small link to this site.

Download

Paid Package

Use a credit card or PayPal. Download will start immediately after purchse. You’ll also receive an email with the download link.

Price: $10

Purchase

Nifty Products

About Flash Nifties

Flash Nifties is a collection of flash components and tools designed to take the pain out of creating rich interactive presentations. These robust flash tools can be set up in minutes, and most have a fully functional free download, so you can give them a try without putting up any cash. Enjoy!

Testimonials

"Masterfully executed!"

I would like to say that you have done an amazingly great job! Masterfully executed! Throughly designed! Perfect in every way. Thank you so much for offering a photo gallery that works like a photo gallery should.

Steve Nyhof (Auto flash gallery)

"Can't say enough good things"

Just bought your product and i can't say enough good things about it. I'm not the most proficient flash user, which is part of the reason i got this product...to help a project.

Sandlog (Flash Media Gallery)

"All I could have asked for an more"

I've used your xml flash gallery just a couple of days, but I was so impressed that I just had to give you props. This is all I could have asked for an more. Thanks!

Todd D. (XML flash gallery)

more testimonials