This walkthrough requires the ActionScript 3 version of SlideShowPro for Flash and either an installation SlideShowPro Director on your web server or a subscription through our Director hosting service. If you've got both of these, let's get started!
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.
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.
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 complete a live preview of the component should appear. With SlideShowPro still selected and the Properties panel open, go ahead and set its X: and Y: properties to 0 to register the component to the top-left of your Stage.
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.
Open your web browser and navigate to your SlideShowPro Director installation. Click through to the album or gallery you want to display, and copy the XML File Path for that album/gallery on its "Summary" page. Return to Flash, click on your SlideShowPro instance on the Stage, and open Window > Component Inspector from the top menu. At the top of the panel, erase the default "images.xml" value for DATA/XML File Path. Paste into this field the XML File Path you copied from Director. Then change DATA/XML File Type underneath that to "Director."
Test publish your FLA by selecting File > Publish Preview > Flash from the top menu. You should be seeing your Director content loading in SlideShowPro for Flash.
With our Director content successfully loading, and our instance name assigned to SlideShowPro for Flash, return to the Components panel. Toggle open the ThumbGrid option, and like before drag a copy of the component to the Stage. 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.
Go ahead and test-publish your FLA by selecting File > Publish Preview > Flash. When loaded, ThumbGrid should be populating with thumbnail images!
Now that we have the components communicating with one another, let's adjust the quality of the thumbnails.
SlideShowPro Director publishes thumbnail images based on the NAVIGATION LINK PREVIEW/Size settings in SlideShowPro for Flash (which in-turn ThumbGrid loads).
To increase quality, click on the SlideShowPro for Flash instance, and open the Component Inspector panel. Find the parameter named NAVIGATION LINK PREVIEW/Scale. Set this, if not already, to "Crop to Fit."
Next, look at the live preview of ThumbGrid and notice the numbers in each box. The pair of numbers separated with a slash is the width/height of each container. Return to the Component Inspector panel and change the NAVIGATION LINK PREVIEW/Size parameter to these values.
Test-publish a movie, and thumbs will be returned at those exact dimensions. Feel free to double both of these values for even higher-quality images that compensate for the value of THUMB BEHAVIOR/Zoom Scale if you'd like.