Slide Show Pro Director

Hi Joseph,

I’ve never used Director since that’s SSP’s own CMS module, so I’ll assume that you’re asking about SSP integration with CMS Builder.

Here's a few recipes from my CMSB Cookbook http://www.thecmsbcookbook.com
that describes how to accomplish that.

INTEGRATING SLIDE SHOW PRO FOR FLASH WITH CMSB
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 slideshow 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.

Here’s the only code in the 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>

***There are no other tags on this page, no <head>, no <body>, no <html>, just the code above. The file will be uploaded to the same folder as your .swf file and your viewer file.

________________________________________________________
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(
'tableName' => '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 stasge 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

There’s more, but this should get you started.

Best,

Jerry Kornbluth