In this tutorial you will see how easy it is to add a roll over effect to the ThumbnailScroller Component. For this example I will add a blur effect using the Tweener class.

1. Drag an instance of the ThumbnailScroller Component on the stage and give it the instance name “myScroller”. In the Component Inspector you have to give the component the path of the XML file(thumbnails.xml). Optionally, you can change the other properties how you like. For this example, I will change border to true, border thickness to 5, easing type to Back, easing method to easeInOut and the move amount to 200.

2. Create 2 movie clips that will help you move the thumbnails right or left and give them the instance name “right” and “left”.

3. Add a new layer in which you will put your actionscript code.
First, we need to import the ThumbnailEvent class and the Tweener class(find more information about Tweener here)

  1. import com.flashotaku.thumbnailscroller.events.ThumbnailEvent;
  2. import caurina.transitions.Tweener;

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

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

Before adding the roll over and roll out effect, we want to add blur to each thumbnail when it’s added to the stage. For this, add this code:

  1. myScroller.addEventListener(ThumbnailEvent.THUMB_INIT, addBlur);
  2.  
  3. function addBlur(event:ThumbnailEvent){
  4.             Tweener.addTween(event.item.child, {_blur_blurX:5, _blur_blurY:5, _blur_quality:2, time:.1, transition:"linear"});
  5. }

Finally, add the code for the roll over and roll out effects:

  1. myScroller.addEventListener(ThumbnailEvent.MOUSE_OVER, rollOverBlur);
  2. myScroller.addEventListener(ThumbnailEvent.MOUSE_OUT, rollOutBlur);
  3.  
  4. function rollOverBlur(event:ThumbnailEvent){
  5.             Tweener.addTween(event.item.child, {_blur_blurX:0, _blur_blurY:0, _blur_quality:2, time:.3, transition:"linear"});
  6. }
  7.  
  8. function rollOutBlur(event:ThumbnailEvent){
  9.             Tweener.addTween(event.item.child, {_blur_blurX:5, _blur_blurY:5, _blur_quality:2, time:.3, transition:"linear"});
  10. }

The result is this:

If you have any questions, fell free to ask.

Download files for Actionscript 3
Download files for Actionscript 2

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.