Image overlapping/obscuring child UIComponent

Question

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"/>

Answer 1

I figured out my problem. It appears that I needed to add the
polygon to the parent of the Image instead of to the image itself.
Newby mistake.