ThumbGrid

Usage: without SlideShowPro Director

This walkthrough uses the ActionScript 3 version of SlideShowPro for Flash and XML data / images we'll create ourselves. If you are using SlideShowPro Director, refer to the these alternate instructions. If you want to load a Media RSS feed, follow steps one through five below, then set SlideShowPro for Flash's XML File Path parameter to the RSS feed's URL and XML File Type to "Media RSS."

Step one: Install / Setup

If you haven’t already installed ThumbGrid, do so now using these instructions. When complete, launch Flash CS3 or CS4, select “File > New” from the top application menu, then choose “Flash File (ActionScript 3.0)” from the list of options. When complete you should have a new FLA open.

Step two: Increase Stage size

Because we’ll be adding two components that (together) exceed the default height of Stage, we need to increase the Stage height. Do this by selecting Window > Properties to open the Properties panel. Click the button next to the “Size:” label that displays your current dimensions. In the window that appears enter 700 for the height.

Step three: Add SlideShowPro for Flash

Select Window > Components to open the Components panel, and toggle open the “SlideShowPro” option. Click on the component inside, and drag it to the Stage. When it appears, click on it to select, then return to the Properties panel and set its X: and Y: properties to 0 to register the component to the top-left of the Stage.

Step four: Assign instance name

In order for ThumbGrid to communicate with SlideShowPro for Flash (and vice versa) it needs to know where it is. This is accomplished by assigning an instance name to SlideShowPro for Flash, then passing that value along to ThumbGrid.

With the SlideShowPro for Flash instance still selected, return to the Properties panel and look for an input field displaying "<Instance Name>". Click inside, and enter "my_ssp" (no quotes). This is the default value ThumbGrid will look for.

Step five: Add SlideShowPro ThumbGrid

Return to the Components panel, and toggle open the "ThumbGrid" option. Click on the component inside, and drag it to the Stage of your FLA. When it appears, click on it to select, return to the Properties panel, and set its X: value to 0 and its Y: value to 400. This will position ThumbGrid underneath so both components can be viewed.

Step six: Create a project folder

You now need a place to save your FLA. Create a new folder named "slideshow" anywhere on your desktop. Save the FLA to your "slideshow" directory and name it "slideshow.fla".

Step seven: Create content directories

Again in your "slideshow" folder, create a new folder named "gallery." Open "gallery" and create a new folder named "album1." This folder will hold all the images for your first album. Finally, open "album1" and create two new folders named "large" and "thumb".

Step eight: Create an XML document

Using a text editor (Dreamweaver, BBEdit, TextMate, Notepad, but not Microsoft Word or any rich text editor), create a new document and enter the following:

<?xml version="1.0" encoding="UTF-8"?>
<gallery>
<album title="" description="" lgpath="" tnpath="">
<img src="" />
</album>
</gallery>

This is the basic template of your XML document. Save the XML file to the "slideshow" project folder and name it "images.xml."

Now we're going to fill the template with our gallery data. In the album element, add values to title and description, then add to the lgpath attribute the relative path to the "large" folder you created earlier, which in this case would be gallery/album1/large/. Do the same with the tnpath attribute, which in this case would be gallery/album1/thumb/.

Step nine: Create images

Above: ThumbGrid live preview

Now it's time to create some images. You can do this by hand in any photo editor. If you have Photoshop CS2 or higher installed, check out SlideShowPro Export for Photoshop script that makes creating large / thumbnail images a breeze. Otherwise, read on.

For your "large" photos, look in the top-left-corner of the SlideShowPro for Flash instance on the Stage and note the dimensions that are displayed. These are your target values, if you'd like to create custom images tailored to fit that space. When you have a batch of slideshow images ready, save them all to the "large" folder.

Now for our thumbnails. Look at the ThumbGrid instance on the Stage, and notice the two numbers separated by a forward slash (see screenshot on right). First is the target width, the second height. Create a group of images smaller than the "large" versions but named identically. Place these images in the "thumb" folder.

Step ten: Edit XML

Return to your XML document and create an img element for each image; filling the src attribute with the file name of each pair. Your XML file should now resemble the following:

<?xml version="1.0" encoding="UTF-8"?>
<gallery>
<album title="Nature" description="Images of trees, lakes and flowers" lgpath="gallery/album1/large/" tnpath="gallery/album1/thumb/">
<img src="tree.jpg" />
<img src="flower.jpg" />
<img src="lake.jpg" />
</album>
</gallery>

Save your XML document when finished, then move on to the next step.

Step eleven: Publish

With your images and XML document ready to go, select File > Publish Preview > Flash. When loaded, SlideShowPro for Flash should be displaying your content and ThumbGrid should be populating with thumbnail images!