<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            import mx.effects.easing.Elastic;
            import mx.collections.ArrayCollection;
            
            [Bindable]
            private var myDP:ArrayCollection = new ArrayCollection(
                ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P']);
            
            private function deleteItem():void {
                // As each item is removed, the index of the other items changes.
                // So first get the items to delete, then determine their indices
                // as you remove them.
                var toRemove:Array = [];
                for (var i:int = 0; i < tlist0.selectedItems.length; i++)
                    toRemove.push(tlist0.selectedItems[i]);
                for (i = 0; i < toRemove.length; i++)
                    myDP.removeItemAt(myDP.getItemIndex(toRemove[i]));
            }

            private var zcount:int = 0;
            private function addItem():void {
                // Always add the new item after the third item,
                // or after the last item if the length is less than 3.
                myDP.addItemAt("Z"+zcount++,Math.min(3,myDP.length));
            }                        
        ]]>
    </mx:Script>

    <!-- Define a custom data effect as a Sequence effect. -->
    <mx:Sequence id="itemsChangeEffect1">
        <mx:Blur 
            blurYTo="12" blurXTo="12" 
            duration="300" 
            perElementOffset="150"
            filter="removeItem"/>
        <mx:Parallel>
            <mx:Move 
                duration="750" 
                easingFunction="{Elastic.easeOut}" 
                perElementOffset="20"/>
            <mx:RemoveItemAction 
                startDelay="400" 
                filter="removeItem"/>
            <mx:AddItemAction  
                startDelay="400" 
                filter="addItem"/>
            <mx:Blur 
                startDelay="410" 
                blurXFrom="18" blurYFrom="18" blurXTo="0" blurYTo="0" 
                duration="300" 
                filter="addItem"/>
        </mx:Parallel>
    </mx:Sequence>        

    <mx:Panel title="AddItemEffect/RemoveItemEffect Example" width="75%" height="75%" 
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <!-- This TileList uses a custom data change effect -->
        <mx:TileList id="tlist0" 
            height="100%" width="100%" 
            fontSize="18" fontStyle="bold"
            columnCount="4" rowCount="4" 
            direction="horizontal" 
            dataProvider="{myDP}" 
            allowMultipleSelection="true" 
            offscreenExtraRowsOrColumns="4" 
            itemsChangeEffect="{itemsChangeEffect1}"/>
    
        <mx:Button 
            label="Delete selected item(s)" 
            click="deleteItem();"/>
        <mx:Button 
            label="Add item" 
            click="addItem();"/>
        
    </mx:Panel>         
</mx:Application>