Adding this feature to the Thumbnail Scroller Component is pretty easy but requires some knowledge on working with XML. In this tutorial I will show you how to do this using Actionscript 3.

1. First we need to add another attribute to the XML file. I will call this new attribute “urlPath” but you can use any name. I only want to add this attribute for the first 3 thumbnails.

My XML file will now look like this:

  1. <images>
  2.       <image path="thumbnails/image0.jpg" urlPath="http://www.adobe.com" />
  3.       <image path="thumbnails/image1.jpg" urlPath="http://www.google.com" />
  4.       <image path="thumbnails/image2.jpg" urlPath="http://www.yahoo.com" />
  5.       <image path="thumbnails/image3.jpg" />
  6.       <image path="thumbnails/image4.jpg" />
  7.       <image path="thumbnails/image5.jpg" />
  8.       <image path="thumbnails/image6.jpg" />
  9.       <image path="thumbnails/image7.jpg" />
  10.       <image path="thumbnails/image8.jpg" />
  11.       <image path="thumbnails/image9.jpg" />
  12. </images>

2. Add the needed code for the navigation:

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

3. Now, we need to handle the XML file. At first, this might seem a little complicated if you haven’t worked with XML in AS3 but it’s really not that difficult. It’s just that AS3 has a different way of working with external XML files.

  1. import flash.events.Event;
  2. import flash.net.URLLoader;
  3. import flash.net.URLRequest;  
  4.  
  5. var urlRequest:URLRequest = new URLRequest("thumbnails.xml");
  6. var urlLoader:URLLoader = new URLLoader(urlRequest);
  7. var urlArray:Array = new Array();  
  8.  
  9. urlLoader.addEventListener(Event.COMPLETE, onXmlComplete);  
  10.  
  11. function onXmlComplete(event:Event){
  12.       var xmlList:XMLList;
  13.       var nr:int;
  14.       var xml:XML = new XML(event.target.data);
  15.       xmlList = xml.children();
  16.       nr = xmlList.length();
  17.       for(var i:int = 0; i < nr; i++){
  18.             urlArray[i] = xmlList[i].attribute("urlPath");
  19.       }
  20. }
  21.  

4. Open an URL when a thumbnail is clicked:

  1. import com.flashotaku.thumbnailscroller.events.ThumbnailEvent;
  2. import flash.net.navigateToURL;  
  3.  
  4. myScroller.addEventListener(ThumbnailEvent.CLICK, openUrl);  
  5.  
  6. function openUrl(event:ThumbnailEvent){
  7.      var nr:int = event.item.id;
  8.      if(urlArray[nr]!=undefined){
  9.            var urlRequest:URLRequest = new URLRequest(urlArray[nr]);
  10.            navigateToURL(urlRequest, "_blank");
  11.      }
  12. }

Download sample files

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.