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
Related
I have a radioButton in an ItemRenderer of a List component. I am trying to set the selected value of each radioButton based on a field in the dataprovider (SchoolList.Athletics_Fav).
These traces show the correct value:
trace("value: " +value.Athletics_Fav2);
trace("selectetText: " +selectText);
This one is not.
trace("btnSelect: "+radBtnPhone.selected);
Anyone have a suggestion as to how I can set radBtnPhone.selected to the dataprovider value (SchoolList.Athletics_Fav)? Any help would be greatly appreciated.
Code:
]]>
</fx:Script>
<s:Group width="100%" height="100%">
<s:Rect width="100%" height="100%">
<s:fill><s:SolidColor color="0xffffff" /></s:fill>
</s:Rect>
<s:Line width="100%">
<s:stroke>
<s:SolidColorStroke weight="1" color="0xd3d3d3"/>
</s:stroke>
</s:Line>
</s:Group>
<s:HGroup id="bigGrpPhone" width="100%" verticalAlign="middle">
<s:HGroup id="grpPhone" gap="6" height="100%" width="95%" paddingLeft="2" paddingRight="2" paddingTop="2" verticalAlign="middle">
<s:BitmapImage id="imgPhone" source="{data.SchoolImage}" width="70" height="70" />
<s:Label id="schlNamePhone" maxDisplayedLines="1" width="100%" height="100%" text="{data.SchoolName}" verticalAlign="middle"/>
</s:HGroup>
<s:HGroup width="5%" horizontalAlign="center" verticalAlign="middle">
<s:RadioButton width="50" id="radBtnPhone" styleName="myRadioButton" />
</s:HGroup>
</s:HGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
Try this out:
<?xml version="1.0"?>
<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/mx"
>
<s:SkinnableDataContainer>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:ArrayList id="SchoolList">
<fx:Object SchoolName="Smith" Athletics_Fav="true" SchoolImage="./SchoolImage.png"/>
<fx:Object SchoolName="Jones" Athletics_Fav="false" SchoolImage="./SchoolImage.png"/>
<fx:Object SchoolName="Davis" Athletics_Fav="false" SchoolImage="./SchoolImage.png"/>
<fx:Object SchoolName="Cooper" Athletics_Fav="true" SchoolImage="./SchoolImage.png"/>
</mx:ArrayList>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:Group width="100%" height="100%">
<s:Rect width="100%" height="100%">
<s:fill><s:SolidColor color="0xffffff" /></s:fill>
</s:Rect>
<s:Line width="100%">
<s:stroke>
<s:SolidColorStroke weight="1" color="0xd3d3d3"/>
</s:stroke>
</s:Line>
<s:HGroup id="bigGrpPhone" width="100%" verticalAlign="middle">
<s:HGroup id="grpPhone" gap="6" height="100%" width="95%" paddingLeft="2" paddingRight="2" paddingTop="2" verticalAlign="middle">
<s:BitmapImage id="imgPhone" source="{data.SchoolImage}" width="70" height="70" />
<s:Label id="schlNamePhone" maxDisplayedLines="1" width="100%" height="100%" text="{data.SchoolName}" verticalAlign="middle"/>
</s:HGroup>
<s:HGroup width="5%" horizontalAlign="center" verticalAlign="middle">
<s:RadioButton width="50" id="radBtnPhone" styleName="myRadioButton" selected="{data.Athletics_Fav}"/>
</s:HGroup>
</s:HGroup>
</s:Group>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:SkinnableDataContainer>
</s:Application>
I figured out a simple solution and wanted to post here for others who may need it. I created a Boolean variable (btnPhValue) and set it's value based on the value of the field AthleticsFavs in my SchoolList array. Then I set the radioButton.selected value to the Boolean var I created. Works Perfectly!
<s:List id="phoneList" width="100%" height="100%" contentBackgroundColor="0x0065a4" fontSize="20"
dataProvider="{SchoolList}" >
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer >
<fx:Script>
<![CDATA[
override public function set data(value:Object):void
{
super.data = value;
var selectPhText = value.AthleticsFavs;
var btnPhValue:Boolean;
radBtnPhone.group=outerDocument.radGrp;
if (selectPhText == 1)
btnPhValue = true;
else
btnPhValue = false;
radBtnPhone.selected = btnPhValue;
}
]]>
</fx:Script>
<s:Group width="100%" height="100%">
<s:Rect width="100%" height="100%">
<s:fill><s:SolidColor color="0xffffff" /></s:fill>
</s:Rect>
<s:Line width="100%">
<s:stroke>
<s:SolidColorStroke weight="1" color="0xd3d3d3"/>
</s:stroke>
</s:Line>
</s:Group>
<s:HGroup id="bigGrpPhone" width="100%" verticalAlign="middle">
<s:HGroup id="grpPhone" gap="6" height="100%" width="95%" paddingLeft="2" paddingRight="2" paddingTop="2" verticalAlign="middle">
<s:BitmapImage id="imgPhone" source="{data.SchoolImage}" width="70" height="70" />
<s:Label id="schlNamePhone" maxDisplayedLines="1" width="100%" height="100%" text="{data.SchoolName}" verticalAlign="middle"/>
</s:HGroup>
<s:HGroup width="5%" horizontalAlign="center" verticalAlign="middle">
<s:RadioButton width="50" id="radBtnPhone" styleName="myRadioButton" />
<!-- <MyComp:myRadioButton width="50" id="radBtnPhone" styleName="myRadioButton" /> -->
</s:HGroup>
</s:HGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
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.
If you run the following mxml code, you'll see there's a gap between the TabBar and the BorderContainer. How to simply remove that gap? I'm having trouble laying it out. Nothing I enter in TabBar (e.g. top="10", or y="10") has any effect.
<?xml version="1.0" encoding="utf-8"?>
<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/mx" minWidth="955" minHeight="600">
<s:VGroup top="10" bottom="20" left="20" right="20">
<s:Group width="100%">
<s:HGroup left="0" top="2">
<s:Label id="titleTextId" text="My Title" fontWeight="bold" fontSize="18"/>
</s:HGroup>
<s:HGroup right="0" verticalAlign="middle">
<s:Button label="Button1" width="65"/>
<s:Button label="Button2" width="65" />
</s:HGroup>
</s:Group>
<s:TabBar id="tabs" dataProvider="{vs}"/>
<mx:ViewStack id="vs" height="100%" width="100%">
<s:NavigatorContent label="Tab 1" width="100%" height="100%">
<s:BorderContainer width="100%" height="100%" borderWeight="1" borderStyle="solid">
<s:Label left="3" top="5" text="This is my first tab..."/>
</s:BorderContainer>
</s:NavigatorContent>
<s:NavigatorContent label="Tab 2" width="100%" height="100%">
<s:BorderContainer width="100%" height="100%" borderWeight="1" borderStyle="solid">
<s:Label left="3" top="5" text="This is my second tab..."/>
</s:BorderContainer>
</s:NavigatorContent>
</mx:ViewStack>
</s:VGroup>
Try the gap attribute, this should do it!
<s:VGroup top="10" bottom="20" left="20" right="20" gap="0">
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>