Advanced Flash Components

Working with Events in 2D Carousel: Adding a Hyperlink

Updated: Dec 6, 2007 Views: 1207

Description: This tutorial will show you how to add and use a mouse click event to call a function that sends a URL request and using a conditional to limit that request to just the selected item.

Components Used in this Tutorial: 2D Carousel AS3.0.

The Completed Project:

Complete Code

import flash.net.URLRequest;
import flash.net.navigateToURL;
import flash.events.MouseEvent;
import com.afcomponents.events.CarouselEvent;

var thisId:Number;

// Wait for items to load from XML and then add MouseEvent.CLICK to each item
function onXMLLoaded(event:CarouselEvent) {
   myCarousel.addGenericItemEventListener(MouseEvent.CLICK, onItemClick);
   thisId = myCarousel.getSelectedItemNum();
}
myCarousel.addEventListener(CarouselEvent.XML_LOAD_COMPLETE, onXMLLoaded);

// Handle item click
function onItemClick(event:MouseEvent) {

    //Only Selected item acts as Hyperlink
    if(myCarousel.getSelectedItemNum() == thisId) {
            // you can store the URL in "data" in your XML file
               var url:URLRequest = new URLRequest(event.target.data);
               navigateToURL(url, "_self");
    }

    thisId = myCarousel.getSelectedItemNum();
}

Set-Up and Add Content Using through XML

Before you begin make sure that you have successfully installed the component inspector have been able to load content into the Carousel component using XML. Also make sure that you give your Carousel an instance name of myCarousel.

Please make sure that you have added your target URL's into the data tag in your XML document for all your items.

Understanding the Plan for ActionScript

Once we have our Carousel correctly loading all our items, it is time to get the items to act as hyperlinks and this is done by adding some action to an actions layer on the frame. Let's now discuss our plan for what we would like to accomplish with ActionScript.

Our first thing we are going to want to do is add an event listener to watch when a item has been clicked on.
We will want this event listener to call a function that sends a URL request to the target URL for the item in our XML document.
In this tutorial, we only want the selected item to act as the hyperlink when clicked not everyone. So we need to write a conditional for only selected item to act as hyper link.
In order for the conditional statement, we need to set up a variable to identify and store the selected item number and makes sure it gets initially set.

Adding Mouse Click Event Listeners for Items in Carousel

The first thing that we want to do is add an event listener for when the user clicks an item in the Carousel. In order to add an event listener for the items in the Carousel we have to wait for the XML to load and we this with an event listener and a function that adds the mouse click event listener.

import flash.events.MouseEvent;
import com.afcomponents.events.CarouselEvent;

function onXMLLoaded(event:CarouselEvent) {
myCarousel.addGenericItemEventListener(MouseEvent.CLICK, onItemClick);
}
myCarousel.addEventListener(CarouselEvent.XML_LOAD_COMPLETE, onXMLLoaded);

Function for URL Request

Now that we have added the event listener we need to write the function that we call that will send a URL request based

import flash.net.URLRequest;
import flash.net.navigateToURL;

function onItemClick(event:MouseEvent) {

// you can store the URL in "data" in your XML file
var url:URLRequest = new URLRequest(event.target.data);
navigateToURL(url, "_self");
}

Update URL request function with a Conditional

Since in this tutorial we only want our URL request to happen when a user clicks on the selected item, we need to update our URL request function with a conditional statement.

// Handle item click
function onItemClick(event:MouseEvent) {

    //Only Selected item acts as Hyperlink
    if(myCarousel.getSelectedItemNum() == thisId) {
            // you can store the URL in "data" in your XML file
               var url:URLRequest = new URLRequest(event.target.data);
               navigateToURL(url, "_self");
    }
}

Setting up and updating the variable to store the selected item number

In the conditional above we use the variable thisId to check the selected item. We need to declare this variable:

var thisId:Number;

Set the variable to the initial selected item:

function onXMLLoaded(event:CarouselEvent) {
myCarousel.addGenericItemEventListener(MouseEvent.CLICK, onItemClick);
thisId = myCarousel.getSelectedItemNum();
}
myCarousel.addEventListener(CarouselEvent.XML_LOAD_COMPLETE, onXMLLoaded);

Lastly have the variable updated as items are clicked:

Component Info

Carousel (AS 3.0)

Knowledge Base

Forum