So I’ve gotten a few questions about how to place custom icons in the List component, like the ones on the gotoAndLearn() site. So here is the code block that I use. The instance name of my List component is “tl” in this case:
[as]tl.iconFunction = function(item) {
if(item.data.indexOf(“aftereffects”)!=-1) return “ae”;
if(item.data.indexOf(“flash”)!=-1) return “flashIcon”;
if(item.data.indexOf(“swift”)!=-1) return “swiftIcon”;
if(item.data.indexOf(“photoshop”)!=-1) return “photoshopIcon”;
}[/as]
The List component has an event called “iconFunction” that you will need to set up. It is called when the List is instantiated and it calls it for every item in the list. Each time it sends the item and you need to define a parameter to catch it. I used “item” in the above example. Then you simply do some checking to determine what icon is appropriate for that item, and return it. In the above code you will see that I have four different icon MovieClips in my library called “ae”, “flashIcon”, “swiftIcon”, and “photoshopIcon.” Make sure to set up the linkage ID for your MovieClips.
But lets say that you only need one icon for all of the items in the list. Then your “iconFunction” definition would look like:
[as]tl.iconFunction = function(item) {
return “yourIconMovieClip”;
}[/as]
