1 Reply Latest reply on Dec 4, 2007 7:16 PM by Darrell Loverin

    mouse events + remove image problems

    ljonny18 Level 1
      Hi I am having problems removing children from my custom components using “mouseOver” events.

      For example – I have an image, and when I “mouseOver” the image the image changes to another image etc…
      This works fine, however, the image is also “clickable” and when clicks opens a new window. This leaves my image remaining in the “mouseOver” state, when theoretically is is not in a “mouseOver” state.

      I assume the problem occurs due to the fact when the link is clicked, a new window has been opened therefore the flex app has lost focus to another window, thus leaving it in the “mouseOver” state. I have tried to add a “mouseDown” event to remove the image but I get the following error:

      ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.


      I am using the following AS within my component:


      I embed my images

      [Embed(source='../images/link.png')]
      public var linkClass:Class;
      public var linkImg:Sprite;

      [Embed(source='../images/linkOver.png')]
      public var linkOverClass:Class;
      public var linkOverImg:Sprite;


      set them up

      linkImg = new Sprite();
      var linkIcon:Bitmap = new linkClass();
      linkImg.addChild(linkIcon);

      linkImg.buttonMode = true;
      linkImg.useHandCursor = true;
      linkImg.mouseChildren = false;



      linkOverImg = new Sprite();
      var linkOverIcon:Bitmap = new linkOverClass();
      linkOverImg.addChild(linkOverIcon);

      linkOverImg.buttonMode = true;
      linkOverImg.useHandCursor = true;
      linkOverImg.mouseChildren = false;

      addChild(linkImg);


      linkImg.addEventListener(MouseEvent.MOUSE_OVER, mouseOverLink);
      linkOverImg.addEventListener(MouseEvent.MOUSE_OUT, mouseOutLink);
      linkOverImg.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownLink);
      linkOverImg.addEventListener(MouseEvent.CLICK, mouseClickLink);


      eventListener functions:

      public function mouseOverLink(eventObj:MouseEvent):void
      {
      this.addChild(guageArrowOverImg);
      }

      public function mouseOutLink(eventObj:MouseEvent):void
      {
      removeChild(guageArrowOverImg);
      }

      public function mouseDownLink(eventObj:MouseEvent):void
      {
      removeChild(guageArrowOverImg);
      }

      public function mouseClickLink(eventObj:MouseEvent):void
      {
      var linkClick:URLRequest = new URLRequest(" http://…");
      navigateToURL(linkClick,"_blank");
      }
        • 1. Re: mouse events + remove image problems
          Darrell Loverin Level 4
          Sounds like the error is coming from this function:

          public function mouseOutLink(eventObj:MouseEvent):void
          {
          removeChild(guageArrowOverImg);
          }

          The code snippet doesn't show where guageArrowOverImg is defined. To help troubleshoot the problem I would try using an explicit parent for the removeChild() call instead of leaving it to "this". For example

          guageArrowOverImg.parent.removeChild(guageArrowOverImg);