In a previous tutorial, I’ve described how you can open an URL when a thumbnail is clicked. It was not difficult to do but you would need to parse the XML file again and create some Array instances to store the additional data. With the new components, however, this becomes much easier to do.

In this tutorial I will use the Carousel component, but it’s the same for each of the Thumbnail Scroller, Thumbnail Grid or StackFlow components.

First we need to create an XML file, images.xml, which should look like this:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <images>
  3.      <image source="images/image1.jpg" link="http://www.adobe.com"/>
  4.      <image source="images/image2.jpg" link="http://www.yahoo.com"/>
  5.      <image source="images/image3.jpg" link="http://www.msn.com"/>
  6.      <image source="images/image4.jpg" link="http://www.google.com"/>
  7.      <image source="images/image5.jpg" link="http://www.yahoo.com"/>
  8.      <image source="images/image6.jpg" link="http://www.msn.com"/>
  9.      <image source="images/image7.jpg" link="http://www.google.com"/>
  10.      <image source="images/image8.jpg" link="http://www.youtube.com"/>
  11.      <image source="images/image9.jpg" link="http://www.adobe.com"/>
  12.      <image source="images/image10.jpg" link="http://www.yahoo.com"/>
  13. </images>

The ‘source’ attribute is required to specify the location of the images we want to load. The ‘link’ attribute is used to specify the URL of the item. ‘link’ is not a reserved keyword. I could as well use ‘myLink’ or ‘url’ or any other word. The component also allows you to specify the source and all the additional data using Actionscript code but I won’t cover this now. You can read more about this feature in the component’s documentation.

Next, drag an instance of the Carousel component onto the stage, give it an instance name (myCarousel, for example), open the Component Inspector panel and for the XML Path property specify the path to the images.xml file. If you test the movie now, you will see the Carousel component successfully loading all the images.

Now, what we want is whenever an item is clicked, the Carousel to select the item, which means that the Carousel will rotate in order to bring that item in front, and if the item is already selected and we click again on the same item, to navigate to the URL specified for that item.

The component’s API makes it very easy to do this.

  1. import com.flashotaku.events.CarouselEvent;
  2.  
  3. myCarousel.addEventListener(CarouselEvent.ITEM_CLICK, itemClickHandler);
  4.  
  5. function itemClickHandler(event:CarouselEvent):void
  6. {
  7.      // if the clicked item is not selected, select it
  8.      if (myCarousel.selectedIndex != event.index)
  9.      {
  10.           myCarousel.select(event.index);
  11.      }
  12.      else // if the clicked item was already selected, go to the URL address
  13.      {
  14.           navigateToURL(new URLRequest(event.data.link));
  15.      }
  16. }

That’s all. As you can see it’s much easier and the new components give you a greater flexibility than the old ones.

I’ve also added a GreyEffect which is not covered in this tutorial. You can find more info about the available effects at the component’s page.

Here’s a preview:

In the next tutorial, I will show show you how to create a simple Tooltip, that will reveal a title or some other data when you roll over one of the items.