Build a photo display with IMG Loader
Updated: Jun 5, 2007
Views: 11771
Description: This tutorial will show you how to build a photo display with Flow List as a navigation, and IMG Loader as a display window.
Part I - The Completed Project
Note: If you want to use the free IMG Loader (Fade) component with this tutorial, you have to make some changes to the code presented here. For instructions, see this forum topic: http://www.afcomponents.com/forum/viewtopic.php?t=1324
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. I am using the Flow List Component, the IMG Loader Component (I used the Blur one here, but you could use any of them), and the Tooltip Component to build this application.
Part II - Setting Up the File
Assuming that you have all of the required components installed, the first step is to create a new Flash file. In this Flash file, add the Flow List, IMG Loader, and Tooltip components to the stage. Give these components instance names of myFlow, myLoader, and myTooltip, respectively. Position the components on the stage in a manner that looks good to you and use the parameter window to adjust the size and settings for each component. The only required settings are for tooltip:
Part III - Flow List XML
Now it is time to create your images and thumbnails and add them to the Flow List with XML. Check out the sample XML file for help on how XML should be formatted, etc.
Once you have created your images (note: I also used thumbnails) and XML, add the XML path to the contentXML property in the Flow List parameters. For the sample file:
contentXML:http://www.afcomponents.com/components/flow_list/loader_tutorial_content.xml
Part IV - The Code
Finally, let's step through the code.
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 am setting up and event listener to check when the Flow List is finished loading all of the images. For more about event listeners, check out the Adobe Website.
After the Flow List is finished loading, I get the selected item (firstItem), then create a content object (itemToLoad) for my IMG Loader. I set the properties for my IMG Loader content object from the properties of my selected item in the Flow List. Finally, I set the content property of my IMG Loader (myLoader.content) to the content object that I created.
This code will be very similar to the code that loads a new image when the user clicks an item in the Flow List, only we will listen for a different event.
Here I am listening for the user to click an item in the Flow List and then I load the selected item. You will notice that I also hide the Tooltip when the user clicks.
Note: there is a known bug with the item clicks where sometimes the event doesn't get fired. Hopefully by the time you are reading this, it is already fixed!
This code works exactly like the code to load the first item above.
Finally, we have some code here that controls the tooltip. The first part listens for the user to roll on to an item in the Flow List, and then sets the Tooltip content to the description of that item and displays the Tooltip.
The second part of this code simply listens for the user to roll out of an item in the Flow List and then hides the tooltip.
That's about it! If you have any comments, suggestions, or examples, etc you can post on the forum or send me an email matt at afcomponents dot com (wigz). Enjoy!
Note: If you want to use the free IMG Loader (Fade) component with this tutorial, you have to make some changes to the code presented here. For instructions, see this forum topic: http://www.afcomponents.com/forum/viewtopic.php?t=1324
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. I am using the Flow List Component, the IMG Loader Component (I used the Blur one here, but you could use any of them), and the Tooltip Component to build this application.
// placeholder while images are loading
myFlow.previewClip = "holder_mc";
// load first item after flow is done
myFlow.addEventListener("CONTENT_LOAD_COMPLETE", this);
function CONTENT_LOAD_COMPLETE() {
var firstItem:Object = myFlow.getSelectedItem();
var itemToLoad = new Object;
itemToLoad.path = firstItem.data;
itemToLoad.description = firstItem.description;
myLoader.content = itemToLoad;
}
// load selected item
myFlow.addEventListener("ITEM_ON_PRESS", this);
function ITEM_ON_PRESS(evnt:Object) {
myTooltip.hideTooltip();
var itemToLoad = new Object;
itemToLoad.path = evnt.target.data;
itemToLoad.description = evnt.target.description;
myLoader.content = itemToLoad;
}
// change and show tooltip on rollover
myFlow.addEventListener("ITEM_ON_ROLL_OVER", this);
function ITEM_ON_ROLL_OVER(evnt:Object) {
myTooltip.content = evnt.target.description;
myTooltip.showTooltip();
}
// hide tooltip on roll out
myFlow.addEventListener("ITEM_ON_ROLL_OUT", this);
function ITEM_ON_ROLL_OUT() {
myTooltip.hideTooltip();
}
myFlow.previewClip = "holder_mc";
// load first item after flow is done
myFlow.addEventListener("CONTENT_LOAD_COMPLETE", this);
function CONTENT_LOAD_COMPLETE() {
var firstItem:Object = myFlow.getSelectedItem();
var itemToLoad = new Object;
itemToLoad.path = firstItem.data;
itemToLoad.description = firstItem.description;
myLoader.content = itemToLoad;
}
// load selected item
myFlow.addEventListener("ITEM_ON_PRESS", this);
function ITEM_ON_PRESS(evnt:Object) {
myTooltip.hideTooltip();
var itemToLoad = new Object;
itemToLoad.path = evnt.target.data;
itemToLoad.description = evnt.target.description;
myLoader.content = itemToLoad;
}
// change and show tooltip on rollover
myFlow.addEventListener("ITEM_ON_ROLL_OVER", this);
function ITEM_ON_ROLL_OVER(evnt:Object) {
myTooltip.content = evnt.target.description;
myTooltip.showTooltip();
}
// hide tooltip on roll out
myFlow.addEventListener("ITEM_ON_ROLL_OUT", this);
function ITEM_ON_ROLL_OUT() {
myTooltip.hideTooltip();
}
Part II - Setting Up the File
Assuming that you have all of the required components installed, the first step is to create a new Flash file. In this Flash file, add the Flow List, IMG Loader, and Tooltip components to the stage. Give these components instance names of myFlow, myLoader, and myTooltip, respectively. Position the components on the stage in a manner that looks good to you and use the parameter window to adjust the size and settings for each component. The only required settings are for tooltip:
- autoDrag:true
- autoShow:false
- type:text
Part III - Flow List XML
Now it is time to create your images and thumbnails and add them to the Flow List with XML. Check out the sample XML file for help on how XML should be formatted, etc.
Once you have created your images (note: I also used thumbnails) and XML, add the XML path to the contentXML property in the Flow List parameters. For the sample file:
contentXML:http://www.afcomponents.com/components/flow_list/loader_tutorial_content.xml
Part IV - The Code
Finally, let's step through the code.
// 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 first item after flow is done
myFlow.addEventListener("CONTENT_LOAD_COMPLETE", this);
function CONTENT_LOAD_COMPLETE() {
var firstItem:Object = myFlow.getSelectedItem();
var itemToLoad = new Object;
itemToLoad.path = firstItem.data;
itemToLoad.description = firstItem.description;
myLoader.content = itemToLoad;
}
myFlow.addEventListener("CONTENT_LOAD_COMPLETE", this);
function CONTENT_LOAD_COMPLETE() {
var firstItem:Object = myFlow.getSelectedItem();
var itemToLoad = new Object;
itemToLoad.path = firstItem.data;
itemToLoad.description = firstItem.description;
myLoader.content = itemToLoad;
}
Here I am setting up and event listener to check when the Flow List is finished loading all of the images. For more about event listeners, check out the Adobe Website.
After the Flow List is finished loading, I get the selected item (firstItem), then create a content object (itemToLoad) for my IMG Loader. I set the properties for my IMG Loader content object from the properties of my selected item in the Flow List. Finally, I set the content property of my IMG Loader (myLoader.content) to the content object that I created.
This code will be very similar to the code that loads a new image when the user clicks an item in the Flow List, only we will listen for a different event.
// load selected item
myFlow.addEventListener("ITEM_ON_PRESS", this);
function ITEM_ON_PRESS(evnt:Object) {
myTooltip.hideTooltip();
var itemToLoad = new Object;
itemToLoad.path = evnt.target.data;
itemToLoad.description = evnt.target.description;
myLoader.content = itemToLoad;
}
myFlow.addEventListener("ITEM_ON_PRESS", this);
function ITEM_ON_PRESS(evnt:Object) {
myTooltip.hideTooltip();
var itemToLoad = new Object;
itemToLoad.path = evnt.target.data;
itemToLoad.description = evnt.target.description;
myLoader.content = itemToLoad;
}
Here I am listening for the user to click an item in the Flow List and then I load the selected item. You will notice that I also hide the Tooltip when the user clicks.
Note: there is a known bug with the item clicks where sometimes the event doesn't get fired. Hopefully by the time you are reading this, it is already fixed!
This code works exactly like the code to load the first item above.
// change and show tooltip on rollover
myFlow.addEventListener("ITEM_ON_ROLL_OVER", this);
function ITEM_ON_ROLL_OVER(evnt:Object) {
myTooltip.content = evnt.target.description;
myTooltip.showTooltip();
}
// hide tooltip on roll out
myFlow.addEventListener("ITEM_ON_ROLL_OUT", this);
function ITEM_ON_ROLL_OUT() {
myTooltip.hideTooltip();
}
myFlow.addEventListener("ITEM_ON_ROLL_OVER", this);
function ITEM_ON_ROLL_OVER(evnt:Object) {
myTooltip.content = evnt.target.description;
myTooltip.showTooltip();
}
// hide tooltip on roll out
myFlow.addEventListener("ITEM_ON_ROLL_OUT", this);
function ITEM_ON_ROLL_OUT() {
myTooltip.hideTooltip();
}
Finally, we have some code here that controls the tooltip. The first part listens for the user to roll on to an item in the Flow List, and then sets the Tooltip content to the description of that item and displays the Tooltip.
The second part of this code simply listens for the user to roll out of an item in the Flow List and then hides the tooltip.
That's about it! If you have any comments, suggestions, or examples, etc you can post on the forum or send me an email matt at afcomponents dot com (wigz). Enjoy!
Other Tutorials
