Flash Slideshow Plus Documentation

XML Flash Slideshow Plus Setup

How to set up Flash Slideshow Plus

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. For each image you only have to set the img attribute, all other settings are optional. Create a tag for each image you want to display in the slideshow, and make sure that each image begins with <image and ends with />. Here’s an example of a properly formatted tag with all the possible options:

<image
img="images/image.jpg"
link="http://yoursite.com"
target="_blank"
caption="Custom Caption "
tooltip="Tooltip Text "
displayTime="5"
transitionSpeed="1"
transitionType="Fade"
motionType="None"
motionEasing="easeInOut"
videoPreviewTime="1"
audio="music.mp3"
kenBurnsEffect="zoomIn"
/>

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!

 

Playing Video

Adding videos to the slideshow is as simple as adding images – just enter the path to your .flv flash video in the img attribute of the image node. Here’s an example of a video XML node:

<image img="videos/video.flv" />

If your slideshow is paused, you can set each video to display a specific frame while it’s paused. This is useful because many videos start with a black screen, and it’s nice to display a preview of the video. By setting videoPreviewTime=1 your video will display a frame 1 second from the beginning. When a user clicks play, it will still play form the beginning. You can control the video using the same buttons as images. You can play/pause, skip to the next or previous, and mute the videos.

 

Going Full Screen

This slideshow allows your viewers to browse your pictures and videos in full screen mode. The demo file is all set, but you are planning to add the slideshow to your own page, you’ll need to make sure that you enable full screen in html. To do this, you need to set allowFullScreen parameter to true in the flash embed tag. Using swfObject, it looks like this:

<div id="flashcontent" >no flash message</div>
<script type="text/javascript">
var so = new SWFObject("slideshow.swf", "gallery", "100%", "100%", "6", "#333333");
so.addParam("allowFullScreen", "true");
so.addVariable("file", "slideshow.xml")
so.write("flashcontent");
</script>

 

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"
"Fly"
"random"

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
captionTextAlign="left"
Alignment of the captions. Can be: "left", "center" or "right"
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 the following:"center", "left", "right"
navY="bottom" Vertical position of nav. Set to a number or the following:"center", "top", "bottom"
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
FullScreenButtonScale="60" Size of the full screen button
FullScreenButtonX="right"
Horizontal position of the full screen button. Can be set to "left", "center", "right" or a number of pixels from left.
FullScreenButtonY="bottom" Vertical position of full screen button. Can be set to "top", "center", "bottom" or a number of pixels from top.
showFullScreenButton="true" Set to "false" to hide full screen button.
btnSpace="10" Space between buttons
navBgColor="333333" Background color of nav
navBgAlpha="95" Background opacity of nav
navCornerRadius="5" 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
navMargin="10" Space between the navigation and the edge of the slideshow
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
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 images 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
loopSlideshow="true"

If set to false, the slideshow will stop on the last image
disableBackwardLoop="true"

If set to false, users will not be able to go back from the first image.
startPaused="false"
Set to true to start the slideshow in paused mode
kenBurnsEffect="pan"
Defines the type of Ken Burns effect that the slideshow will use. Can be set to:
"none" – No Ken Burns effect
"random" – No Ken Burns effect
"zoomIn" – Images start smaller and zoom in
"zoomOut" – Images start bigger and zoom out
"zoomInOut" – Alternate between zooming in and out
"zoomRandom" – Randomly zoom in and out
"pan" – Randomly pan diagonally
"panRight" – Pan from left to right
"panLeft" – Pan from right to left
"panLeftRight" – Alternate between left and right pan
"panRightLeft" – Alternate between right and left pan
"panUp" – Pan from down up
"panDown" – Pan from up down
"panUpDown" – Alternate between up and down pan
"panDownUp" – Alternate between down and up pan
kenBurnsEffectAmount="0.1"

Determines the amount of motion. A setting of 0.1 will scale the image by 110% and move by the amount of slack created by the scaling. 0.9 will scale the image by 190%, etc.
preloadBuffer="5" The slideshow preloads slides to ensure smooth viewing. This number determines how many slides ahead of the user the slideshow should load.
showSlideNumbers="true"
Set to true to display slide numbers. Slide numbers can be clicked to go directly to that slide.
slideNumbersTextSize="11"
Text size of slide numbers.
slideNumbersTextColor="FFFFFF"
Text color of slide numbers.
slideNumbersTextActiveColor="0099CC"
Text color when slide is active.
slideNumbersBgColor="000000"
Background color of slide numbers.
slideNumbersBgOpacity="50"
Background opacity of slide numbers.
slideNumbersBgActiveColor="000000"
Background color of active slide number.
slideNumbersBgActiveOpacity="100"
Background opacity of active slide number.
slideNumbersBgCornerRadius="0"
Roundness of slide numbers background.
slideNumbersMargin="5"
Space between the numbers.
slideNumbersX="left"
Horizontal placement of slide numbers. Can be set to:
"left", "right", "center" or a number in pixels from left.
slideNumbersY="bottom"
Vertical placement of slide numbers. Can be set to:
"top", "middle", "bottom", or a number in pixels from top.
slideNumbersNavPadding="5"

Space between the slide numbers and the edge of slideshow.
slideNumbersBgWidth="22"
Width of individual number boxes.
slideNumbersBgHeight="20"
Height of individual number boxes.
slideNumbersTextX="2"
Number text horizontal position within box
slideNumbersTextY="0" Number text vertical position within box
   
videoPreviewTime="1" When slideshow is paused, video slides show a preview frame. This sets seconds into the movie, for the preview.
getPageOnComplete="http://yoursite.com" This slideshow allows you to send the user to a url upon completion. Omit this tag if you want to keep the user on the page(default setup).
getPageOnCompleteWindow="_blank" Target of the link for above setting.
useCustomUI="true" Set to "true" to use custom buttons.
customBack="back.png"
customBackHover="back_hover.png"
customNext="next.png"
customNextHover="next_hover.png"
customPlay="play.png"
customPlayHover="play_hover.png"
customPause="pause.png"
customPauseHover="pause_hover.png"
customMute="mute.png"
customMuteHover="mute_hover.png"
customUnMute="unmute.png"
customUnMuteHover="unmute_hover.png"
customFullScreen="full_screen.png"
customFullScreenHover="fs_hover.png"
customExitFullScreen="extfs.png"
customExitFullScreenHover="extfs_h.png"
Path to the images for custom navigation. Sample images and .psd file provided in download.


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

 

Using Auto Option

Getting Slideshow to load content automatically.

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:

Flash Player 7 required

Click here to go to Adobe 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: $20

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