Flex 4.x Example showing dialog sliding down and compressing VDiv below

TestTransition.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/mx"
					   xmlns:yahoo="http://www.yahoo.com/astra/2006/mxml"
					   xmlns:local="*">
	<fx:Declarations>
		<s:Parallel id="showRect"
					
					duration="400"
					effectStart="pod.includeInLayout=true;"
					>
			<s:Move3D target="{pod}" yFrom="-110" yTo="0" />
			<s:Resize target="{vdiv}" heightBy="-120"/>
			<s:Move target="{vdiv}" yTo="120"/>
		</s:Parallel>
		<s:Parallel id="hideRect"
					duration="400"
					effectEnd="pod.includeInLayout=false"
					>
			<s:Move3D target="{pod}" yFrom="0" yTo="-110" />
			<s:Resize target="{vdiv}" heightTo="{topGroup.height}"/>
			<s:Move target="{vdiv}" yTo="0"/>
		</s:Parallel>
	</fx:Declarations>
	
	
	<s:BorderContainer id="borderContainer" top="50" left="150"
					   backgroundColor="0xefdde5"  >
		
		<s:Group id="topGroup" width="{hSlider.value}" height="{vSlider.value}" 
				  clipAndEnableScrolling="true"
				  resize="onResize(event)"
				  >
			
			<s:VGroup id="pod" width="100%" includeInLayout="false" gap="0">
				<s:Rect id="bgnd" left="0" right="0" top="0" bottom="0"   radiusX="0">
					<s:fill>
						<s:SolidColor color="0xF0F0C8" />
					</s:fill>
				</s:Rect>
				
				<s:BorderContainer id="header" width="100%" height="20" 
								   backgroundColor="0x538833" >
					<s:Label text="Pod Title" x="5" y="3" />
				</s:BorderContainer>
				
				<s:BorderContainer id="slider" width="100%"  height="90" 
								   backgroundColor="0xF0F0C8">
					<s:VGroup width="100%"
							  paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
						
						<s:Label text="This is a label"  />
						<s:TextInput id="ti" width="100%" />
						<s:Button label="Button"  />
					</s:VGroup>
				</s:BorderContainer>
			</s:VGroup>
			
			<mx:VDividedBox id="vdiv" width="100%" height="100%" minHeight="60" verticalScrollPolicy="off">
				<s:VGroup id="vgroup2" width="100%" height="100%" >
					<s:Rect width="100%" height="100%">
						<s:fill>
							<s:SolidColor color="0x883355" />
						</s:fill>
						<s:stroke>
							<s:SolidColorStroke color="0xFFFFFF" />
						</s:stroke>
					</s:Rect>
				</s:VGroup>
				<s:VGroup id="vgroup3" width="100%" height="100%" minHeight="40">
					<s:Rect width="100%" height="100%">
						<s:fill>
							<s:SolidColor color="0x005577" />
						</s:fill>
						<s:stroke>
							<s:SolidColorStroke color="0xFFFFFF"  />
						</s:stroke>
					</s:Rect>
				</s:VGroup>
			</mx:VDividedBox>
		</s:Group>
		
	</s:BorderContainer>
	<!-- <local:Pod id="pod2" width="100%" /> -->
	
	<s:VGroup x="20" y="50" >
		<s:Button id="button" label="Play Effect"
				  x="20" y="20"
				  click="onClick()" />
		<s:Label text="{currentState}" />
		<s:VSlider id="vSlider" minimum="20" maximum="500" liveDragging="true" value="250"  />
		<s:HSlider id="hSlider" minimum="20" maximum="400" liveDragging="true" value="110" />
	</s:VGroup>
	
	
	
	<fx:Script>
		<![CDATA[
			import mx.events.ResizeEvent;
			
			private function onResize(event:ResizeEvent) : void 
			{
				var yoffset:int = pod.includeInLayout ? 120 : 0;
				vdiv.height = event.target.height - yoffset;
				vdiv.width = event.target.width;
			}
			
			private function onClick() : void 
			{
				if( pod.includeInLayout )
				{
					showRect.end();
					hideRect.play();
				}
				else
				{
					hideRect.end();
					showRect.play();
				}
			}
		]]>
	</fx:Script>
</s:WindowedApplication>