rulururu

post Image does not displaying in custom ItemRenderer while dragging list’s item

February 4th, 2010

Filed under: Flash/Flex,MXML — Alex Bylim @ 11:40 pm

I’v spent a lot of time today trying to solve one issue. I had TileList and was using custom itemrenderer to display list’s item. My item-renderer had some textfields and image.
Issue: while dragging list’s item – image inside this draggable stuff does not displays. Was trying a lot of different ways, custom TileLists, dragProxies etc, no luck.

So how turned up, problem was with loading this image after dragImage created,  actually image seems to be loading, but! does not displays. So solution of this nightmare below:

1. Open custom item-renderer component mxml file

2. find your image tag, and change it to looks like this:

<mx:Image complete="thumbImageLoadComplete(event)" source="{data['thumb']}"  width="64" height="64" id="img" scaleContent="true" horizontalCenter="0" />

where is  source=”{data['thumb']}” image source that accept url to image(data['thumb']) and complete=”thumbImageLoadComplete(event)” event handler while image loading complete

3. Add this code

private function thumbImageLoadComplete(event:Event):void{
          var bp:Bitmap=dupeImage(img.content as Bitmap);
          img.source = bp; 
          data['thumb'] = dupeImage(bp);
        }
 
        private function dupeImage(source:Bitmap):Bitmap {
          var data:BitmapData = Bitmap(source).bitmapData;
          var bitmap:Bitmap = new Bitmap(data);
          return bitmap;
        }
 
 
        override public function set data(value:Object):void{
          super.data = value;
          if(data['thumb'] is Bitmap)
            data['thumb'] = dupeImage(data['thumb']); // we should copy bitmap itself everytime data changes, for example while filtering
        }

Where dupeImage is function that returns copied Bitmap from image content (source.content), in thumbImageLoadComplete we assign newly copied Bitmap to image source (img.source). And now attention!

data['thumb'] = dupeImage(img);

This line reassign data source value and assign Bitmap (copy of our image) instead using URL to image. Now i should to explain why we made this. By default TileList class using this class ListItemDragProxy for displaying stuff when drag items. If you’ll look inside this class you can see it create instances from your custom itemrenderer class and assign them the same values as in original items. So in code above we force images to use image Bitmap instead or url for loading image.

In this way we solve two problems – first is enabling image displaying(visible) while dragging item, second is preventing image loading second time(bandwidth & time saving)

data['thumb'] = dupeImage(img);
  • Przemek

    Hi
    I have same problem but in custom item render that i drag I load SWF by SWFLoader component.
    Any idea how to make this draggable SWF visible?

  • Alex Bylim

    Hi, if you load swf with SWFLoader then this is not issue described above. May be something else, you need to look into your code to find the reason why it does not work. If there is no obviously solution, then you can try to use DragManager.doDrag(…) to substitute default drag information, you just need to put there custom “dragProxy” as Image object, and source of this image to make Bitmap that taken as snapshot from your SWF in the drag starting moment.

  • http://www.google.com/ Miracle

    Got it! Thanks a lot again for heipnlg me out!

ruldrurd
Powered by WordPress, Web Design by Laurentiu Piron
Entries (RSS) and Comments (RSS)