This tutorial shows you how easy it is to create an image gallery using the Slideshow Component and the ThumbnailScroller Component.

For this tutorial i will use the AS3 version of the components but you will be able to download sample files for both the AS3 version and the AS2 version.

1. First, create 2 XML files and write the path to each image. For more information about working with XML see the components’ documentation.

2. Drag on the stage an instace of the Slideshow component and an instance of the ThumbnailScroller component.

3. Give each component an instance name. I will use mySlideshow for the Slideshow and myScroller for the ThumbnailScroller.

4. Go to the Component Inspector and give the path to the XML file for each component. In this example we have image.xml for the Slideshow and thumbnails.xml for the ThumbnailScroller. I also want to change the border to true and the border thickness to 5 for the Slideshow component and the border to true, the border thickness to 3 and the mouse move to true for the ThumbnailScroller component.

5. Create a new layer called actionscript and add this code:

  1. import com.flashotaku.thumbnailscroller.events.ThumbnailEvent;
  2.  
  3. myScroller.addEventListener(ThumbnailEvent.CLICK, clickHandler);
  4.  
  5. function clickHandler(event:ThumbnailEvent){
  6.           mySlideshow.loadImage(event.item.id);
  7. }

I won’t comment the code but if there is something you don’t understand, just ask.

That’s all you have to do to create this nice image gallery.

Download sample files for AS3
Download sample files for AS2

Support

As of 11 March 2009, support is no longer provided for the free components. If you need support, please purchase the commercial version of the components.