Adding an image to a Sprite

[BuckLemke]

I am trying to add an image to an existing sprite. The sprite currently just
is a filled area using it's graphics property. Attached is a simplified
example of what I am trying to do. I guess I am confused on why some
UIComponents allow children to be added, and others don't.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="init();" >
<mx:VBox width="100%" height="100%" id="vbox">
<mx:UIComponent width="100%" height="100%" id="uiComponent">

</mx:UIComponent>
</mx:VBox>
<mx:Script>
<![CDATA[
import mx.controls.Image;
private function init():void{
var s:Sprite = new Sprite();
s.graphics.lineStyle(2, 0xff0000);
s.graphics.drawCircle(200, 180, 180);
var img:Image = new Image();
img.load("../res/images/dart1.png");
uiComponent.addChild(s);
//this doesn't work
//uiComponent.addChild(img);
//this does
vbox.addChild(img);
//this is what I really want (also doesn't work)
//s.addChild(img);
}
]]>
</mx:Script>
</mx:Application>

[Kaotic101]

You are able to add the image to the VBox because it extends Box which extends
Container. Neither Sprite or UIComponent extend Container which is what gives
the ability for something to be able to have children added or removed. You can
read about what I'm talking about
http://livedocs.adobe.com/flex/3/langref/mx/core/Container.html.

[Q]The Container class contains the logic for scrolling, clipping, and dynamic
instantiation. It contains methods for adding and removing children. It also
contains the getChildAt() method, and the logic for drawing the background and
borders of containers.[/Q]

[BuckLemke]

Ok, that makes sense. And the Container class, will allow "appending" of
objects to it, automagically resizing as needed. However, what is the proper
way to add an image on top of something? Overlaying it instead of putting it
below (or to the left)?