This post is Part 2 of the Flash Components Mashups series.

In this tutorial I will make the application a little more interactive.  I’ll let the “Auto Slideshow” feature activated, but this time I want to be able to jump to different slide when I click on a thumbnail. For this example I will use the StackFlow and the Slideshow components. Click on the bellow image to see exactly what we’ll be trying to achieve.

Like in the previous tutorial, I want that each time a slide is opened, the StackFlow component to scroll to the corresponding thumbnail. The code for this is the same as in the previous tutorial.

  1. import com.flashotaku.events.SlideshowEvent;
  2.  
  3. mySlideshow.addEventListener(SlideshowEvent.TRANSITION_START, transitionStartHandler);
  4.  
  5. function transitionStartHandler(event:SlideshowEvent):void
  6. {
  7.         myStackFlow.select(event.index);
  8. }

Next I need to add the code which will allow as to open a slide when we click an item from the StackFlow. This is also pretty simple to do.

  1. import com.flashotaku.events.StackFlowEvent;
  2.  
  3. myStackFlow.addEventListener(StackFlowEvent.ITEM_CLICK, itemClickHandler);
  4.  
  5. function itemClickHandler(event:StackFlowEvent):void
  6. {
  7.         mySlideshow.openSlide(event.index);
  8. }

That’s all the code we need for creating this advanced flash gallery.
The same steps need to be followed if you want to use a different component, like Carousel, Thumbnail Grid or Thumbnail Scroller.

More example bellow.