How to remove login panel upon clicking anywhere on screen in flex

i am using following code to popup a login panel whenever i click on some specific button. the problem is th开发者_如何学Ce login panel sticks it should be non visible again if i click somewhere else on screen. Anyone got ideas how to do that.

<s:Animate id="anim" targets="{[loginPanel]}" duration="1000">
            <s:SimpleMotionPath property="alpha" valueFrom="0.0" valueTo="1.0" />
            <s:SimpleMotionPath property="moveByY" valueBy="2"/>

        </s:Animate>

<mx:Button includeIn="Login" x="811" y="10" height="53" width="142" id="btnLoginStatus" icon="@Embed(source='assets/LogIn.jpg')" click="{ if(loginPanel.visible==true) {loginPanel.visible=false; loginPanelClicked = false;} else loginPanel.visible=true; mainViewStack.selectedIndex =0; anim.play(); loginPanelClicked = true;}" />

its all fine now add click = "loginPanelClicked = true " in bordercontainer of your login panel.

Try writing a method in a script block and link that function to the click property instead of inlining it. Can't tell from the code you provided what the method is supposed to actually do. It looks like it will play the animation regardless if the login panel is visible or not, and it will cause the login panel to always show (alpha=1.0 hint, hint).

If you write it out in a method instead of inlining it I think you'll spot your error with the else statement.