Adding title and description

Adding title and description

Published: 21 August 2009

1. Drag an instance of the Thumbnail Scroller component onto the Stage.

2. Create an XML file, as explained in this tutorial. Also add 2 additional attributes: title and description. You can name these additional attributes whatever you like. For example, you could name them "data1" and "data2".

<?xml version="1.0" encoding="utf-8"?>
<images>
     <image source="images/image1.jpg" title="Image 1" description="This is the 1st image."/>
     <image source="images/image2.jpg" title="Image 2" description="This is the 2nd image."/>
     <image source="images/image3.jpg" title="Image 3" description="This is the 3rd image."/>
     <image source="images/image4.jpg" title="Image 4" description="This is the 4th image."/>
     <image source="images/image5.jpg" title="Image 5" description="This is the 5th image."/>
     <image source="images/image6.jpg" title="Image 6" description="This is the 6th image."/>
     <image source="images/image7.jpg" title="Image 7" description="This is the 7th image."/>
     <image source="images/image8.jpg" title="Image 8" description="This is the 8th image."/>
     <image source="images/image9.jpg" title="Image 9" description="This is the 9th image."/>
     <image source="images/image10.jpg" title="Image 10" description="This is the 10th image."/>
     <image source="images/image11.jpg" title="Image 11" description="This is the 11th image."/>
     <image source="images/image12.jpg" title="Image 12" description="This is the 12th image."/>
     <image source="images/image13.jpg" title="Image 13" description="This is the 13th image."/>
     <image source="images/image14.jpg" title="Image 14" description="This is the 14th image."/>
</images>

3. Create 2 text fields which will contain the title and the description. Name them titleField and descriptionField.

4. Add the following code:

import com.flashotaku.events.ScrollerEvent;
myScroller.addEventListener(ScrollerEvent.ITEM_SELECTED, itemSelectedHandler);

function itemSelectedHandler(event:ScrollerEvent):void
{
titleField.text = "Title: " + event.data.title;
descriptionField.text = "Description: " + event.data.description;
}

The above code will display the title and description that corresponds to the item which is selected. You can get access to the additional attributes specified in the XML file using event.data. If you would add an attribute "mySpecialAttribute" you could get its value with event.data.mySpeciatAttribute.

You can see a working example here.