Hyperlinking with Flow List
Updated: Jun 14, 2007
Views: 7051
Description: This tutorial describes how to build hyperlinks with the Flow List Flash component and XML.
Part I - The Completed Project
To get started, here is all of the code and an example of what we are going to build. More advanced users may only need to look at this example, while others might want to read below where I will go through the code and what each part of it does.
Part II - Setting Up the File
Create a new Flash file and drag an instance of the Flow List Flash component to the stage. Name this instance "myFlow." For the purpose of this tutorial, you can set your contentXML path as follows:
contentXML:http://www.afcomponents.com/components/flow_list/loader_tutorial_content.xml
You can look at the example XML file here.
Part III - The Code
Let's look at the code. Good news here - it's only a little bit of code and it's easy! This code should be placed on it's own keyframe on the same frame as "myFlow."
Here I am setting a placeholder while the images are loading (in this case just a gray box). For more on how to create placeholders, check out the placeholder tutorial.
Here I listen for an item to be pressed and when that happens, I call a function to get the URL. The URL is stored in the "data" tag of my XML file and accessed through "evnt.target.data."
Note: I used ITEM_ON_PRESS here because of a known bug with ITEM_ON_RELEASE in version 1.1. In the next release, you will be able to use ITEM_ON_RELEASE.
That's about it. Email me at matt at afcomponents if you have any comments. Enjoy!
To get started, here is all of the code and an example of what we are going to build. More advanced users may only need to look at this example, while others might want to read below where I will go through the code and what each part of it does.
myFlow.previewClip = "holder_mc";
// load selected item
myFlow.addEventListener("ITEM_ON_PRESS", this);
function ITEM_ON_PRESS(evnt:Object) {
getURL(evnt.target.data, "_new");
}
// load selected item
myFlow.addEventListener("ITEM_ON_PRESS", this);
function ITEM_ON_PRESS(evnt:Object) {
getURL(evnt.target.data, "_new");
}
Part II - Setting Up the File
Create a new Flash file and drag an instance of the Flow List Flash component to the stage. Name this instance "myFlow." For the purpose of this tutorial, you can set your contentXML path as follows:
contentXML:http://www.afcomponents.com/components/flow_list/loader_tutorial_content.xml
You can look at the example XML file here.
Part III - The Code
Let's look at the code. Good news here - it's only a little bit of code and it's easy! This code should be placed on it's own keyframe on the same frame as "myFlow."
// placeholder while images are loading
myFlow.previewClip = "holder_mc";
myFlow.previewClip = "holder_mc";
Here I am setting a placeholder while the images are loading (in this case just a gray box). For more on how to create placeholders, check out the placeholder tutorial.
// load selected item
myFlow.addEventListener("ITEM_ON_PRESS", this);
function ITEM_ON_PRESS(evnt:Object) {
getURL(evnt.target.data, "_new");
}
myFlow.addEventListener("ITEM_ON_PRESS", this);
function ITEM_ON_PRESS(evnt:Object) {
getURL(evnt.target.data, "_new");
}
Here I listen for an item to be pressed and when that happens, I call a function to get the URL. The URL is stored in the "data" tag of my XML file and accessed through "evnt.target.data."
Note: I used ITEM_ON_PRESS here because of a known bug with ITEM_ON_RELEASE in version 1.1. In the next release, you will be able to use ITEM_ON_RELEASE.
That's about it. Email me at matt at afcomponents if you have any comments. Enjoy!
Other Tutorials
