Apache – Flex TileList item rollover effect

Good question. I'm sure someone'll offer up a more elegant solution, but a simple approach might simply be to add a null to your dataProvider at position 0, and having your itemRenderer handle the null by displaying some sort of alternate content, or nothing at all.

To extract the index of the clicked element, there are several properties on the ListEvent objects you might use -- event.currentTarget.selectedIndex (or event.currentTarget.selectedIndices, if you're using multi-selection), event.columnIndex and .rowIndex, or event.itemRenderer, which you can use in combination with the TileList's itemRendererToIndex property, among others.

Here's a quick-and-dirty app code demonstrating both of these approaches:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">

    <mx:Script>
        <![CDATA[

            import mx.controls.Alert;
            import mx.events.ListEvent;
            import mx.collections.ArrayCollection;

            private var dpSource:Array = [
                null, 
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"}, 
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"}
            ];      

            [Bindable]
            private var dp:ArrayCollection = new ArrayCollection(dpSource);

            private function myList_itemClick(event:ListEvent):void
            {
                Alert.show("You clicked the item at position (" + event.columnIndex + ", " + event.rowIndex + "), which is item " + myList.itemRendererToIndex(event.itemRenderer).toString() + " in the list.");
            } 

        ]]>
    </mx:Script>

    <mx:TileList id="myList" dataProvider="{dp}" itemClick="myList_itemClick(event)">
        <mx:itemRenderer>
            <mx:Component>
                <mx:Canvas>

                    <mx:Script>
                        <![CDATA[

                            override public function set data(value:Object):void
                            {
                                super.data = value;
                            }

                        ]]>
                    </mx:Script>

                    <mx:Image source="{data.src}" width="100" height="60" visible="{data != null}" />
                    <mx:Label text="No item!" visible="{data == null}" />

                </mx:Canvas>
            </mx:Component>
        </mx:itemRenderer>
    </mx:TileList>

</mx:Application>

Hope it helps! Post back with questions if you have 'em.

tilelist.scrollToIndex(index);