[flexcoders] Simple Effects question that i cant figure out - using muliple views (states)

[jkasham]

Heres the problem, at first i tried using states for two hidden panels
that slide into view for filtering and making changes to a Application.
The problem is with states (I think) is that I want these to be
separate actions(one could be shown, both can be shown, or none can be
shown).
Ive tried using actionscript but with effects i couldnt figure out how
to change styles (example: 'right' or 'bottom' coordinates) with the
Move() effect. Any help is much appreciated, Thank heres an example of
the code.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
layout="absolute">
        
        <mx:Script>
                <![CDATA[
                        import mx.effects.Resize;
                        import mx.effects.Move;
                        import mx.effects.Parallel;     
                        
                        private var filterState:Boolean = false;
                        private var custPanelState:Boolean = false;
                        
                        public function filterHandler():void {
                                if(!filterState){
                                        vbox2.setStyle("right",0);
                                        panel1.width = panel1.width - 200;
                                        filterState = true;
                                }
                                else{
                                        vbox2.setStyle("right",-200);
                                        panel1.percentWidth = 100;
                                        filterState = false;
                                }       
                        }
                        
                        public function custPanelHandler():void {
                                
                                if(!custPanelState){
                                        vbox1.setStyle("bottom",0);
                                        panel1.height = panel1.height - 200;
                                        custPanelState = true;
                                }
                                else{
                                        vbox1.setStyle("bottom",-200);
                                        panel1.percentHeight = 100;
                                        custPanelState = false;
                                }
                        }
                        
                ]]>
        </mx:Script>
        
        
        <mx:HBox top="10" left="10">
                <mx:Button label="filter" click="filterHandler()"/>
                <mx:Button label="Profile" click="custPanelHandler()"/>
        </mx:HBox>


        <mx:Canvas width="100%" height="100%" id="canvas1" 
                           horizontalScrollPolicy="off" 
verticalScrollPolicy="off">
                
                <mx:Canvas width="100%" height="100%" left="2" top="40" 
id="mainPanel"
                               horizontalScrollPolicy="off" 
verticalScrollPolicy="off">
                        <mx:Panel id="panel1" width="100%" height="100%" 
layout="absolute">
                                <mx:Label text="HELLO" right="10" top="30"/>
                        </mx:Panel>
                        
                <mx:VBox backgroundColor="#33ff9D" height="200" width="100%"
bottom="-200" id="vbox1"/>
        </mx:Canvas>
                        
        <mx:VBox backgroundColor="#2FBD9D" width="200" height="100%"
right="-200" id="vbox2"/>
        
        </mx:Canvas>
</mx:Application>