<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

    <mx:Style>
        @font-face {
            src: local("Arial");
            fontFamily: ArialEmbedded;
            fontWeight: normal;
        }        
        @font-face {
            src: local("Arial");
            fontFamily: ArialEmbedded;
            fontWeight: bold;
        }
        Application {
            font-family: ArialEmbedded;
        }
    </mx:Style>
    <mx:Script>
        <![CDATA[
            import mx.containers.HBox;
            import mx.controls.Button;
            import mx.controls.Label;
            import mx.events.EffectEvent;
            
            private var numRowsAdded:int = 1;
            private function addRow():void
            {
                var newButton:Button = new Button();
                newButton.label = "Delete Me";
                var buttonColor:uint = Math.random() * 255 << 16 |
                    Math.random() * 255 << 8 | Math.random() * 255;
                newButton.setStyle("color", buttonColor);
                newButton.setStyle("textRollOverColor", buttonColor);
                newButton.addEventListener("click", removeRow);
                newButton.alpha = 0;
                vbox.addChildAt(newButton, Math.min(vbox.numChildren, 1));
                resizeIn.toValue = Math.max(vbox.getChildAt(0).height, 25);
                fadeIn.alphaTo = 1;
                resizerFader.target = newButton;
                resizerFader.play();
            }
            
            private function removeRow(event:Event):void
            {
                faderResizer.addEventListener(EffectEvent.EFFECT_END, 
                    removeEffectEndHandler);
                faderResizer.target = event.currentTarget;
                faderResizer.play();
                
            }
            private function removeEffectEndHandler(event:EffectEvent):void
            {
                vbox.removeChild(Button(event.effectInstance.target));
            }
            
        ]]>
    </mx:Script>
    <mx:Sequence id="resizerFader" duration="1000">
        <mx:AnimateProperty id="resizeIn" property="height" fromValue="0"/>
        <mx:Fade id="fadeIn" alphaTo="1"/>
    </mx:Sequence>
    <mx:Sequence id="faderResizer" duration="1000">
        <mx:Fade id="fadeOut" alphaTo="0"/>
        <mx:AnimateProperty id="resizeOut" property="height" toValue="0"/>
    </mx:Sequence>
    <mx:Button label="Add Row" click="addRow()"/>
    <mx:VBox id="vbox" y="50" horizontalCenter="0">
        <mx:Button label="Delete Me" click="removeRow(event)"/>
        <mx:Button label="Delete Me" click="removeRow(event)" color="white" textRollOverColor="white"/>
    </mx:VBox>
    
</mx:Application>