Using Slide Show Pro with CMS Builder is relatively easy, but to utilize it effectively, you really need to have Adobe
Flash or access to the program.
There are three components needed to integrate a SSP slide show into CMSB. A multi record section editor that allows
multiple images to be uploaded and that creates thumbnails of appropriates size for display in your slide show, an
image.xml.php file to control access to your CMSB on-line database, and an swf file with the ssp slide show and all your
required parameters set, and of course, the appropriate code to display the slide show on your web page.
THE SSP EXTENSION IN FLASH
SSP Installs as an extension in Flash. When creating a new Flash document, an instance of SSP can be embedded in the
document. At that point the look of your SSP slide show is controlled by the setting of a large number of variable
parameters. You can adjust these parameters in the Flash component inspector.
If you haven’t worked with Slide Show Pro before or you aren’t quite sure how to install the SSP extension,
there’s a good “Quick Start” guide at
http://wiki.slideshowpro.net/SSPfl/QuickStart
that’s worth looking at.
A few of the more important things that they mention are:
1) After launching Flash, select File > New. If you’re using Flash MX 2004 or Flash 8, select "Flash Document". If
you’re using Flash CS3 or CS4, select "Flash File (ActionScript 3.0)". If you’re using the ActionScript 3 version,
or "Flash File (ActionScript 2.0)" if you installed the ActionScript 2 version.. Click on Okay.
The next thing you should do is select Window > Properties and increase the frame rate of your movie to 31fps (the
default 12fps is not recommended).
Next, click on the "Window" menu item at the top of Flash, and select "Development Panels > Components" if using Flash
MX 2004, or "Components" if using Flash 8 / Flash CS3/CS4. The "Components" panel will appear. Toggle the "SlideShowPro"
item open, then click, hold, and drag the component to the Stage (the large area underneath the timeline). An instance
of SlideShowPro for Flash will appear.
Click on the component instance on the Stage (the black area that holds your slides) to select it. Return to the
Properties panel. Change both the X and Y fields to zero to align the component with the upper-left corner of the Stage.
While you’re there, for this tutorial example change the width to 525 pixels and the height to 325 pixels.
Now click outside the instance in the grey area (the stage) and change the width and height to the same dimensions.
Next, open the Component Inspector window and change the XML File Path entry to images.xml.php (For this example you
should name your xml.php file: images.xml.php)
Then save your FLA file. This example uses the filename yourslideshow.fla
The file that gets uploaded to your server is a compressed version of your FLA file called an SWF file (ShockWave File).
To create (publish) your .swf file correctly you’ll have to set up your publish settings (first time only).
Select "File > Publish Settings". Click on the "Flash" tab. If using the ActionScript 2 version of SlideShowPro, ensure
that "Version" is set to "Flash Player 7" (or higher) and "ActionScript version" is set to "ActionScript 2.0." If using
the ActionScript 3 version, "Version" should be set to "Flash Player 9" and "ActionScript version" set to "ActionScript
3.0". Finally, click "Publish."
Flash will export two files to the same folder that contains your FLA file — yourslideshow.html and yourslideshow.swf.
You can ignore or discard the html file.
Now it’s time to add content to your slide show.
THE MULTI RECORD SECTION EDITOR
You’ll create a multi record section editor to upload your images. The one used in this example is called
index_slides. It is set to allow only one record to be created but it’s a multi record editor so that the images can
be dragged to re-order their appearance in the show.
In this example, set the first thumbnail at 525 pixels wide and 325 pixels high, and resize if over 800 pixels wide and
500 pixels high.
After you’ve created your section editor, upload a few test slides.
THE XML.PHP FILE
Since SSP uses an xml file to hold image location information, you’ll need to create an xml.php file to pull your
images from your database and feed them to your SSP slide show.
HINT: In this example, the xml.php file is named images.xml.php but you can call it anything that you want to, just
remember to change the file name in the <object> on your viewer page, and in the Flash component inspector XML File Path
entry.
***NOTE: There are no other tags on this page, no <head>, no <body>, no <html>, just the code above. Upload the file to
the same folder as your .swf file and your viewer file.:
<?php header('Content-type: application/xml; charset=utf-8'); ?><?php echo '<?xml version="1.0" encoding="UTF-8"?>'; ?>
<?php
require_once "/hsphere/local/home/yoursite.com/cmsAdmin/lib/viewer_functions.php";
list($index_slidesRecords, $index_slidesMetaData) = getRecords(array(
'tableName' => 'index_slides',
'where' => whereRecordNumberInUrl(1),
'limit' => '1',
));
$index_slidesRecord = @$index_slidesRecords[0]; // get first record
?>
<gallery>
<album title="Slide Show" description="Slide Show" lgpath="/cmsAdmin/uploads/" tnpath="/cmsAdmin/uploads/thumb/">
<?php foreach ($index_slidesRecord['images'] as $upload): ?>
<img src="<?PHP echo $upload['filename'] ?>" />
<?PHP endforeach ?>
</album>
</gallery>
NOTE: If you want to start your slide show with a different image each time the page is reloaded, insert:
<?PHP shuffle($index_slidesRecord['images']) ?>
Before the line:
<?php foreach ($index_slidesRecord['images'] as $upload): ?>
DISPLAYING THE SSP SLIDE SHOW
The code to display the slide show on your web page is pretty straight forward, mine was set to render a transparent
background. If you’re are concerned about active content and Explorer 8 compatibility using Dreamweaver CS3, you
should automatically be warned about any existing incompatibility when you open your document. Either the code can be
updated then, or you can do it manually by going to File > Convert > Active Content.
This code goes at the top of your page:
<?PHP
require_once "/hsphere/local/home/yoursite.com/cmsAdmin/lib/viewer_functions.php";
list($index_slidesRecords, $index_slidesMetaData) = getRecords(array(
'Table name' => 'index_slides',
'where' => whereRecordNumberInUrl(1),
'limit' => '1',
));
$index_slidesRecord = @$index_slidesRecords[0]; // get first record
?>
<?PHP echo "<?xml version='1.0'?>\n"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
and this code goes where you want the slide show to appear:
<div id="flashcontent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="525" height="325"
id="loader" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="yourslideshow.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="FlashVars" value="xmlfile=images.xml.php?<?php echo
$index_slidesRecord['num'] ?>" />
<embed flashvars="xmlfile=images.xml.php?<?php echo $index_slidesRecord['num'] ?>" src="yourslideshow.swf"
quality="best" wmode="transparent" width="525" height="325" name="loader" align="middle" allowscriptaccess="sameDomain"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
After you’ve created your section editor, uploaded some sample images, created your viewer, your xml.php and your .swf
files and uploaded them to your server, your slide show should be operational. If it is, make a protection copy of your
FLA file and go ahead and play with the various SSP parameters and stage and instance sizes and colors. You’ll
discover that the combination of SSP and CMSB is exceptionally flexible.
HINTS
Along the way, here are a few specific things that I learned...
1) DO NOT USE AN ABSOLUTE PATH (http://www.yoursite/images.xml.php) anywhere in your object tag.
2) The xmlFileType in the Flash Component Inspector should be set to: Default
3) If you create your CMSB image section editor as a Multi record editor set with a maximum of 1 record allowable, you
can drag your images to change their display order in the slide show.
4) Your slide show will look better if your images all have the same aspect ratio, or if you group the various sizes
creatively.
UNDERSTANDING SSP PARAMETERS
Setting parameters is probably the most difficult and confusing task in setting up a show. As I mentioned, parameters
are changed in the Flash Component Inspector panel.
Here’s a link to a document that will explain the functions of all of the variable parameters that can be used with an
instance of SSP. It was compiled by Kenneth Huey.:
http://www.thecmsbcookbook.com/ssp/SlideShowPro parameters.doc
A SHORT XML DICTIONARY
DEFINITION OF TERMS
<?xml version="1.0" encoding="utf-8"?>
<gallery> opens the document node
<album> opens the album node
<img /> creates a content element node, this always self closes with the final /
</album> closes the album node
</gallery> closes the document node
ACCEPTABLE VALUES FOR EACH NODE
gallery
- holds no values
album
- id="" Sets an id value when using actionscript methods
- title="" Title for the gallery screen.
- description="" Displayed in the gallery screen.
- lgpath="" Path where the large images reside, if a / is added to the begriming it will trace the path to the root
level, if no previous / is present paths will be relative to the xml file.
- tnpath="" Same as lgpath but for the thumbnail images.
- tn="" Thumbnail image displayed in the gallery screen.
img
- src="" filename relative to the lgpath
- tn="" set this is your tnpath image has a different name. if you avoid this the tn will be searched in the tnpath by
the same name in the src value.
- caption="" caption of the image.
- link="" link called when the image is clicked.
- target="" target for the link value can be _self, _blank, or _parent and _top if working with frames.
- pause="" this will override the pause value set on the component inspector for this specific image. Must be a number
that will represent seconds.
MAKING YOUR SLIDE SHOW BACKGROUNDS TRANSPARENT
When it comes to setting all of the variables and other commands necessary, it’s not exactly a transparent process.
(pun)
Seriously, I’m pretty new to SSP and I fought with this for quite a long time before I was able to get it straightened
out, now it seems pretty easy.
My first mistake was trying to use the stand alone version of the .swf that came with SSP. No I don’t quite understand
all of the finer points of their instance either, but is seems that some of the parameters are part of the .swf and no
matter what I did to the param.xml file I could not get rid of the dark background that showed up when a slide wasn’t
the full size of the frame.
I finally bit the bullet and created my own .fla and .swf and instantly the issue disappeared.
Oops... Only to be replaced by another issue. There was this annoying background that sat over my web page and under
the slide show. No matter what value I put into the <object> bgcolor parameter, the background would change to that
color or default to white.
I couldn’t make the background disappear, until I discovered the wmode parameter.
Replacing the bgcolor parameter with the wmode parameter and setting it’s value to transparent:
<param name="wmode" value="transparent" />
and
wmode=”transparent”
does the trick.
“It’s always easy once you know how”
|
