Hi Steve, Would usually use state transitions for this, with a shorter duration, but the code below works the same way. Effects are smoothest when you set the from and to values. Not as smooth if you are applying an effect on a component that is percentage size based. For these, change something else that has a fixed size, and let the framework do the work for you. So, instead of applying the effects to panelRight, perform them on middlePanel.
-TH <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute" verticalScrollPolicy="off" horizontalScrollPolicy="off"> <mx:Script> <![CDATA[ private function showHideMiddle():void { middleVisible = !middleVisible; } [Bindable] private var middleVisible:Boolean = true; ]]> </mx:Script> <mx:Parallel id="hideMiddlePanel"> <mx:Resize duration="1000" widthFrom="100" widthTo="0"/> <mx:Fade duration="1000" alphaFrom="1" alphaTo="0"/> </mx:Parallel> <mx:Parallel id="showMiddlePanel"> <mx:Resize duration="1000" widthFrom="0" widthTo="100"/> <mx:Fade duration="1000" alphaFrom="0" alphaTo="1"/> </mx:Parallel> <mx:HBox left="10" top="10" width="90%" height="90%" verticalScrollPolicy="off" horizontalScrollPolicy="off"> <mx:Panel click="showHideMiddle()" id="panelLeft" width="100" height="100%" layout="absolute"> </mx:Panel> <mx:Panel id="panelMiddle" visible="{middleVisible}" width="100" height="100%" hideEffect="hideMiddlePanel" showEffect="showMiddlePanel" layout="absolute"> </mx:Panel> <mx:Panel id="panelRight" width="100%" height="100%" layout="absolute"> </mx:Panel> </mx:HBox> </mx:Application> --- In [email protected], "Steve Mathews" <[EMAIL PROTECTED]> wrote: > > I have a layout of three panels in an HBox. The first and second are > 100px wide and the third is 100%. I need to show/hide the middle > panel. When this happens I would like the third panel to move/resize > to fill the space. The problem is I have tried using view > states/transitions and just moveEffect/resizeEffect, but it all looks > horrible. Below is an example of the layout. Is there a > better/different way to do this that would give me a nice effect? > > Thanks. > > <?xml version="1.0" encoding="utf-8"?> > <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute" > verticalScrollPolicy="off" horizontalScrollPolicy="off"> > <mx:Script> > <![CDATA[ > private function showHideMiddle():void > { > middleVisible = !middleVisible; > } > > [Bindable] > private var middleVisible:Boolean = true; > > ]]> > </mx:Script> > > <mx:Move id="middleMove" duration="1000" /> > <mx:Resize id="middleResize" duration="1000" /> > > <mx:HBox left="10" top="10" width="90%" height="90%" > verticalScrollPolicy="off" horizontalScrollPolicy="off"> > <mx:Panel click="showHideMiddle()" id="panelLeft" width="100" > height="100%" layout="absolute"> > </mx:Panel> > <mx:Panel id="panelMiddle" visible="{middleVisible}" > includeInLayout="{middleVisible}" width="100" height="100%" > layout="absolute"> > </mx:Panel> > <mx:Panel id="panelRight" moveEffect="middleMove" > resizeEffect="middleResize" width="100%" height="100%" > layout="absolute"> > </mx:Panel> > </mx:HBox> > </mx:Application> >
