8 Replies Latest reply on Feb 22, 2011 12:38 PM by gspirido

    How do you Capture Mouse?



      I'm new at Flex and trying to make a graphics editor for which I need the user to be able to resize the graphs the same way most graphics editors do - with a resize box. So what I'm making now is a class (that extends UIComponent) that have 4 little squares (that extend UIComponent too) at the corners that the user should use as handles to resize something. So I all need to do right now is to make them react properly to mouse inputs: the one at the top right should have the same "x" position as the one at the bottom right if the user is moving the bottom right one and so on. What I do is call startDrag in the MOUSE_DOWN event for each square and then in the MOUSE_MOVE event I move the others squares accordingly. The problem is that the square being dragged moves faster than all the others. If I could just capture mouse and then do all the dragging stuff myself that would make it a lot easier. But it seems that they didn't implement that function so, does anyone know any other possible way to do what I'm trying to do?


        • 1. Re: How do you Capture Mouse?
          paul.williams Level 4

          Why don't you just update all the positions on the Mouse Move event?

          • 2. Re: How do you Capture Mouse?
            jsoldi Level 1

            That's what I do (except for the one I'm dragging) but as I said the one I'm dragging moves faster then the other ones I guess the program draws that one before calling the MOUSE_MOVE event.

            • 3. Re: How do you Capture Mouse?
              paul.williams Level 4

              Your post suggests you are unsure how to capture the mouse, but since you are successfully capturing mouse down and mouse move events it is not clear what you mean.

              • 4. Re: How do you Capture Mouse?
                jsoldi Level 1

                Well as far as I know the only way to capture mouse is by calling startDrag but that function doesn't just capture mouse but also, well, start's dragging right? I mean if you call CaptureMouse let's say on the Window's API you don't start dragging the object, you just start getting all the mouse events on that object even if the mouse is outside the object, so you can make the object respond to the mouse any way you want. I don't seem to find the same functionality on the startDrag function unless I'm missing something. So that's my question. What am I missing?

                • 5. Re: How do you Capture Mouse?
                  Flex harUI Adobe Employee

                  The equivalent of mouse capture in Windows is to call addEventListener with the capture param set to true (and optionally calling stopPropagation after processing).




                  Alex Harui

                  Flex SDK Developer

                  Adobe Systems Inc.

                  Blog: http://blogs.adobe.com/aharui

                  1 person found this helpful
                  • 6. Re: How do you Capture Mouse?
                    jsoldi Level 1

                    I've been messing with the addEventListener function and the capture parameter and reading about but still don't figure out how to make it behave as a CaptureMouse function. Can I get a little more detailed explanation? Let me be more detailed too: let's say I want to write a function that after is called by some object that extends UIComponent, all mouse events, no matter where they occur (even, if possible, when they occur outside the stage) that this object registered a listener for by calling addEventListener, are processed by this object, and all mouse events that this object didn't register a listener for just don't get processed by any other object at all. Of course I would then release the mouse somehow, it doesn't matter right now. So how would you accomplish this. If it's just not possible, please let me know so I find some way around it.

                    • 7. Re: How do you Capture Mouse?
                      jsoldi Level 1

                      Solved my problem. Here's the code in case is useful for anyone:



                      // Make an event listener like this for every mouse event

                      public function OnMouseDown(event:MouseEvent):void



                           if(event.target is DisplayObject){

                                if(!MouseOwner.contains(DisplayObject(event.target))) event.stopPropagation();


                           else event.stopPropagation();





                      public function CaptureMouse(Element:DisplayObjectContainer):void


                          this.addEventListener(MouseEvent.MOUSE_DOWN, OnMouseDown, true);

                          // Keep adding listeners for every mouse event

                          MouseOwner = Element;



                      • 8. Re: How do you Capture Mouse?

                        I'm attempting a similar endeavor, except with a "Resizer" SkinnableContainer  with a "selected" state... the benefit i'm trying to utilize is the ability to be able to show the arrows in the component without having to then change the x/y of the component itself... (in essence the "resizer" component should work like a group, except you can hide/show the arrows at will)... problem i'm having is apparently a SkinnableContainer is typed as a group when returned from a MouseEvent or any other way...