Question

I’m making a custom component that shows a little drop down area after you hover on the username. I’m using two states, up and hover to toggle my drop down box.

My problem is that it thinks I’m leaving the component level Group after I leave the username. Then the second level group (my drop down) disappears.

I’ve tried re-attaching an event handler to my component level Group on a callLater in my mouse over function but that didn’t work.

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         mouseOver="groupLogIn_mouseOverHandler(event)" 
         mouseOut="groupLogIn_mouseOutHandler(event)"
        >
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import spark.skins.SparkSkin;
            protected function groupLogIn_mouseOverHandler(event:MouseEvent):void
            {

                this.currentState = "hover";
            }

            protected function groupLogIn_mouseOutHandler(event:MouseEvent):void
            {

                this.currentState = "up"
            }
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="up"/>
        <s:State name="hover"/>
    </s:states>

    <s:Label id="lblUsername" color="0xffffff" fontSize="14" right="18" top="5"/>

    <s:Group  includeIn="hover" width="160" height="110" top="20" right="0" >
        <s:Rect top="0" right="0" bottom="0" left="0">
            <s:fill>
                <s:SolidColor color="0x1a1a1a"/>
            </s:fill>
        </s:Rect>
    </s:Group>
</s:Group>

Answer 1

You need a “hitzone” for your mouse events. Right now parts of your component are completely transparent. When the mouse goes over a transparent zone, the MOUSE_OUT event is triggered. (When I say ‘transparent’, µi actually mean there’s nothing there at all).

Luckily this can easily be fixed: just add a Rect that covers the entire area below the other components and set its alpha to 0. This makes the Rect invisible to the user, but it can still react to mouse events.

<s:Rect id="hitzone" top="0" right="0" bottom="0" left="0">
   <s:fill>
       <s:SolidColor alpha="0" />
   </s:fill>
</s:Rect>

<s:Label id="lblUsername" />

...