Thursday, April 21, 2011

Working with clipboard in AIR: Part 8

In this tutorial we will learn how to add a small half-transparent version of the dragged object to the cursor when we're dragging it.

It is possible to show the image of the object we're dragging by passing a BitmapData object to the doDrag() method as the third optional parameter.

Firstly, in the MOUSE_DOWN function, we create the image.

var objImage:BitmapData = new BitmapData(myObject.width, myObject.height);
objImage.draw(myObject);

Now we can simply pass this bitmap data to the doDrag() method:

NativeDragManager.doDrag(myObject, myClip, objImage);

The full code so far:

myObject.addEventListener(MouseEvent.MOUSE_DOWN, mDown);

function mDown(MouseEvent):void
{
var myClip:Clipboard = new Clipboard();
myClip.setData(ClipboardFormats.TEXT_FORMAT, "This is some text!");
var objImage:BitmapData = new BitmapData(myObject.width, myObject.height);
objImage.draw(myObject);
NativeDragManager.doDrag(myObject, myClip, objImage);
}

myField.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, onDragIn);

function onDragIn(evt:NativeDragEvent):void{
NativeDragManager.acceptDragDrop(myField);
}

myField.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, onDragDrop);

function onDragDrop(evt:NativeDragEvent):void{
myField.text = evt.clipboard.getData(ClipboardFormats.TEXT_FORMAT).toString();
}

Now, if we try dragging our object (which can be a movieclip, button, textfield, anything), we can see a smaller half-transparent version of the object attached to our cursor when we're dragging it.

There's only one problem though - the image's top left corner is always in the center of the cursor. It might not be a bad thing, but you probably want your object image to appear the way so that if we, for example, started dragging the object by clicking in its center, the smaller image should appear the way that it looks like we're dragging its center as well.

We can do that by creating a Point object that stores the coordinates of the point that we've clicked on the object when we started dragging it, and apply this object to the doDrag() method as the fourth parameter. We need to coordinates to be negative here for this to work correctly:

var objPoint:Point = new Point(-myObject.mouseX, -myObject.mouseY);
NativeDragManager.doDrag(myObject, myClip, objImage, objPoint);

And the final code:

myObject.addEventListener(MouseEvent.MOUSE_DOWN, mDown);

function mDown(MouseEvent):void
{
var myClip:Clipboard = new Clipboard();
myClip.setData(ClipboardFormats.TEXT_FORMAT, "This is some text!");
var objImage:BitmapData = new BitmapData(myObject.width, myObject.height);
objImage.draw(myObject);
var objPoint:Point = new Point(-myObject.mouseX, -myObject.mouseY);
NativeDragManager.doDrag(myObject, myClip, objImage, objPoint);
}

myField.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, onDragIn);

function onDragIn(evt:NativeDragEvent):void{
NativeDragManager.acceptDragDrop(myField);
}

myField.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, onDragDrop);

function onDragDrop(evt:NativeDragEvent):void{
myField.text = evt.clipboard.getData(ClipboardFormats.TEXT_FORMAT).toString();
}

Thanks for reading!

Related:

Working with clipboard in AIR: Part 1
Working with clipboard in AIR: Part 2
Working with clipboard in AIR: Part 3
Working with clipboard in AIR: Part 4
Working with clipboard in AIR: Part 5
Working with clipboard in AIR: Part 6
Working with clipboard in AIR: Part 7
Working with clipboard in AIR: Part 9
Working with clipboard in AIR: Part 10

No comments:

Post a Comment