2 Replies Latest reply on May 24, 2011 11:25 PM by Filmzaddict

    RollOver handlers issue

    Filmzaddict

      Hello,

       

      I have stumbled across the following problem. In flex i have defined (mxml or actionscript, doesnt matter) a group which contains a rectangle kind shape (Spark Path) and a few buttons which are all instances of a self made button component. Note that the buttons are not children of the rectangle path inside the group but are, like the path itself, direct siblings of the group, in other words, the buttons and path are same level children nodes of the group. Visually speaking however, buttons are placed over the group so they overlap with it. The buttons have a rollover/rollout event handled in them which just displays/hides a label on bottom of the button.

       

      The problem is... i also added a rollover/rollout handlers on the path (i ve also put the path additionally inside a skinnableContainer so it can handle events). The effect simply scales the path in x and y directions so it kind of inflates/deflates on rollover/rollout.

       

      Now because the buttons are not children of this path, when i move the mouse over the path, it inflates, but when i move the cursor further inside the path and over a button the rollout for the path happens which i DONT want(and also rollover for the button, thats ok), the path should stay inflated while the user has the mouse anywhere inside its area.

       

      I also cant simply make the buttons children of the path, because they will scale along with the path, also not acceptable. Im sure this is a pretty common problem, i stumbled across it even when using pure actionscript, but i always somehow redesigned my interface because i couldnt deal with it properly.

       

      I also tried the hittesting functions and they arent much help in this situation, also event capture and bubbling as these are all separate events.

       

      Thanks for any reply.

        • 1. Re: RollOver handlers issue
          Flex harUI Adobe Employee

          Is the rollover attached to a common parent of all those things?

          • 2. Re: RollOver handlers issue
            Filmzaddict Level 1

            No, every button instance has its own handlers, and the skinnable container (holding the path) has the handlers, the group holding everything together doesnt have any. Looks something like this:

             

            <s:Group>

            ... some animate elements declarations

            ... some script

            <s:SkinnableContainer id="holder" rollOver="onPathRollOver(event)" rollOut="onPathRollOut(event)">

                 <s:Path id="dock" data="L 0 90 L 300 90 L 390 0 Z" x="-390" y="-20">

                      <s:fill>

                           <s:SolidColor color="0x000000" alpha="0.3" />

                      </s:fill>

                 </s:Path>

            </s:SkinnableContainer>

            <com:MainMenuButton id="btnCamera" x="11" y="10" ImageURI="art/icons/48_camera.png" Label="Video"/>     <------ each of these handles rollovers inside of them

            <com:MainMenuButton id="btnPhoto" x="53" y="10" ImageURI="art/icons/48_photo.png" Label="Panoramas"/>

            <com:MainMenuButton id="btnMap" x="119" y="10" ImageURI="art/icons/48_map.png" Label="Mini map"/>

            <com:MainMenuButton id="btnFullscreen" x="169" y="10" ImageURI="art/icons/48_fullscreen.png" Label="Full screen"/>

            <com:MainMenuButton id="btnQuit" x="237" y="10" ImageURI="art/icons/48_quit.png" Label="Exit"/>

            </s:Group>

             

            The path and buttons are not in a parent child relationship, but buttons sit on top of the path on stage.