Basic Tutorial

Note: The only images that Flash can load are non-progressive JPEGs. Please be sure that all of the images (both thumbnails and bigger images) are saved as non-progressive JPEGs. In Photoshop, when saving images, choose "Save For Web...", select JPG and be sure that "progressive" checkbox is unchecked before saving.

1) Get some images ready (jpgs or swfs) to use as thumbnails. Included with your instructions (thumbnailer_demo) you will find some images that have been prepared for use with this tutorial.

2) Locate the Thumbnailer components in the Flash MX components panel. You will see two components there: "ThumbnailerShader" has predefined behaviors, while the actions and behavior of "Thumbnailer" may be completely customized.






3) Drag the ThumbnailerShader component onto the empty stage.



 

These are the parameters that can be set:
(These parameters may be set directly in the properties panel or via Actionscript. After installing the component, all Actionscript methods and events are documented in the Actionscript reference panel of Flash MX).
 

orientation - [horizontal, vertical] - sets the direction the thumbnails will be displayed (horizontally or vertically)
thumbArray - array with names of thumbnail images. Both jpegs and SWF files may be specified. If no extension if entered, the images will be assumed to be jpegs.
distance - distance in pixels between thumbnail images
velocity - speed of the thumbnails' movement
buffer width - distance in pixels the ends of the thumbnail to define the stop positions of the first and last thumbnail.
imgPath - path to the folder containing the thumbnail images (the slash must be included at the end)
shadeColor - color of the shader
shadeAlpha - alpha of the shader
shadeOut - time in frames for shader to fade out (onRollOver)
shadeIn - time in frames for shader to fade in (onRollOut)

4) Give the ThumbnailShader component the instance name tnailer. To initialize the thumbnails without using any Actionscript, simply enter the names of the thumbnail images into the thumbArray list like this:





Note:
Ensure that the correct path is entered for the imgPath property, specifying the directory containing the thumbnail images ('thumbs/' in this case). If everything is entered correctly, you should see the thumbnails when exporting or previewing. You should resize the Thumbnailer component enough to see the thumbnail images properly. In this case, set the width to 520 and height to 80.

Save your movie inside the thumbnailer_demo folder. Export it and see the results.

ADVANCED USE OF THE THUMBNAILER (through Actionscript):

thumbArray: the list can be populated using Actionscript by making a string array of image names, using the loadThumbnails method to initialize the component. For example:

var img_array=["th_0", "th_1", "th_2", "th_3", "th_4", "th_5", "th_6", "th_7", "th_8", "th_9", "th_10", "th_11"];
tnailer.loadThumbnails(img_array, "thumbs/");

In the first line we made an array of names of the thumbnail images and in second line we initialized the component using the loadThumbnails method (see the Flash Actionscript reference panel for more details).

Note:
 
Although in this example the thumbnail images are named sequentially, any names for the images will work. If no extension is specified, it will be assumed that the images are jpegs. If swf files are to be used, the .swf extension must be specified.