Panel resize effect
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" implements="mx.managers.IHistoryManagerClient"> <mx:Script> import mx.managers.HistoryManager; public function loadState(state:Object):void { if (state) { currentState = state.currentState; searchString = searchInput.text = state.searchString; }else { currentState = ''; } } public function saveState():Object { var state:Object = {}; state.currentState = currentState; state.searchString = searchString; return state; } [Bindable] public var searchString:String; public function doSearch():void { currentState = "results"; } public function reset():void { currentState = ''; } </mx:Script> <mx:states> <mx:State name="results"> <mx:SetProperty target="{p}" name="width" value="100%" /> <mx:SetProperty target="{p}" name="height" value="100%" /> <mx:SetProperty target="{p}" name="title" value="Results" /> <mx:AddChild relativeTo="{searchFields}"> <mx:Button label="Reset" click="reset()" /> </mx:AddChild> <mx:AddChild relativeTo="{p}"> <mx:Label text="Search results for {searchString}" /> </mx:AddChild> </mx:State> </mx:states> <mx:Panel id="p" title="Search" resizeEffect="Resize"> <mx:HBox id="searchFields" defaultButton="{b}"> <mx:TextInput id="searchInput" /> <mx:Button id="b" label="Go" click="doSearch();" /> </mx:HBox> </mx:Panel> </mx:Application>