Using SlideShowPro For Lightroom (Single Album)

After you've gone ahead and installed the plugin (or in Lightroom terms, the web-engine) go ahead and load up Adobe Lightroom and select some images from your existing Library catalog that you want to use for your slideshow.

Once you've finished selecting your images you'll want to then select the Web link (in the upper right corner) and you'll notice that your chosen images have followed you as little thumbnails on the bottom left of the screen. This area is known as the Filmstrip area in Adobe Lightroom.

Under the Engine drop-down (1) at the top-right you'll want to scroll down to the bottom and choose SlideShowPro for Lightroom 1.4.3 (2). Since this tutorial is version specific, go ahead and choose whatever version is currently available.

You'll notice now that an instance of SSP is now on our Lightroom stage and to the right of that our sidebar has filled up with a bunch of options. Go ahead and design out your slideshow as you'd like. Once you have finished, proceed to the next step.

Before we choose to Export our slideshow we'll need to make sure of something. The most important part of the slideshow is the images.xml file which in this instance is automatically generated for you upon Export. This tells the slideshow where the thumbnails, pop-up images, full-size images, and large-size images are located. This is crucial for a successful slideshow. Since we are doing a single album today we can leave the XML file name to be images.xml. The location of your outputted file name is under Output Settings and then a subcategory of Data. In this instance our images.xml file will try to be found in the root directory of our site folder.

The last step in Adobe Lightroom is exporting our slideshow. Once you have completed your design of the slideshow and checked the necessary steps, go ahead and choose Export at the bottom-right of your screen.

You'll be presented with a request to save your slideshow with a specific folder name. I've chosen to name my folder based off of what the subject of my images are. This has no effect on any of your slideshow files or outputted picture names. It's strictly a folder name. Once you have chosen a name and a place to save it, go ahead and click on OK. Adobe Lightroom will now output, into your chosen folder, all the files needed for your slideshow.

Your chosen directory should now have a list of file-names matching those in the picture above. Things to take note of is the name of the images.xml file. We need to make sure that it matches the name we used in Adobe Lightroom. If you changed it within Adobe Lightroom, you may have to rename it in Finder as well if it didn't change it properly. Also you'll notice that we now have an album1 folder which houses all our various image format types. You'll also notice that a file named param.xml, which is essentially the parameters or settings you chose for your design of the slideshow, is in the list as well.

To implement this easily into Freeway will take just a few clicks. Before we get started though you'll need to make sure you have the Upload Extra Resources action available for free at actionsforge.com

For this tutorial I'm going to go ahead and use a new document. If you are using an existing document the steps would be the same. First, I'm going to, with my blue button (CSS Layout) on, draw out a layered HTML onto my page. I'm going to then change the dimensions of the HTML item in my Inspector palette to match the width and height of my slideshow. You can find the size of your slideshow in Adobe Lightroom by looking under the Output Settings under the subcategory of Dimensions. In this instance my slideshow dimensions will be 542px by 441px which was the default size of my Adobe Lightroom SSP based content area from the beginning.

The next step is to import our slideshow into our Freeway page. To do so, simply click once on your HTML item to select (if you get the blinking cursor inside the box, click outside the box, and then reselect it) and then go to File (1) and choose Import (2).

Next you'll want to direct your Finder to your recently outputted Adobe Lightroom SSP folder from before and in the folder contents you'll want to choose the file named loader.swf.

Once you have imported the loader.swf file into your recently created HTML item, you'll want to then reselect your HTML item and go to Item (1) and then hover over Actions (2) and then choose Upload Extra Resources (3).

Open up your Actions palette and you'll see your options for the Upload Extra Resouces action. You'll want to click on the side arrow under With Page's HTML File and then you'll be presented with a series of drop-down's. The following files need to be selected from your outputted Adobe Lightroom SSP folder.

images.xml
param.xml
slideshowpro.swf
expressinstall.swf

Before we preview the final product let me suggest something that often isn't suggested. To make our slideshow work properly we're going to need to copy the album1 folder to our published site folder if you want to view your slideshow locally before it goes live. It isn't recommended to do so until you've completed all your work due to the way Freeway handles it's delicate site folder. So, with that said, for previewing purposes I'm going to copy my album1 folder into the root directory of my published site folder. By doing this we also gain a better understand of the folder structure required when we upload our site to an actual server space. The files that we had chosen earlier must be in the root directory of your site folder and should resemble the image above.

Once you've gone ahead and copied that folder over, go ahead and preview your page in any web browser. You'll notice that your slideshow loads up and that your images load within the SSP content area based off the design and settings you chose easlier. That's it, enjoy!