2 Replies Latest reply on Sep 2, 2009 12:48 PM by aligned2009

    Image content not defined in TileList

    aligned2009 Level 1

      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>

        • 1. Re: Image content not defined in TileList
          Gregory Lafrance Level 6

          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>

          • 2. Re: Image content not defined in TileList
            aligned2009 Level 1

            Just a note in case someone else had this issue, I had to change

             

            <mx:Image id="img" source="{rp.currentItem}" mouseMove="mouseMoveHandlerTileList(event)"/>

             

            to

             

            <mx:Image id="img" source="{rp.currentItem.source}" mouseMove="mouseMoveHandlerTileList(event)"/>

             

            but I'm not really clear on the reason why the image content wouldn't be included, or at least have a means to getting at the content.