1 Reply Latest reply on Jan 28, 2008 1:07 PM by jtn23

    Image overlapping/obscuring child UIComponent

    jtn23
      Hi,

      I'm having a problem rendering a UIComponent on top of an image at runtime. I'm loading the image at runtime via network and then I add a child UIComponent to the image. What actually happens when I run it is that the polygon UIComponent is drawn slightly before the image is loaded. And so when the image does load, it loads on top of the polygon, thus completely obscuring it. In other words, you can't even see the polygon. What is happening there? I would like the polygon to render on top of the image. How do I delay the rendering of the polygon until after the image has finally loaded? Thanks for any help.

      private function changeImage(oEvent:ResultEvent):void {

      var test:ArrayCollection = ArrayCollection(oEvent.result);

      myPhoto.source = test.getItemAt(0);

      var polygon:UIComponent = new UIComponent();
      polygon.graphics.beginFill(0x0000FF);
      polygon.graphics.moveTo(startPt.x, startPt.y);
      polygon.graphics.lineTo(point1.x, point1.y);
      polygon.graphics.lineTo(point2.x, point2.y);
      polygon.graphics.lineTo(startPt.x, startPt.y);
      myPhoto.addChild(polygon);
      }


      <mx:Image id="myPhoto"
      dragDrop="dragDropHandler(event);"
      click="testClick(event);"
      x="10" y="10"/>