Creative Clans Slide Show v1.1 – User guide

The following documentation is included in the package you can download as well.

Installation

1. Download the latest version of the product from the Creative Clans website (http://www.creativeclans.nl)
2. Unzip the package in a folder on your computer
3. Upload the CCSlideShow folder to your site
4. Copy the code in the index.html example file in the package, and paste it into your page’s code
5. To modify the look and feel of the slide show, and to get it to show YOUR slides, read the rest of this document

Show my slides (the beginning)

1. Put your images online in the ‘images’ subfolder of the ‘CCSlideShow’ folder
2. Edit the CCSlideShow.xml in the ‘CCSlideShow’ folder (a detailed explanation of the slides xml document follows further down)

Since the html code and the config xml document included in the package are set up to work with the folder structure present in the package, it should work without a problem.

If you want to change something (for example save the images in another folder, or change the name of the xml documents), you’ll have to set some parameters. Keep reading to learn about it.

CCSlideShow.xml

Contains the info of the slides. The structure must be that of the CCSlideShow.xml included in the package you downloaded. Just make a copy and edit it.
For each slide, you have to provide three tags: itemName, itemCaption and itemLink. None of them has to contain any data, but they have to be present.

itemName: The name of the slide. Not used by the slide show, it’s for your own convenience.
itemCaption: Shown as caption by the slide show (unless you switch captions off).
itemLink: If links are enabled, clicking on the slide will open a new window with the page defined in this tag. If no link is inserted, no window will be opened. If a link is defined in the config xml document (see further down), that link will override the links defined in this document for the single slides.

CCSlideShowConfig.xml

Contains the parameters that set the look and feel of the slide show. The structure must be that of the CCSlideShowConfig.xml included in the package you downloaded. Just make a copy and edit it.
You only have to include the parameters you want to give a non-default value. All parameters that are missing in this document will be set to their default value.

Example:

<parameter name="backgroundColor">0xB5B5B5</parameter>

Parameters:

backgroundColor
Background color 
Value has to be in the format 0xXXXXXX 
Default: 0xFFFFFF (white)

loops
Number of loops 
Value has to be numeric
Value 0 means infinite loops
Default: 0

effectTime
Duration of the transition effect between slides (in seconds)
Value has to be numeric 
Default: 1

wait
Time the slide is shown (in milliseconds)
The waiting starts at the end of the transition effect
Value has to be numeric 
Default: 3000 (3 seconds)

includeEffects
List of transition effects to be used (separated by comma, no spaces (!))
Example: fadein,fadeout
(if you want to use all available effects, omit this parameter of leave it empty)
Possible values: see further down
Default: empty

excludeEffects
List of transition effects not to be used (separated by comma, no spaces (!))
(if you want to use all available effects, omit this parameter of leave it empty)
Possible values: see further down  
Default: empty

stopOnMouseOver
If ‘yes’, the slide show is paused while the mouse hovers over the slideshow
Possible values: yes, no  
Default: no

enableLinks
If ‘yes’, clicking on the slide will open the link defined in the link parameter,
or, if that doesn’t have a value, the link defined for each slide in CCSlideShow.xml
Possible values: yes, no
Default: no

link
If used, it replaces the link defined for each single slide in CCSlideShow.xml
Default: empty

path
Contains the path (relative or absolute) to the slides folder, WITH the final slash
Default: images/

order
Order in which the slides are shown
Possible values: forward, backward, random
Default: forward

slides
Number of slides to be shown
Value has to be numeric
Value 0 means all slides
Is used when Order is random
Default: 0

borderStyle
Possible values: none, solid, blurred 
Default: none

borderColor
Is used when Border style is solid or blurred
Value has to be in the format 0xXXXXXX 
Default: 0×000000 (black)

borderThickness
Border thickness in px
Is used when Border style is solid or blurred
Value has to be numeric 
Default: 1

borderAlpha
Border transparancy value
Is used when Border style is solid or blurred
Value has to be numeric from 0 to 1.0 
Default: 1.0

captionStyle
Possible values: none, fixed, hide (appears when the mouse hovers over the slide)
Default: none

captionType
Is used when Caption style is fixed or hide
Possible values: text, image 
Default: text

captionImage
Is used when Caption style is fixed or hide, and Caption type is image
Has to contain the relative or absolute path to the image to be used 
Default: empty

captionBackgroundColor
Is used when Caption style is fixed or hide, and Caption type is text
Value has to be in the format 0xXXXXXX 
Default: 0×000000 (black)

captionColor
Caption text color
Is used when Caption style is fixed or hide, and Caption type is text
Value has to be in the format 0xXXXXXX 
Default: 0xFFFFFF (white)

captionText
Is used when Caption style is fixed or hide, and Caption type is text
If used, it replaces the caption text of the single slides set in the slides xml document
Default: empty

captionTextRightMargin
Is used when Caption style is fixed or hide, and Caption type is text
Has to be a numeric value
Default: 0

captionTextLeftMargin
Is used when Caption style is fixed or hide, and Caption type is text
Has to be a numeric value
Default: 0

captionTextBottomMargin
Is used when Caption style is fixed or hide, and Caption type is text
Has to be a numeric value
Default: 0

captionTextFont
Is used when Caption style is fixed or hide, and Caption type is text
If the font doesn’t exist, the default flash font (Times New Roman) will be used
Default: Times New Roman

captionTextFontSize
Is used when Caption style is fixed or hide, and Caption type is text
Default: 12

captionBackgroundAlpha
Caption background transparancy value
Is used when Caption style is fixed or hide
Value has to be numeric from 0 to 1.0 
Default: 1.0

captionPosition
Is used when Caption style is fixed or hide
Possible values: top, bottom, offset 
Default: top

captionHorizontalOffset
Is used when Caption position is offset
Value has to be numeric
Default: 0

captionVerticalOffset
Is used when Caption position is offset
Value has to be numeric
Default: 0

Transition effects

- none
– fadeout
– fadein
– upout
– upin
– downout
– downin
– leftout
– leftin
– rightout
– rightin
– leftupout
– leftupin
– rightupout
– rightupin
– rightdownout
– rightdownin
– leftdownout
– leftdownin
– shrinkleftup
– growleftup
– shrinkleftdown
– growleftdown
– shrinkrightup
– growrightup
– shrinkrightdown
– growrightdown
– shrinkcenter
– growcenter

Show my slides (advanced)

The most basic configuration is the following:

<folder> (folder that contains the page)
  page.html (or .php)
  CCSlideShow.swf
  CCSlideShow.xml
  CCSlideShowConfig.xml
  <images> (contains the images)

In this case, the following code in the html will include the slide show:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
  codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
  width="300" height="225">
  <param name="movie" value="CCSlideShow.swf" />
  <embed src="CCSlideShow/CCSlideShow.swf"
         type="application/x-shockwave-flash"
         pluginspage="http://www.macromedia.com/go/getflashplayer"
         width="300" height="225" />
</object>

Also, there’s no need to set the folder in the config xml document (the default value is ‘images/’).

When, however, you want to change something in the folder structure, you’ll need to make some changes in the html (when the .swf and/or the xml documents aren’t in the same folder as the html/php page and/or have a different name) and/or the config xml document (when the images are stored somewhere different from the ‘image’ subfolder).

Example 1 : Slide show in a subfolder

If you don’t want to put the slide show flash object in the same folder as the page that calls it, you’ll have to point to it. The path has to point to it starting from the page that calls it. This is the configuration in the package you downloaded.

<folder> (folder that contains the page)
  page.html (or .php)
  <CCSlideShow>
    CCSlideShow.swf
    CCSlideShow.xml
    CCSlideShowConfig.xml
    <images> (contains the images)

The html code:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
        codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
        width="300" height="225">
  <param name="movie" value="CCSlideShow/CCSlideShow.swf" />
  <param name="FlashVars" value="config=CCSlideShow/CCSlideShowConfig.xml&slides=CCSlideShow/CCSlideShow.xml" />
  <embed src="CCSlideShow/CCSlideShow.swf"
         type="application/x-shockwave-flash"
         pluginspage="http://www.macromedia.com/go/getflashplayer"
         width="300" height="225"
         FlashVars="config=CCSlideShow/CCSlideShowConfig.xml&slides=CCSlideShow/CCSlideShow.xml" />
</object>

There are 2 differences:

1. The relative path has been added in front of CCSlideShow.swf
2. The Flashvars parameter has been added to point to the two xml documents, with 2 variables:
   • config (contains the path and name of the config xml document)
   • slides (contains the path and name of the slides xml document)

   The path to the xml documents can be absolute or relative. If it’s relative, it has to be so starting from the page containing the html code.

Since the ‘images’ folder has a different position as well (it’s no longer a subfolder from the folder where the page with the html code resides), the ‘path’ parameter in the config xml document has to be set:

<parameter name="path">CCSlideShow/images/</parameter>

The path to the images can be absolute or relative. If it’s relative, it has to be so starting from the page containing the html code.

Example 2 : the xml documents have a different name

By default, the two xml files used by the slideshow are called ‘CCSlideShow.xml’ (contains the slide info) and ‘CCSlideShowConfig.xml’. You can, however, call them any way you like. Which becomes a must when you want to use more than one slide show on your site. All you have to do is point the slide show to the xml documents through the Flashvars parameter (just like in example 1).

Let’s assume that we want to show 2 different slide shows, both with the same look and feel (one config xml document), but with different slides to show (two slides xml documents).
All images will be stored in the same folder (otherwise we would need two config xml documents).

<folder> (folder that contains the page)
  page.html (or .php)
  <CCSlideShow>
    CCSlideShow.swf
    CCSlides1.xml
    CCSlides2.xml
    CCSlideShowConfig.xml
    <images> (contains the images)

The html code for the first slide show:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
        codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
        width="300" height="225">
  <param name="movie" value="CCSlideShow/CCSlideShow.swf" />
  <param name="FlashVars" value="config=CCSlideShow/CCSlideShowConfig.xml&slides=CCSlideShow/CCSlides1.xml" />
  <embed src="CCSlideShow/CCSlideShow.swf"
         type="application/x-shockwave-flash"
         pluginspage="http://www.macromedia.com/go/getflashplayer"
         width="300" height="225"
         FlashVars="config=CCSlideShow/CCSlideShowConfig.xml&slides=CCSlideShow/CCSlides1.xml" />
</object>

The html code for the second slide show:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
        codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
        width="300" height="225">
  <param name="movie" value="CCSlideShow/CCSlideShow.swf" />
  <param name="FlashVars" value="config=CCSlideShow/CCSlideShowConfig.xml&slides=CCSlideShow/CCSlides2.xml" />
  <embed src="CCSlideShow/CCSlideShow.swf"
         type="application/x-shockwave-flash"
         pluginspage="http://www.macromedia.com/go/getflashplayer"
         width="300" height="225"
         FlashVars="config=CCSlideShow/CCSlideShowConfig.xml&slides=CCSlideShow/CCSlides2.xml" />
</object>