Working with Events in 3d Carousel:Hyperlinking
Updated: Feb 19, 2008
Views: 5197
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.
Complete Code:
import flash.utils.*;
import flash.events.MouseEvent;
import com.afcomponents.carousel3d.*;
import com.afcomponents.events.CarouselEvent;
import com.afcomponents.events.item.*;
import flash.net.URLRequest;
import flash.net.navigateToURL;
function itemClick(event:ItemMouseEvent){
if(myCarousel.getSelectedIndex()==event.index) {
// you can store the URL in "data" in your XML file
var url:URLRequest = new URLRequest(event.target.data);
navigateToURL(url, "_self");
};
}
function contentLoad (event:Event) {
for (var i:Number = 0; i<=myCarousel.length-1; i++) {
myCarousel.addItemEventListener (i, MouseEvent.CLICK, itemClick);
}
}
myCarousel.addEventListener(CarouselEvent.CONTENT_LOAD_START, contentLoad);
import flash.events.MouseEvent;
import com.afcomponents.carousel3d.*;
import com.afcomponents.events.CarouselEvent;
import com.afcomponents.events.item.*;
import flash.net.URLRequest;
import flash.net.navigateToURL;
function itemClick(event:ItemMouseEvent){
if(myCarousel.getSelectedIndex()==event.index) {
// you can store the URL in "data" in your XML file
var url:URLRequest = new URLRequest(event.target.data);
navigateToURL(url, "_self");
};
}
function contentLoad (event:Event) {
for (var i:Number = 0; i<=myCarousel.length-1; i++) {
myCarousel.addItemEventListener (i, MouseEvent.CLICK, itemClick);
}
}
myCarousel.addEventListener(CarouselEvent.CONTENT_LOAD_START, contentLoad);
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 3d Carousel component using XML. Also make sure that you give your 3d Carousel has an instance name of myCarousel.
Understanding the Plan for ActionScript
Once we have our 3d Carousel correctly loading all our items, it is time to get the selected items to act as a hyperlink. 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.
- Since mouse event listeners for the items in d Carousel have to be added after the component initializes, we first want to add an event listener for when content starts to load in the stack.
- Inside this function that is called when content starts to load, we need to add our click event listener to our items in d Carousel so we create a for loop to add this to all our items.
- Next, we need to write the function that our click event listener calls that sends a URL request to the target URL for the item in our XML document in the data field.
- Lastly, we need to write a conditional that limits this request so it only sends a request when the selected item is clicked.
The first thing that we want to do is add an event listener for when the user clicks an item in the d Carousel . In order to add an event listener for the items in the d Carousel we have to wait for the XML to load and we do this with an event listener and a function that loops through our items and adds the mouse click event listener to each item.
import flash.events.MouseEvent;
import com.afcomponents.carousel3d.*;
import com.afcomponents.events.CarouselEvent;
import com.afcomponents.events.item.*;
function contentLoad (event:Event) {
for (var i:Number = 0; i<=myCarousel.length-1; i++) {
myCarousel.addItemEventListener (i, MouseEvent.CLICK, itemClick);
}
}
myCarousel.addEventListener(CarouselEvent.CONTENT_LOAD_START, contentLoad);
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 itemClick(event:ItemMouseEvent){
// you can store the URL in "data" in your XML file
var url:URLRequest = new URLRequest(event.target.data);
navigateToURL(url, "_self");
};
}
import flash.net.navigateToURL;
function itemClick(event:ItemMouseEvent){
// 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.
function itemClick(event:ItemMouseEvent){
if(myCarousel.getSelectedIndex()==event.index) {
// you can store the URL in "data" in your XML file
var url:URLRequest = new URLRequest(event.target.data);
navigateToURL(url, "_self");
};
}
if(myCarousel.getSelectedIndex()==event.index) {
// you can store the URL in "data" in your XML file
var url:URLRequest = new URLRequest(event.target.data);
navigateToURL(url, "_self");
};
}
Other Tutorials
