Open URL on item click
Updated: Jun 14, 2010
Views: 1035
Description: Learn how to create a hyperlink for each item.
1. Drag an instance of the Carousel component onto the Stage.
2. Create an XML file and 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>
<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.afcomponents.events.CarouselEvent;
import flash.net.navigateToURL;
import flash.net.URLRequest;
myCarousel.addEventListener(CarouselEvent.ITEM_CLICK, itemClickHandler);
function itemClickHandler(event:CarouselEvent):void
{
navigateToURL(new URLRequest(event.data.link));
}
import flash.net.navigateToURL;
import flash.net.URLRequest;
myCarousel.addEventListener(CarouselEvent.ITEM_CLICK, itemClickHandler);
function itemClickHandler(event:CarouselEvent):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:CarouselEvent):void
{
if (myCarousel.selectedIndex != event.index) // if the clicked item was not selected, select it
{
myCarousel.select(event.index);
}
else // if the item that was clicked, was already selected go to the URL address
{
navigateToURL(new URLRequest(event.data.link));
}
}
{
if (myCarousel.selectedIndex != event.index) // if the clicked item was not selected, select it
{
myCarousel.select(event.index);
}
else // if the item that was clicked, was already selected go to the URL address
{
navigateToURL(new URLRequest(event.data.link));
}
}
