States + Transitions плавная смена положения объектов

[djyamato]

Здравствуйте
У меня вопрос:
Есть 2 прямоугольника в VGroup
Есть 2 стэйта "normal" "extended"
Один прямоугольник в обоих стэйтах, а второй, только в extended

Так вот, возможно ли сделать transition чтобы прямоугольник, который в "extended" стэйте плавно всплыл под первым прямоугольником, не помещая всплываемый прямоугольник в "extended" стэйт ?

Сейчас нижний (всплывающий) прямоугольник попросту появляется без анимации "всплытия"

Вот код:

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		xmlns:mx="library://ns.adobe.com/flex/mx">
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("com.TestComponent")]
	</fx:Metadata>
	<s:states>
		<s:State name="normal"/>
		<s:State name="extended"/>
	</s:states>
 
	<s:transitions>
		<s:Transition fromState="normal" toState="extended">
			<s:Sequence>
				<s:Fade target="{extendedeGroup}" alphaFrom="0" alphaTo="1" duration="1000"/>
				<s:Move target="{extendedeGroup}" yFrom="100" yTo="0" duration="1000"/>
			</s:Sequence>
 
		</s:Transition>	
		<s:Transition fromState="extended" toState="normal">
			<s:Sequence>
				<s:Fade target="{extendedeGroup}" alphaFrom="1" alphaTo="0" duration="1000"/>
				<s:Move target="{extendedeGroup}" yFrom="0" yTo="100" duration="1000"/>
			</s:Sequence>
		</s:Transition>	
	</s:transitions>
 
	<s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
 
		<s:Group id="normalGroup" includeIn="normal,extended">
			<s:Rect width="100" height="40">
				<s:fill>
					<s:SolidColor color="0xFF0000"/>
				</s:fill>
			</s:Rect>
		</s:Group>
 
		<s:Group id="extendedeGroup" includeIn="extended">
			<s:Rect width="100" height="80">
				<s:fill>
					<s:SolidColor color="0xFF00FF"/>
				</s:fill>
			</s:Rect>
		</s:Group>
	</s:VGroup>
</s:Skin>

и сам компонент

<s:SkinnableComponent xmlns:fx="http://ns.adobe.com/mxml/2009" 
					  xmlns:s="library://ns.adobe.com/flex/spark" 
					  xmlns:mx="library://ns.adobe.com/flex/mx">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<fx:Metadata>
		[SkinState(name="normal")]
		[SkinState(name="extended")]
	</fx:Metadata>
 
	<fx:Script>
		<![CDATA[
			protected var _state:String;
 
			public function set state(val:String):void
			{
				_state=val;
				invalidateSkinState();
			}
			public function get state():String
			{
				return _state;
			}
 
			override protected function getCurrentSkinState():String 
			{
				return _state;
			}	
		]]>
	</fx:Script>
</s:SkinnableComponent>