Thanks Tim, this worked great.
On 6/16/08, Tim Hoff <[EMAIL PROTECTED]> wrote: > > 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> > > > >
