<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    layout="absolute" 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:filters="flash.filters.*" 
    xmlns:local="*"
    backgroundColor="#FFFFFF"
    backgroundGradientColors="{ [0xFFFFFF, 0x663300] }">
        
    <mx:Script>
        <![CDATA[
            import mx.effects.easing.Bounce;
            import mx.effects.easing.Exponential;
            
            [Bindable]
            private var defaultEffectValue : Number = 5;
            [Bindable]
            private var maxEffectValue : Number = 55;
            
            private function onMouseDown() : void
            {
                myPanel.startDrag();
                systemManager.addEventListener( MouseEvent.MOUSE_UP, onMouseUp );
                
                mouseUpEffect.end();
                mouseDownEffect.play();
            }
            
            private function onMouseUp( event : Event = null ) : void
            {
                myPanel.stopDrag();
                systemManager.removeEventListener( MouseEvent.MOUSE_UP, onMouseUp );
                
                mouseDownEffect.end();
                mouseUpEffect.play();
            }
            
            public function set animationProperty( value : Number ) : void
            {
                var filter : DropShadowFilter = new DropShadowFilter();
                filter.distance = value;
                myPanel.filters = [ filter ];
                
                myPanel.alpha = 1- ((value / maxEffectValue )/2);
            }
        ]]>
    </mx:Script>
    
    <mx:AnimateProperty id="mouseDownEffect" duration="1000" target="{ this }" property="animationProperty" fromValue="{ defaultEffectValue }" toValue="{ maxEffectValue }" easingFunction="{ Exponential.easeOut }" />
    <mx:AnimateProperty id="mouseUpEffect" duration="1000" target="{ this }" property="animationProperty" fromValue="{ maxEffectValue }" toValue="{ defaultEffectValue }" easingFunction="{ Exponential.easeOut }"/>
    
    <local:Grid width="100%" height="100%" />
    
    <mx:Panel id="myPanel" width="280" height="190" x="10" y="10" mouseDown="onMouseDown()"
        title="Sample Panel" borderColor="#CCCCCC" borderAlpha=".75" layout="absolute">
        
        <mx:filters>
            <filters:DropShadowFilter distance="5" />
        </mx:filters>
        
        <mx:Text selectable="false" text="This is a sample panel.  Click on it and drag it around the canvas.  Notice that the component opacity changes as you click and let go.   The drop shadow also animates to give the illusion of 3D. " top="0" left="0" right="0" bottom="0"  fontWeight="bold" fontSize="14"/>
        
    </mx:Panel>
    
    
</mx:Application>