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>
