Free Flowing Code

Usually drag proxies in Flex are a simple thing. You take whatever you want to drag, throw it in a bitmap asset and use it or if you are dragging and image, just use the image source directly.

However, there are cases where you need something more complex. I ran into an issue recently while trying to set a Canvas with rounded corners as the drag proxy.
The rounded corners were coming through fine, but there was a nice white background (with square corners) on the bitmap asset that wouldn’t come off.

The solution was to set transparent to true while making the bitmap asset AND to assign a background color to the asset. If you don’t assign a background color, your transparency won’t work.
I’ve seen this happen in other cases when using Flex, so when in doubt, try setting a background color, even if you don’t need it.

Here’s some sample code to create a drag proxy and the bitmap asset

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// drag proxy which will create a thick transparent border around the bitmap asset
var dragProxy:Canvas = new Canvas();
dragProxy.width = dragInitiator.width + 15;
dragProxy.height = dragInitiator.height + 15;
dragProxy.setStyle("backgroundColor","#BBBBBB");
dragProxy.setStyle("backgroundAlpha",".5");
 
// the bitmap asset			
var contentBitmap:BitmapAsset = new BitmapAsset();
contentBitmap.bitmapData = new BitmapData(dragInitiator.width, dragInitiator.height,true,0x000000);
contentBitmap.bitmapData.draw(dragInitiator);
contentBitmap.x = 8;
contentBitmap.y = 8;
 
// add the bitmap asset to the drag proxy
dragProxy.rawChildren.addChild(contentBitmap);