Open URL on item click

Open URL on item click

Published: 24 August 2009

1. Drag an instance of the Thumbnail Grid component onto the Stage.

2. Create an XML file, as explained in this tutorial. Also add an additional attributes: link, which will be used to store the URL of the website.

<?xml version="1.0" encoding="utf-8"?>
<images>
     <image source="images/image1.jpg" link="http://www.yahoo.com"/>
     <image source="images/image2.jpg" link="http://www.google.com"/>
     <image source="images/image3.jpg" link="http://www.msn.com"/>
     <image source="images/image4.jpg" link="http://www.adobe.com"/>
     <image source="images/image5.jpg" link="http://www.digg.com"/>
     <image source="images/image6.jpg" link="http://www.twitter.com"/>
     <image source="images/image7.jpg" link="http://www.techcrunch.com"/>
     <image source="images/image8.jpg" link="http://www.ted.com"/>
     <image source="images/image9.jpg" link="http://www.bing.com"/>
</images>

3. Add the following code:

import com.flashotaku.events.GridEvent;
import flash.net.navigateToURL;
import flash.net.URLRequest;

myGrid.addEventListener(GridEvent.ITEM_CLICK, itemClickHandler);

function itemClickHandler(event:GridEvent):void
{
navigateToURL(new URLRequest(event.data.link));
}

If you click an item, the corresponding web page will be opened in a new browser window. If you would like to open the web page in the same window add the "_self" parameter to the "navigateToURL" method.

navigateToURL(new URLRequest(event.data.link), "_self");

Now let's say we don't want to directly open the web page when we click an item. First we would like to select an item and then if we click again on the selected item, then it should take us on the web page. For this, we need to change the itemClickHandler function to:

function itemClickHandler(event:GridEvent):void
{
     if (myGrid.selectedIndex != event.index) // if the clicked item was not selected, select it
     {
          myGrid.select(event.index);
     }
     else // if the item that was clicked, was already selected go to the URL address
     {
          navigateToURL(new URLRequest(event.data.link));
     }
}