A separate batch of images is required for thumbnail links and previews (as outlined in the Navigation chapter. If you are using SlideShowPro for Flash without SlideShowPro Director, and are manually creating the content it loads, you will need to create copies of your slideshow content if you want these features.
Before you start creating thumbnails, you have two options. You may create one or two sets of thumbnails (for use in content links and mouse-over link previews). Creating one set is faster, but two gives you more control over image quality and cropping. We'll create one set first, then you can followup with a second set just for the navigation links.
Create a new folder in the directory you're building your slideshow in. For the purposes of this walkthrough, we'll create a folder named "tn" inside the "album1" folder (see left).
If you want thumbnail images for your navigation links instead of numbers (the default), click on your SlideShowPro instance on the Stage of the FLA, then open the Component Inspector panel. Modify the NAVIGATION/Link Appearance parameter to "Thumbnails".
The live preview of SlideShowPro displays the dimensions of link previews, which are 100x100 by default. If you want to change this, edit NAVIGATION/Link Preview Size in the Component Inspector. When satisfied, remember these dimensions for we'll use them in the next step.
Open each of the images used for slideshow content in an image editing application (like Photoshop) and reduce their dimensions to the width and height from Step Three above.
When done, save the thumbnails to the "tn" directory you just created. Name them anything you like, though if you are creating thumbnails for slideshow content containing only images (no video), you can save the thumbs using the same file name as the "lg" version they relate to. More on how we take advantage of this shortcut in the next step.
With your thumbnails saved, open the "images.xml" document. Depending on whether you're using relative or absolute paths in your XML document (see Creating an XML document for an overview), add a tnpath attribute and enter the path to your "tn" folder, like so:
<album title="Nature" description="Images of trees, lakes and flowers" lgpath="gallery/album1/lg/" tnpath="gallery/album1/tn/">
...or...
<album title="Nature" description="Images of trees, lakes and flowers" lgpath="http://www.domain.com/path/to/lg/" tnpath="http://www.domain.com/path/to/tn/">
If in Step Five above you named your thumbnails with the same file names as their larger counterparts, that's all you need to do! SlideShowPro for Flash will use the src attribute in each img element when looking for your thumbs.
If however you named your thumbnails with different file names, or are loading video (which can't re-use the src value, since it's a video and not an image), then we need to add each thumb's file name to each img element, like so:
<img src="tree.jpg" tn="tree_tn.jpg" />
...or when used with video...
<img src="tree.flv" tn="tree_tn.jpg" />
Finally, as a last option, if your thumbnails are spread across multiple directories (and not all together in a "tn" folder for tnpath to use), you can remove tnpath and link to each thumb with an absolute link, like so:
<img src="tree.jpg" tn="http://www.mydomain.com/tn/tree_tn.jpg" />
Publish a movie and mouse-over the navigation to see your thumbnails!
The following is purely optional. If you are using thumbnail images for your navigation links, and your single set of thumbnails look fine, then you don't need to go any further. If you would like more control over the appearance of the navigation links, read on.
Alongside the "tn" folder created in Step One above, create a folder named "tnsm".
By default thumbnail navigation links are 20px wide by 20px high. If you want to change this, adjust NAVIGATION/Thumbnail Link Size in the Component Inspector panel. When satisfied, remember these dimensions for we'll use them in the next step.
Again using your original images, create thumbnail versions that are the same width and height as the dimensions assigned to NAVIGATION/Thumbnail Link Size.
When done, save the thumbnails to the "tnsm" directory you just created. Here too you can name them whatever you want, but if you use the same file name as assigned to each img element's src attribute in the XML file, you'll save a considerable amount of time editing your XML document.
Open the "images.xml" document and add a relative or absolute path to the "tnsm" folder, like so:
<album title="Nature" description="Images of trees, lakes and flowers" lgpath="gallery/album1/lg/" tnpath="gallery/album1/tn/" tnsmpath="gallery/album1/tnsm/">
...or...
<album title="Nature" description="Images of trees, lakes and flowers" lgpath="http://www.domain.com/path/to/lg/" tnpath="http://www.domain.com/path/to/tn/" tnsmpath="http://www.domain.com/path/to/tnsm/">
If your thumbnails are named the same as each img element's src attribute, you're done. Load your slideshow again and your smaller thumbnails will load in the navigation.
If however you named your thumbnails with different file names, or are loading video (which can't re-use the src value, since it's a video and not an image), then we need to add each thumb's file name to each img element, like so:
<img src="tree.jpg" tn="tree_tn.jpg" tnsm="tree_tnsm.jpg" />
...or when used with video...
<img src="tree.flv" tn="tree_tn.jpg" tnsm="tree_tnsm.jpg" />
Finally, as a last option, if your thumbnails are spread across multiple directories (and not all together in a "tn" folder for tnpath to use), you can remove tnpath and link to each thumb with an absolute link, like so:
<img src="tree.jpg" tn="http://www.mydomain.com/tn/tree_tn.jpg" tnsm="http://www.mydomain.com/tnsm/tree_tnsm.jpg" />