BASIC TUTORIAL

This tutorial will give you a quick and efficient introduction to the basic use of the Thumbnailer and ThumbImager components. The Thumbnailer component is used for loading thumbnail images and the ThumbImager is used for loading the full size images. The format for all images must be either JPEG or SWF.

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

1. Prepare your thumbnail and full size images. You will also find some pre-prepared images in the thumbnailer_demo folder that was included with your download, which you may use with this tutorial.

2. Locate the ThumbnailerPRO components in the Flash MX 2004 or Flash 8 components panel (press ctrl+F7 to open the components panel).





3. Drag the Thumbnailer component onto the empty stage.

4. Select the component and open the properties panel (ctrl+F3).



 

5. Give the Thumbnailer component an instance name. In this tutorial we will use the name tnailer.




6. To tell the Thumbnailer which thumbnails to load, we need to add the thumbnail image names to the Thumbnails parameter list. Double click on the "thumbnails" field to open the parameter list:

7. Enter the relative path for the thumbnail image folder in the Thumbnails Path property. In this case, the path is 'thumbs/'. The path must be terminated with a forward slash (/). If everything is set correctly, you should see the thumbnail images when exporting or previewing. The Thumbnailer component should be resized enough so that you can see the thumbnail images properly. In this case, set the width to 480 and the height to 80.

8. Save your movie inside the thumbnailer_demo folder and test it (ctrl+enter) to see the results at this stage.

9. We will now set up the ThumbImager which will load the full size images. Drag the ThumbImager from components panel onto the stage. In this example, set the width to 480 and the height to 260.

10. Click on the ThumbImager that's on the stage to view the properties parameters and give it an instance name. In this tutorial we'll call it timager.

11. Set the parameters to match the image above. These parameters are explained in detail in the Component Parameters section.

12. Now we will tell the Thumbnailer which full size images to load and where to load them. Click on the Thumbnailer component that's on the stage to view the properties panel. Enter timager in the Imager Instance Name property.

Pay attention to the Big Image Path Property. In this tutorial our files are in the 'images' folder so we will leave this parameter as is, but if your full size images are in a different location, you must enter the correct path so that your images can be found and displayed correcty.

13. Enter the names of the full size images in the Big Images property.

Note: The Thumbimager component requires the full filename (including the extension) to be entered for the full size images.

14. Click Ok. You can now test your movie (ctrl+enter) to see how all of these settings are working together:

The above demo can be found in the file called tnailerPRO_demo1.fla.

Note:
In this example the thumbnail images are named sequentially, however any filenames 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. The file name for full size images MUST be specified with the proper extension (.jpg or .swf).

The Thumbnailer parameters may be set directly in the properties panel or via Actionscript. These parameters are explained in detail in the Component Parameters section.