Today I’ll begin a series of posts about how you can integrate two or more components together in order to create more complex and interesting flash applications. As you will see, this is very easy to achieve.

I’ll start with a very basic example in which I will create an image gallery (slideshow + thumbnails). For this example I need to use the Slideshow component and the Thumbnail Scroller component. I suppose you already know how to setup each component, so I won’t talk about that. I will only show how to make them work together.

1. Drag an instance of the Slideshow and the Scroller onto the stage. Set the XML files for each of the components and also customize their properties if you would like. One thing that you have to do is set the “Auto Slideshow” property to true (we will use this feature in the tutorial).

2. Now comes the part that makes the 2 components work together. What I want is that each time the slideshow navigates to a new slide, the corresponding thumbnail to be highlighted. We need to use Actionscript code for this. These flash components are AS3 compliant, so we need to use Actionscript 3 code.

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

That is all the code you need for this basic, but nice looking, example.

More examples to come.