AddItemActionEffect

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" verticalAlign="top"

    horizontalAlign="center" backgroundGradientColors="[#994545, #530E0E]" paddingTop="0" backgroundGradientAlphas="[1.0, 1.0]">

   

    <mx:Script>

        <![CDATA[

            import mx.effects.easing.Elastic;

            import mx.collections.ArrayCollection;

           

            [Bindable]

            private var myDP:ArrayCollection = new ArrayCollection(

                ['A','B','C','D']);

            

            private var dpArr:Array = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P'];

           

            private function deleteItem():void {

                // Remove item from Array Collection

                if(myDP.length > 0){

                    myDP.removeItemAt(myDP.length-1);

                 }

            }

            private var zcount:int = 0;

            private function addItem():void {

                // Add item from source Array to Array Collection

                if(myDP.length < dpArr.length){

                    myDP.addItemAt(dpArr[myDP.length],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="AddItemActionEffect/RemoveItemActionEffect" layout="vertical" color="0xffffff" borderAlpha="0.15" width="500" height="240"

         paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center" top="10" left="10">

        

          <!-- This TileList uses a custom data change effect -->

        <mx:TileList id="tlist0"  color="0x323232" height="100%" width="100%" fontSize="18" fontStyle="bold"

            columnCount="4" rowCount="4" direction="horizontal" dataProvider="{myDP}" itemsChangeEffect="{itemsChangeEffect1}"/>

   

        <mx:Button label="Remove item" click="deleteItem();" color="0x323232"/>

        <mx:Button label="Add item" click="addItem();" color="0x323232"/>

    </mx:Panel>

</mx:Application>