In this tutorial I will create another image gallery. This time I will show you how you can create image galleries using only code. This gives you more flexibility when you use these components in your projects.

1. Import the Slideshow and ThumbnailScroller class. You need to import these classes to be able to create instances of the components by code.

  1. import com.flashotaku.slideshow.Slideshow;
  2. import com.flashotaku.thumbnailscroller.ThumbnailScroller;

2. Import the ThumbnailEvent and MouseEvent class. You need these classes for navigation.

  1. import com.flashotaku.thumbnailscroller.events.ThumbnailEvent;
  2. import flash.events.MouseEvent;

3. Create an instance of the Slideshow and change some properties.

  1. var mySlideshow:Slideshow = new Slideshow();
  2. addChild(mySlideshow);
  3. mySlideshow.xmlPath = "images.xml";
  4. mySlideshow.setSize(380, 260);
  5. mySlideshow.x = 95;
  6. mySlideshow.y = 10;
  7. mySlideshow.setBorder = true;
  8. mySlideshow.borderThickness = 5;
  9. mySlideshow.preloaderType = "circular";
  10. mySlideshow.transitionEffect = "squares";
  11. mySlideshow.squaresEffectType = "blur";
  12. mySlideshow.squaresDirection = "random";

4. Create an instance of the ThumbnailScroller and change some properties.

  1. var myScroller:ThumbnailScroller = new ThumbnailScroller();
  2. addChild(myScroller);
  3. myScroller.xmlPath = "thumbnails.xml";
  4. myScroller.setSize(500, 70);
  5. myScroller.x = 34;
  6. myScroller.y = 307;
  7. myScroller.setBorder = true;
  8. myScroller.borderThickness = 3;
  9. myScroller.easingType = "Back";
  10. myScroller.easingMethod = "easeInOut";
  11. myScroller.moveAmount = 200;

5. Create 2 movie clips that you will use to move the thumbnails to left and right. For my example I’ve created a triangle. The triangle is in the library and has the Arrow class associated with it (To understand this step you need to know how to import movie clips from the library in Actionscript 3. The tutorial doesn’t cover this but I will explain it to you if you need).

  1. var left:Arrow = new Arrow();
  2. addChild(left);
  3. left.x = myScroller.x – left.width – 5;
  4. left.y = myScroller.y + (myScroller.height – left.height)/2;
  5.  
  6. var right:Arrow = new Arrow();
  7. addChild(right);
  8. right.rotation = 180;
  9. right.x = myScroller.x + myScroller.width + right.width + 5;
  10. right.y = left.y + right.height;

6. Add event listeners for the “left” and “right” movie clips.

  1. left.addEventListener(MouseEvent.CLICK, leftHandler);
  2. right.addEventListener(MouseEvent.CLICK, rightHandler);
  3. function leftHandler(event:MouseEvent){
  4.        myScroller.moveLeft();
  5. }
  6.  
  7. function rightHandler(event:MouseEvent){
  8.        myScroller.moveRight();
  9. }

7. Add the code that will open an image in the slideshow when a thumbnail is clicked

  1. myScroller.addEventListener(ThumbnailEvent.CLICK, clickHandler);
  2. function clickHandler(event:ThumbnailEvent){
  3.           mySlideshow.loadImage(event.item.id);
  4. }

That’s all. Enjoy. Feel free to ask anything you don’t understand.

Download sample files for Actionscript 2
Download sample files for Actionscript 3

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.