Flex 4 Slidedown Effect - actionscript-3

Question

I am attempting to recreate an effect that I found on (another site. When you hover over the gray header area a slide down menu is displayed.
The issue that I am having is that when I mouse over the area, the hiddenNav container instantly appears and does not have the nice move effect.
Here is my current code
<?xml version="1.0"?>
<!-- Simple example to demonstrate the WipeDown effect. -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:mx1="library://ns.adobe.com/flex/mx" currentState="normalMenu">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
protected function expandSubNavigation(event:MouseEvent):void
{
currentState=(currentState == 'hiddenMenu') ? 'normalMenu' : 'hiddenMenu';
}
]]>
</fx:Script>
<s:states>
<s:State name="normalMenu"/>
<s:State name="hiddenMenu"/>
</s:states>
<s:transitions>
<s:Transition id="myTransition" fromState="*" toState="*" >
<s:Parallel id="t1" targets="{[visibleNav,hiddenNav]}">
<s:Move duration="600"/>
</s:Parallel>
</s:Transition>
</s:transitions>
<s:BorderContainer x="0" y="0" width="100%" mouseOver="expandSubNavigation(event)" height="32" borderVisible="false" backgroundColor="#848484" >
<s:Label x="30" text="Lorem Ipsum" verticalCenter="0" color="#FFFFFF"/>
</s:BorderContainer>
<s:HGroup x="0" y="33" id="visibleNav" width="100%" height="24" gap="0">
<s:BorderContainer width="200" height="100%" borderVisible="false" backgroundColor="#227258" >
<s:Label text="Ipsum: " verticalCenter="0" left="10" color="#FFFFFF" fontSize="10"/>
</s:BorderContainer>
<s:BorderContainer width="100%" height="24" borderVisible="false" backgroundColor="#005C3F" >
</s:BorderContainer>
</s:HGroup>
<s:Group id="hiddenNav" alpha="0.9" x="0" y="0" y.hiddenMenu="33" includeIn="hiddenMenu" width="100%" height="50">
<s:BorderContainer width="100%" height="25" borderVisible="false" backgroundColor="#00110B" backgroundAlpha="0.9" y="0" x="0">
<s:Label text="Lorem Ipsum" x="0" y="0" color="0xFFFFFF"/>
</s:BorderContainer>
<s:BorderContainer width="100%" height="25" borderVisible="false" backgroundAlpha="0.9" backgroundColor="#333333" left="0" borderAlpha="0.9" y="25">
</s:BorderContainer>
</s:Group>
</s:Application>

Answer 1

problem was in targets attribute - it's useless to mention a Group there, here's your code fixed:
<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the WipeDown effect. -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:mx1="library://ns.adobe.com/flex/mx" currentState="normalMenu">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:states>
<s:State name="normalMenu"/>
<s:State name="hiddenMenu"/>
</s:states>
<s:transitions>
<s:Transition id="myTransition1" fromState="*" toState="*" >
<s:Sequence id="t1" targets="{[o0, o1]}">
<s:Move duration="600"/>
</s:Sequence >
</s:Transition>
</s:transitions>
<s:HGroup x="0" y="33" id="visibleNav" width="100%" height="24" gap="0">
<s:BorderContainer width="20%" height="100%" borderVisible="false" backgroundColor="#0000ff" >
<s:Label text="HGroup Ipsum: " verticalCenter="0" left="10" color="#FFFFFF" fontSize="10"/>
</s:BorderContainer>
<s:BorderContainer width="100%" height="24" borderVisible="false" backgroundColor="#005C3F" >
</s:BorderContainer>
</s:HGroup>
<s:Group id="hiddenNav" alpha="0.9" x="0" y="0" width="100%" mouseOut="if(event.stageY>60)currentState='normalMenu'">
<s:BorderContainer id="o0" width="100%" height="25" borderVisible="false" backgroundColor="#00110B" y="-20" x="0" y.hiddenMenu="33" y.normalMenu="-20">
<s:Label text="hiddenNav Lorem Ipsum" x="0" y="0" color="0xFFFFFF"/>
</s:BorderContainer>
<s:BorderContainer id="o1" width="100%" height="25" borderVisible="false" backgroundColor="#ffff00" y="5" y.hiddenMenu="58" y.normalMenu="5">
</s:BorderContainer>
</s:Group>
<s:BorderContainer x="0" y="0" width="100%" mouseOver="currentState='hiddenMenu'" height="32" borderVisible="false" backgroundColor="#848484" >
<s:Label x="30" text="BorderContainer Lorem Ipsum" verticalCenter="0" color="#FFFFFF"/>
</s:BorderContainer>
</s:Application>