Image content not defined in TileList

Question

I have two images on a canvas, one is directly on the canvas using inline code, the other is embedded in a tilelist. Both images render. When I click and drag the inline image, the drag proxy appears normally. When I click and drag the image in the tile list, I get an error when I try to make a copy of the bitmap. This is occurring because the content of the image in the tile list is NULL, even though the source value is correct and the image has been loaded. I'm assuming this is some sort of itemRenderer issue, but I'm not clear on how it retains the source of the image, but not the content. If it's duplicating the image and referencing another bitmap, how do I access that bitmap?
The code is below with the exception of the image.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.managers.DragManager;
        import mx.core.DragSource;
        [Bindable] private var images:ArrayCollection=new ArrayCollection;
            private function init():void{
                i.source="images/1.png"; //set image source that is placed directly on canvas, this image has a drag proxy
                var i2:Image=new Image; //create new image to be added into tile list, this image does not have a valid drag proxy because content is missing
                i2.source="images/1.png";
                images.addItem(i2);
            private function mouseMoveHandlerTileList(event:MouseEvent):void
                var tl:TileList=TileList(event.currentTarget);
                var image:Image=tl.selectedItem as Image;
                if (image){
                    //Here the image contains the correct source, but no content.
                    initiateDrag(event, image);
            private function mouseMoveHandlerImage(event:MouseEvent):void
                var image:Image=Image(event.currentTarget);
                if (image){
                    //Here the image does contain content
                    initiateDrag(event, image);
            private function initiateDrag(event:MouseEvent, image:Image):void{
                    var dragInitiator:Image=image;
                    var ds:DragSource = new DragSource();
                    ds.addData(image, "item");
                    var dragProxy:Image = new Image;
                    var data:BitmapData=Bitmap(image.content).bitmapData.clone(); //image.content is not null for imageon canvas, but is null for image in tile list
                    dragProxy.source=new Bitmap(data);
                    DragManager.doDrag(dragInitiator, ds, event, dragProxy);
    ]]>
</mx:Script>   
    <mx:Canvas id="c" width="100%" height="100%">
        <mx:Image id="i" mouseMove="mouseMoveHandlerImage(event)" x="400" y="400"/>
        <mx:TileList id="t" dataProvider="{images}" mouseMove="mouseMoveHandlerTileList(event)"
            x="0" y="0"
            >
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Image source="{data.source}"/>
                </mx:Component>
            </mx:itemRenderer>
            </mx:TileList>
    </mx:Canvas>
</mx:Application>

Answer 1

If this post answered your question or helped, please mark it as such.
Accessing items in containers when renders are used can be problematic, because Flex recycles the items for large data sets.
So this code works fine but uses a Repeater. You may have to do some thinking to rework your concept, but this works:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.managers.DragManager;
      import mx.core.DragSource;
      [Bindable] private var images:ArrayCollection=new ArrayCollection([
        "assets/images/BobSmith.jpg"
      private function mouseMoveHandlerTileList(event:MouseEvent):void {           
        var image:Image=Image(event.currentTarget);
        if (image){
          initiateDrag(event, image);
      private function mouseMoveHandlerImage(event:MouseEvent):void {           
        var image:Image=Image(event.currentTarget);
        if (image){
          initiateDrag(event, image);
      private function initiateDrag(event:MouseEvent, image:Image):void{
        var dragInitiator:Image=image;
        var ds:DragSource = new DragSource();
        ds.addData(image, "item");
        var dragProxy:Image = new Image;
        var data:BitmapData=Bitmap(image.content).bitmapData.clone(); //image.content is not null for imageon canvas, but is null for image in tile list
        dragProxy.source=new Bitmap(data);
        DragManager.doDrag(dragInitiator, ds, event, dragProxy);
    ]]>
  </mx:Script>   
  <mx:HBox>
    <mx:Canvas id="canvas" width="400" height="600" borderColor="0x000000" borderStyle="solid" borderThickness="3">
      <mx:Repeater id="rp" dataProvider="{images}">
        <mx:Image id="img" source="{rp.currentItem}" mouseMove="mouseMoveHandlerTileList(event)"/>         
      </mx:Repeater>
    </mx:Canvas>
    <mx:Image id="i" mouseMove="mouseMoveHandlerImage(event)" source="assets/images/BobSmith.jpg"/>
  </mx:HBox>
</mx:Application>