Advanced Flash Components

Working with Events in Stack: HyperLinking

Updated: Jan 14, 2008 Views: 1433

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: Stack AS3.0.

The Completed Project:

Complete Code:

import flash.utils.*;
import flash.events.MouseEvent;
import com.afcomponents.stack3d.*;
import com.afcomponents.events.StackEvent;
import com.afcomponents.events.item.*;
import flash.net.URLRequest;
import flash.net.navigateToURL;

//Item click event listener
function itemClick(event:ItemMouseEvent){
   if(myStack.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");
   };
}

//Content Load event listener
function contentLoad (event:Event) {
   for (var i:Number = 0; i<=myStack.length-1; i++) {
       myStack.addItemEventListener (i, MouseEvent.CLICK, itemClick);
   }
}
myStack.addEventListener(StackEvent.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 Stack component using XML. Also make sure that you give your Stack an instance name of myStack.

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 Stack 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 Stack 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 Stack 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.

Adding Mouse Click Event Listeners for Items in Stack

The first thing that we want to do is add an event listener for when the user clicks an item in the Stack. In order to add an event listener for the items in the Stack 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.stack3d.*;
import com.afcomponents.events.StackEvent;

function contentLoad (event:Event) {
   for (var i:Number = 0; i<=myStack.length-1; i++) {
       myStack.addItemEventListener (i, MouseEvent.CLICK, itemClick);
   }
}
myStack.addEventListener(StackEvent.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");
   };
}

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(myStack.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");
   };
}

AFComponents.com