I have a container
<s:Group visible="true" x="100" y="0" width="582" height="300"
id="debugGroup" name="debugGroupName" >
<comps:circle id="rect2" />
<s:Rect width="100" height="100">
<s:fill><s:SolidColor /></s:fill>
</s:Rect>
</s:Group>
So far I accessed it from my other class like this:
FlexGlobals.topLevelApplication.debugGroup.addElement(comp_green_new_component);
I wanted to scroll my debugGroup container so I added a Scroller.
<s:Scroller width="100%" height="100%" id="scrollerDebug">
<s:Group visible="true" x="100" y="0" width="582" height="300"
id="debugGroup" name="debugGroupName" >
<comps:circle id="rect1" />
<comps:circle id="rect2" />
<s:Rect width="100" height="100">
<s:fill><s:SolidColor /></s:fill>
</s:Rect>
</s:Group>
</s:Scroller
Now I can't access my debugGroup from my other class like this:
FlexGlobals.topLevelApplication.scrollerDebug.debugGroup.addElement(comp_green);
Why is this?
How to access correctly my inner container debugGroup from actionscript?
You don't need to give the full path to the element, if you have its id
So replace
FlexGlobals.topLevelApplication.scrollerDebug.debugGroup.addElement(comp_green);
with
FlexGlobals.topLevelApplication.debugGroup.addElement(comp_green);
Related
I am trying to develop a Call Log with Flex, and I have some troubles with the ItemRenders. In fact, here is what I've got :
And when you click on an Item, the size of the Item changes to display more details :
But as you can see, every item are affected by this resize. The Tile Layout is taking the highest render and apply its height to the others.
Here is my code, where I call the Render :
<s:DataGroup id="TileListUsers"
left="10" right="10" top="10" bottom="10" width="300"
itemRenderer="assets.render.CallLogRender"
dataProvider="{ListCall}"
horizontalCenter="0" verticalCenter="0" contentBackgroundAlpha="0.0">
<s:layout>
<s:TileLayout horizontalGap="15" requestedColumnCount="1" verticalGap="15" />
</s:layout>
</s:DataGroup>
And in the Render, I'm using three BorderContainer, one for the first block, one for the second block, and one for the details displayed between them :
override public function set data(value:Object):void {
super.data = value;
CallerIDLabel.text = "Appel du : " + data.CallerID;
StartHourLabel.text = data.StartHour;
StartDateLabel.text = data.StartDate;
if(value == null){
return;
}
if (!data.Answer){
ShadowColor.color=0xCC9900;
CallerIDLabel.text = "Appel manqué : " + data.CallerID;
SourceIcon.source=callFinished;
}
}
private function onClick():void{
if (data.Answer){
this.height=170;
DetailLineContainer.visible=true;
SecondBlocContainer.visible=true;
}
}
]]>
</fx:Script>
<s:BorderContainer id="DetailLineContainer" x="0" y="39" width="100%" height="101"
backgroundAlpha="0.0" borderColor="#FFFFFF" borderVisible="false"
borderWeight="1" cornerRadius="5" visible="false" >
<s:Line id="LineDetail" x="25" y="0" height="100%">
<s:stroke>
<s:SolidColorStroke color="#aeaeae" weight="3" caps="square"/>
</s:stroke>
</s:Line>
<s:Graphic x="21" y="25" width="8" height="8">
<s:Ellipse x="0" y="0" width="8" height="8">
<s:fill>
<s:SolidColor id="CircleColor" color="#5b5b5b"/>
</s:fill>
</s:Ellipse>
</s:Graphic>
<s:Graphic x="21" y="53" width="8" height="8">
<s:Ellipse x="0" y="0" width="8" height="8">
<s:fill>
<s:SolidColor id="CircleColor2" color="#5b5b5b"/>
</s:fill>
</s:Ellipse>
</s:Graphic>
<s:Label id="DurationLabel" x="35" y="25" width="250"
color="#929292" fontFamily="proxima" fontSize="13"
text="Durée de l'appel : 13 minutes 23 secondes" textAlign="left"
verticalAlign="top"/>
<s:Label id="QualityLabel" x="35" y="52" width="250"
color="#929292" fontFamily="proxima" fontSize="13"
text="Qualité de l'appel : moyenne" textAlign="left"
verticalAlign="top"/>
</s:BorderContainer>
<s:BorderContainer id="FirstBlocContainer" width="100%" height="50" click="onClick()" backgroundColor="#FFFFFF"
borderColor="#FFFFFF" borderVisible="false" borderWeight="1" cornerRadius="5">
<s:BorderContainer width="50" height="50" borderVisible="false" backgroundAlpha="0.0">
<s:Graphic id="Shadow" x="0" y="0" width="100%" height="100%">
<s:Rect x="0" y="0" width="50" height="50" bottomLeftRadiusX="5" topLeftRadiusX="5">
<s:fill>
<s:SolidColor id="ShadowColor" color="#70b13c"/>
</s:fill>
</s:Rect>
</s:Graphic>
<s:Image id="SourceIcon" horizontalCenter="0"
source="#Embed('/assets/images/CallLogIncomming.png')" verticalCenter="0"/>
</s:BorderContainer>
<s:Graphic id="CallState" x="0" bottom="0" width="100%" height="2%" alpha="0.15">
<s:Rect x="0" y="-1" width="260" height="2">
<s:fill>
<s:SolidColor color="#000000"/>
</s:fill>
</s:Rect>
</s:Graphic>
<s:Label id="CallerIDLabel" left="60" width="180" color="#5B5B5B" fontFamily="proxima"
fontSize="14" maxDisplayedLines="2" text="Appel du : 0636360400" textAlign="left"
verticalAlign="middle" verticalCenter="0"/>
<s:Label id="StartDateLabel" y="10" right="5" width="50" color="#C0C4C3" fontSize="12" text="08/04/14"
textAlign="center" verticalAlign="middle"/>
<s:Label id="StartHourLabel" y="24" right="5" width="50" color="#C0C4C3" fontSize="12"
text="12:45" textAlign="center" verticalAlign="middle"/>
</s:BorderContainer>
<s:BorderContainer id="SecondBlocContainer" x="0" y="117" width="100%" height="50"
backgroundColor="#FFFFFF" borderColor="#FFFFFF" borderVisible="false"
borderWeight="1" cornerRadius="5" visible="false" >
<s:BorderContainer width="50" height="50" borderVisible="false" backgroundAlpha="0.0">
<s:Graphic id="CallState2" x="0" y="0" width="100%" height="100%">
<s:Rect x="0" y="0" width="50" height="50" bottomLeftRadiusX="5" topLeftRadiusX="5">
<s:fill>
<s:SolidColor id="ShadowColor2" color="#B1463C"/>
</s:fill>
</s:Rect>
</s:Graphic>
<s:Image id="SourceIcon2" horizontalCenter="0"
source="#Embed('/assets/images/CallLogFinished.png')" verticalCenter="0"/>
</s:BorderContainer>
<s:Graphic id="Shadow2" x="0" bottom="0" width="100%" height="2%" alpha="0.15">
<s:Rect x="0" y="-1" width="260" height="2">
<s:fill>
<s:SolidColor color="#000000"/>
</s:fill>
</s:Rect>
</s:Graphic>
<s:Label id="CallerIDLabel2" left="60" width="180" color="#5B5B5B" fontFamily="proxima"
fontSize="14" maxDisplayedLines="2" text="Vous avez raccroché" textAlign="left"
verticalAlign="middle" verticalCenter="0"/>
<s:Label id="StopDateLabel" y="10" right="5" width="50" color="#C0C4C3" fontSize="12" text="08/04/14"
textAlign="center" verticalAlign="middle"/>
<s:Label id="StopHourLabel" y="24" right="5" width="50" color="#C0C4C3" fontSize="12"
text="12:45" textAlign="center" verticalAlign="middle"/>
</s:BorderContainer>
Is there a way to say to the TileLayout to just increase the height of one component without affecting the others ?
Why use TileLayout if you have only one column? Use VerticalLayout and set its variableRowHeight property to true. Here's an example.
I have a chart with a legend
<s:VGroup width="100%" height="100%">
<mx:LineChart width="100%" height="100%" id="lineChart" showDataTips="true" dataTipFunction="columnChartDataTipFunction">
<mx:verticalAxis>
<mx:LinearAxis id="v1" title="Position" labelFunction="labelFuncY"/>
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:CategoryAxis
categoryField="kh_formatted_date" />
</mx:horizontalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer id="vax" axis="{v1}" placement="top"/>
</mx:verticalAxisRenderers>
</mx:LineChart>
<s:BorderContainer width="100%" borderColor="#ff0000" borderWeight="4">
<mx:Legend verticalGap="0" dataProvider="{lineChart}" clipContent="true" maxWidth="100"/>
</s:BorderContainer>
</s:VGroup>
I have this result but I was expecting scrollbars, also maxWidth seems to be ignored.
Use this structure instead
<s:BorderContainer width="100" borderColor="#ff0000" borderWeight="4">
<s:Scroller left="0" right="0" top="0" bottom="0">
<s:Group left="0" right="0" top="0" bottom="0">
<mx:Legend verticalGap="0" dataProvider="{myChart}" clipContent="true"/>
</s:Group>
</s:Scroller>
</s:BorderContainer>
to control the width of the legend you can use the width property of the BorderContainer
I have created a Popup that is custom component extends Canvas i want the look of the canvas is similar like that showed in image. is there any idea that how to create a pop up similar like that.
Here i am giving you the sample code that i have done till now...
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="550" height="350" backgroundAlpha="0">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
public function btnImage_click():void
{
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
<mx:Image source="Images/close.png" top="4" left="500" useHandCursor="true" buttonMode="true" click="{btnImage_click();}" />
<mx:Fade id="fadeIn" duration="700" alphaFrom="0.0" alphaTo="1.0"/>
<mx:VBox height="100%" width="100%" horizontalAlign="center" verticalAlign="middle">
<mx:Canvas height="85%" width="90%" backgroundColor="#ffffff" backgroundAlpha="1" >
<mx:VBox height="100%" width="100%">
<mx:HBox height="70%" width="100%" horizontalAlign="center" verticalAlign="middle">
<mx:Image id="btnPrevious" source="Images/previous.png"
click="{vsSubImages.selectedIndex--}" enabled="{vsSubImages.selectedIndex!=0}"/>
<mx:ViewStack height="100%" width="90%" creationPolicy="all" id="vsSubImages">
<mx:VBox height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" showEffect="{fadeIn}">
<mx:Image id="img1" maintainAspectRatio="true" height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" />
</mx:VBox>
<mx:VBox height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" showEffect="{fadeIn}">
<mx:Image id="img2" maintainAspectRatio="true" height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" />
</mx:VBox>
<mx:VBox height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" showEffect="{fadeIn}">
<mx:Image id="img3" maintainAspectRatio="true" height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" />
</mx:VBox>
</mx:ViewStack>
<mx:Image id="btnNext" source="Images/next.png"
click="{vsSubImages.selectedIndex++}" enabled="{vsSubImages.selectedIndex!=2}" />
</mx:HBox>
<mx:Box height="30%" width="100%" horizontalAlign="right" verticalAlign="top">
<mx:Form height="100%" width="100%">
<mx:FormItem label="Project Name : " >
<mx:Label id="lblName" />
</mx:FormItem>
<mx:FormItem label="Description : " >
<mx:Label id="lblDescription" />
</mx:FormItem>
<mx:FormItem label="Technology Name : " >
<mx:Label id="lblTechnology" />
</mx:FormItem>
</mx:Form>
</mx:Box>
</mx:VBox>
</mx:Canvas>
</mx:VBox>
</mx:Canvas>
The main idea is to show the close button on the Canvas currently i am getting that behind the Canvas.
Please Help me.
Put the <mx:Image source="Images/close.png" top="4" left="500" useHandCursor="true" buttonMode="true" click="{btnImage_click();}" /> tag at the very bottom of the code before last </mx:Canvas> tag. Because canvas behaves like last is at the very top in the z-index.
I've had this problem for quite a while now, and I just cant get my head around it..
First, a short explanation of my program:
It's going to be used to view complicated scenes in 3D, but to make it work on laptops it's instead showing pre-rendered 360 degree renders of the objects.
When you load an object, it first buffers 360 frames into memory, so that you can rotate around this object smoothly. When you release the mouse button, it loads in the high-res image of that frame.
Then, you should be able to zoom in and move around to inspect the model closer.
Problem here is when I have the scrollbars enabled it wont work properly.
Firstly, I had a problem where the vertical scrollbar moved out of the picture when I was scrolling the horizontal scrollbar.
Then after some more testing, they now stay where they should, but when I zoom in (will post code below) the horizontal scrollbar is not able to go far enough to the left to show the whole image.
What happens is, when I zoom in, the scrollbar remains at it's left position, but I zoom in on the center of the image (zooming, by scaling the container. The image fill the container).
My problem is probably just a result of me overlooking some basic understanding. And sorry if the code is a bit messy, I've only done a little bit of clean up. The code I post below is without any scrollbars visible.
You can see that I've tried using scrollbar components too, and it works somehow. But I'm not able to scale the scrollbar depending on the content, so if I zoom in or out, the handle you drag on the scrollbar will be the same...
Thanks a LOT in advance to anyone trying to help me figure this out!
Image of app running if needed:
Code:
<mx:Panel x="0" y="0" width="100%" height="100%" titleIcon="#Embed('assets/img/cog_01.png')" title="vCog Subsea - Draugen Project">
<mx:HDividedBox x="0" y="0" width="100%" height="100%" liveDragging="true">
<mx1:TabNavigator width="30%" height="100%" chromeColor="#4B4B4B" tabHeight="20">
<mx1:DividedBox width="100%" height="100%" label="Components" borderVisible="true">
<mx:VBox width="100%">
<mx:Tree id="treeView" x="0" y="0" width="100%" height="100%"
itemRenderer="components.CustomTreeItemRenderer"
paddingBottom="2" showRoot="true"
itemClick="treeItemClick(event)"
itemOpen="treeItemOpen(event)" />
<mx:Canvas width="100%" height="30" styleName="information">
<mx:CheckBox id="infoCheckBox" x="10" y="5" width="100%" label="Information"
click="checkbox1_clickHandler(event)" enabled="true"
selected="{infoview_visible}" styleName="infoCheckBox"/>
</mx:Canvas>
</mx:VBox>
</mx1:DividedBox>
</mx1:TabNavigator>
<mx:HBox width="100%" height="100%">
<mx1:TabNavigator id="myTabs" width="100%" height="100%" dropShadowVisible="false" tabHeight="20">
<mx1:DividedBox id="my3DView" width="100%" height="100%"
label="3D View Main" borderVisible="true" >
<!-- CONTAINER -->
<mx:Canvas id="container" width="100%" height="100%"
resize="resizeHandler(event)"
mouseWheel="videoBufferWheel(event)"
horizontalScrollPolicy="off"
verticalScrollPolicy="off" >
<!-- CONTENT -->
<mx:Canvas id="content"
horizontalScrollPolicy="off"
verticalScrollPolicy="off">
<mx:Canvas id="videoCanvas" width="100%" height="100%"
mouseDown="videoBufferMDown(event)"
mouseMove="videoBufferMMove(event)"
mouseUp="videoBufferMUp(event)" >
<s:Image id="imageBuffer" visible="false" smooth="true" width="100%" height="100%" scaleMode="stretch" />
<s:Image id="imageFull" visible="false" smooth="true" width="100%" height="100%" scaleMode="stretch"/>
<s:Image id="imageMask" visible="false" smooth="true" width="100%" height="100%" scaleMode="stretch" />
</mx:Canvas> <!-- videoCanvas END -->
</mx:Canvas> <!-- CONTENT END -->
<!-- Scrollbars -->
<s:HScrollBar id="hScroll" bottom="0" left="0" right="16" maximum="100" minimum="-100"
pageSize="100" change="scroll(event)"
visible="false" />
<s:VScrollBar id="vScroll" right="0" top="0" bottom="16" maximum="100" minimum="-100" pageSize="100"
change="scroll(event)"
visible="false" />
<!-- Camera controlls -->
<mx:Panel id="panelCamera" visible="true" right="20"
bottom="20" width="130" height="50"
backgroundAlpha="0.6" backgroundColor="#383838"
borderAlpha="0.5" chromeColor="#2A2A2A"
contentBackgroundAlpha="1.0"
contentBackgroundColor="#737373" cornerRadius="0"
dropShadowVisible="false" focusColor="#999999"
layout="absolute" styleName="panelCamera"
symbolColor="#878787" title="Select camera">
<mx:Button id="btnTotal" x="10" y="3" toggle="true" buttonMode="true" mouseChildren="false" styleName="camButtonTotalStyle" click="camTotalClick(event)"/>
<mx:Button id="btnClose" x="50" y="3" toggle="true" buttonMode="true" mouseChildren="false" styleName="camButtonCloseStyle" click="camCloseClick(event)"/>
<mx:Button id="btnExploded" x="90" y="3" toggle="true" buttonMode="true" mouseChildren="false" styleName="camButtonExplodedStyle" click="camExplodedClick(event)"/>
</mx:Panel>
<!-- Full/Color image loading bar -->
<mx:ProgressBar id="myProgressFull" y="10" width="95%" height="15" visible="false" alpha="0.5" mode="manual"
label="Downloading Image" fontSize="7" chromeColor="#6D5D52"
fontWeight="normal" horizontalCenter="-8"
labelPlacement="center"/>
<mx:ProgressBar id="myProgressColor" y="27" width="95%" height="15" visible="false" alpha="0.5" mode="manual"
label="Downloading Hilights" fontSize="7" chromeColor="#6D5D52"
fontWeight="normal" horizontalCenter="-8"
labelPlacement="center"/>
<!-- Main loading bar -->
<mx:Panel id="myLoadingPanel" top="100" width="520" height="107"
backgroundAlpha="0.5"
backgroundColor="#3A3A3A"
borderVisible="true"
contentBackgroundColor="#7E7E7E"
dropShadowVisible="false"
fontWeight="normal" fontThickness="0" fontSize="10" color="#959595"
headerHeight="15"
horizontalAlign="center"
horizontalCenter="0"
layout="absolute"
title="Downloading and buffering content..."
visible="false"
verticalAlign="middle"
titleIcon="#Embed('assets/img/loading_01.png')"
>
<mx:ProgressBar id="myProgressBarTotal" y="10" width="500"
label="Total progress" chromeColor="#474747"
color="#FFFFFF" fontWeight="normal"
horizontalCenter="0" indeterminate="false" mode="manual"
labelPlacement="center"/>
<mx:ProgressBar id="myProgressBar" y="41" width="500"
label="Downloading data" chromeColor="#6D5D52"
fontWeight="normal" horizontalCenter="0"
labelPlacement="center" source="_SWFLoader"/>
<mx:ProgressBar id="myProgressBar2" y="61" width="500"
label="Buffering data" chromeColor="#75584A"
color="#EB7738" fontWeight="normal"
horizontalCenter="0" indeterminate="false" mode="manual"
labelPlacement="center"/>
<mx:ProgressBar id="myProgressBarVisual" y="32" width="500" height="5" label=" "
horizontalCenter="0" indeterminate="true"
labelPlacement="center"/>
</mx:Panel>
</mx:Canvas> <!-- CONTAINER END -->
</mx1:DividedBox>
<mx1:DividedBox width="100%" height="100%" label="Main Map" borderVisible="true">
<mx:Canvas width="100%" height="100%" click="overviewClickHandler(event)" >
<s:Image id="overColor" width="100%" height="100%" source="assets/img/overview_color_001.png" scaleMode="letterbox" visible="false" />
<s:Image id="overFull" width="100%" height="100%" source="assets/img/overview_001.png" scaleMode="letterbox" smooth="true" />
</mx:Canvas>
</mx1:DividedBox>
</mx1:TabNavigator>
</mx:HBox>
</mx:HDividedBox>
</mx:Panel>
Functions:
public function videoBufferWheel(event:MouseEvent):void{
var delta:Number=(event.delta*myZoom)/300;
if(myZoom+delta<1){
delta=1-myZoom;
}else if(myZoom+delta>3){
delta=3-myZoom;
}
myZoom += delta;
resizeHandler(null);
event.stopImmediatePropagation();
}
public function resizeHandler(event:Event):void{
var _w:Number=container.width-scrollerSize;
var _h:Number=container.height-scrollerSize;
if(_w/_h<aspect){
content.height=_h*myZoom;
content.width=(_h*myZoom)*aspect;
}else{
content.height=(_w*myZoom)/aspect;
content.width=(_w*myZoom);
}
content.x = (-content.width/2)+container.width/2+(hOffset*(container.width-content.width)/200);
content.y = (-content.height/2)+container.height/2+(vOffset*(container.height-content.height)/200);
}
If I understand right, you want to move a scroll button when user zooms an image. But where do you add a code for this action? I mean you should add a code to move the scroll button.
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>
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>