Spreading Funkyness

In this tutorial we will learn the basics of native drag and drop in Adobe Air. Specifically we will see two examples:

• drag an image from a native application (Fireworks) and drop it onto an air application
• drag an image from an air application and drop it onto another air application

We will start by implementing the target application, which accepts the drop action. To enable this there are two behaviors to specify: what to do when something is dragged over the app and what to do when there is a drop action. These correspond to two events: nativeDragEnter and nativeDragDrop, both belonging to the WindowedApplication class. So we will start with this code.

1
2
3
4
5
6
7

<mx:WindowedApplication 
        xmlns:mx="http://www.adobe.com/2006/mxml" 
        layout="absolute" 
	nativeDragEnter="dragEnterHandler(event)" 
	nativeDragDrop="dropHandler(event)">
 
</mx:WindowedApplication>

Once associated the handlers we need to define them.

25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<mx:Script>
	<![CDATA[
 
	private function dragEnterHandler(e:NativeDragEvent):void {
		if (e.clipboard.hasFormat(ClipboardFormats.BITMAP_FORMAT)) {
			NativeDragManager.acceptDragDrop(this);
		}
	}
 
	private function dropHandler(e:NativeDragEvent):void {
		var data:BitmapData = e.clipboard.getData(ClipboardFormats.BITMAP_FORMAT) as BitmapData;
		var myBit:Bitmap = new Bitmap(data);
		stage.addChild(myBit);
	}
 
      ]]>
</mx:Script>

In the nativeDragEnter event we have to check whether the dragged item is of type bitmap, if yes we can accept the drag (lines 29-30). During the drag a copy of the item is stored in the system’s clipboard. To replicate it in the target application we have to read it (line 35), clone it (line 36) and then add it to the display tree (line 37). This is all we need to do in the target application. At this point we can already test the application. Let’s run it, open an image in Fireworks and drag&drop it. See the video below.

Now let’s move to the other case: we start dragging an image from another air application. Here we have to mimic the behavior of Fireworks above: copy in the system clipboard the image when there is a startDrag action. Let’s start by adding an image to the application.

1
2
3
4
5
6
7
8

<mx:WindowedApplication 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute">
 
	<mx:Image id="image" 
		source="logo.png" 
		mouseDown="startDragDrop(event)"/> 
</mx:WindowedApplication>

As you can see we attached a function to the mouseDown event. Now let’s define this function.

20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<mx:Script>
	<![CDATA[
 
	private function startDragDrop(e:MouseEvent):void {
 
		var data:BitmapData = new BitmapData(image.width, image.height);
		data.draw(image);
 
		// create my clipboard object to be passed to dragmanager
		var cb:Clipboard = new Clipboard();
		cb.setData(ClipboardFormats.BITMAP_FORMAT, data);
 
		// data here is a 'representative' of the dragged object during dragging.
		NativeDragManager.doDrag(this, cb, data); 
 
	}
	]]>
</mx:Script>

We create a copy of the image (lines 25-26). We use this in two cases: to put it in a clipboard object (line 30) and to provide feedback during the dragging (line 33). Now we can run both applications and check if everything is correct.

Simple uh? Please drop a comment if you have any followup question.
Source code is available.

Similar Posts

• Copy and Paste Images in Adobe Air
• Drag and Drop of Text in Adobe Air
• Drag and Drop of Images In Adobe Air