Adobe AIR desktop native windows drag and drop

[daianc20000010]

Hi, have a problem doing something, I will try to explain below:

This is a hypothetical situation/application that describes what I need to do.

Consider a desktop AIR application with two native windows:

- main application window  - mainWindow

- another native window created by the mainWIndow, owned by mainWindow - secondWindow

The secondWindow acts like an image library, contains multiple image/photo thumbnails -> MovieClip objects with image thumbnails inside

The mainWindow contains placeholders for those image thumbs from the secondWindow -> just Movieclip objects with a square inside

I want to be able to drag the image thumbnails from the secondWindow onto a placeholder object(MovieClip) from mainWindow. While dragging, when I move over a placeholder movieclip from mainWindow with the mouse, I want it to react, by "glowing" or something, to indicate that it is ready to accept the drag.

When I pick/drag a thumbnail from the secondWindow, when moving over the mainWindow, the mainWindow does not react/not registering any mouse events to initiate the "glow action".

I have tried making the mainWindow active after the dragging action has been initiated from the secondWindow but that doesn't seem to make any difference. A drag (left mouse pressed and drag), initiated from outside the mainWindow, stops mainWindow from registering any mouse events (mouse_over, roll_over, roll_out, mouse_leave)

How do you drag and drop from two nativeWindows, the way I specified? Is this possible in AIR?

Thanks for taking the time to read this.

[JoãoCésar · Accepted solution]

Hi.

Here is a suggestion of how you can achieve this.

Basically the steps are:

- Create a new window;

- Fill it with the image thumbs added dynamically from the Library;

- Add a regular mouse down event to make the initial settings for the drag;

- Add native drag events to detect when the user is dragging over and out of the destination thumbnails, the current frame of these thumbnails and the end of the drag;

- To grab the image from the new window and send it to the main window, we get the bitmap data of the selected image thumb in the new window and send it to the clipboard.

AS3 code:

import flash.desktop.Clipboard;
import flash.desktop.ClipboardFormats;
import flash.desktop.NativeDragManager;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.DisplayObject;
import flash.display.DisplayObjectContainer;
import flash.display.InteractiveObject;
import flash.display.MovieClip;
import flash.display.NativeWindow;
import flash.display.NativeWindowInitOptions;
import flash.display.NativeWindowSystemChrome;
import flash.display.NativeWindowType;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.MouseEvent;
import flash.events.NativeDragEvent;
var options:NativeWindowInitOptions;
var mainWindow:NativeWindow;
var newWindow:NativeWindow;
var images:ImagesContainer;
var image0:Image0;
var image1:Image1;
var dragOverTarget:Object;
var targetFrame:uint = 1;
function start():void
{
     stage.align = StageAlign.TOP_LEFT;
     stage.scaleMode = StageScaleMode.NO_SCALE;
     mainWindow = stage.nativeWindow;
     createNewWindow(565, 440, "library");
     newWindow.activate();
     images = new ImagesContainer();
     newWindow.stage.addChild(images);
     thumbs.thumb0.mouseChildren = false;
     thumbs.thumb1.mouseChildren = false;
     image0 = new Image0();
     image0.x = thumbs.thumb0.x;
     image0.y = thumbs.thumb0.y;
     image0.name = "image0";
     image1 = new Image1();
     image1.x = thumbs.thumb1.x;
     image1.y = thumbs.thumb1.y;
     image1.name = "image1";
     images.addChild(image0);
     images.addChild(image1);
     images.addEventListener(MouseEvent.MOUSE_DOWN, mouseHandler);
     mainWindow.stage.addEventListener(NativeDragEvent.NATIVE_DRAG_OVER, dragHandler);
     mainWindow.stage.addEventListener(NativeDragEvent.NATIVE_DRAG_EXIT, dragHandler);
     newWindow.stage.addEventListener(NativeDragEvent.NATIVE_DRAG_UPDATE, dragHandler);
     newWindow.stage.addEventListener(NativeDragEvent.NATIVE_DRAG_COMPLETE, dragHandler);
}
function mouseHandler(e:MouseEvent):void
{
     if (e.type == MouseEvent.MOUSE_DOWN)
     {
          var displayObject:DisplayObject = e.target as DisplayObject;
          var bitmapData:BitmapData = new BitmapData(displayObject.width, displayObject.height);
          var clipboard:Clipboard = new Clipboard();
          bitmapData.draw(displayObject);
          clipboard.setData(ClipboardFormats.BITMAP_FORMAT, bitmapData);
          NativeDragManager.doDrag(InteractiveObject(e.target), clipboard, bitmapData);
     }
}
function dragHandler(e:NativeDragEvent):void
{
     if (e.type == NativeDragEvent.NATIVE_DRAG_OVER)
     {
          dragOverTarget = e.target;
          if (dragOverTarget.parent == thumbs)
               (dragOverTarget as MovieClip).gotoAndStop(2);
     }
     else if (e.type == NativeDragEvent.NATIVE_DRAG_EXIT)
     {
          if (e.target.parent == thumbs)
               (e.target as MovieClip).gotoAndStop(1);
     }
     else if (e.type == NativeDragEvent.NATIVE_DRAG_UPDATE)
     {
          if (dragOverTarget && dragOverTarget.parent == thumbs)
               targetFrame = (dragOverTarget as MovieClip).currentFrame;
     }
     if (e.type == NativeDragEvent.NATIVE_DRAG_COMPLETE)
     {
          if (dragOverTarget && dragOverTarget.parent == thumbs && targetFrame == 2)
          {
               var bitmapData:BitmapData = e.clipboard.getData(ClipboardFormats.BITMAP_FORMAT) as BitmapData;
               var targetContainer:DisplayObjectContainer = dragOverTarget as DisplayObjectContainer;
               var bitmap:Bitmap = new Bitmap();
               NativeDragManager.acceptDragDrop(InteractiveObject(e.target));
               if (targetContainer["container"].numChildren > 0)
                    targetContainer["container"].removeChildAt(0);
               bitmap.bitmapData = bitmapData;
               targetContainer["container"].addChild(bitmap);
          }
     }
}
function createNewWindow(w:uint, h:uint, title:String = "window"):void
{
     options = new NativeWindowInitOptions();
     options.transparent = false;
     options.systemChrome = NativeWindowSystemChrome.STANDARD;
     options.type = NativeWindowType.NORMAL;
     newWindow = new NativeWindow(options);
     newWindow.title = title;
     newWindow.width = w;
     newWindow.height = h;
     newWindow.stage.align = StageAlign.TOP_LEFT;
     newWindow.stage.scaleMode = StageScaleMode.NO_SCALE;
}
start();

FLA download:

animate_cc_as3_native_windows.zip - Google Drive

I hope this helps.

Regards,

JC

[daianc20000010]

Yes, that seems the only way to do it.

The problem is that I have an entire application built on mouse events, now I have to change it to native drag...

Thank you for you time and answer.

[JoãoCésar]

You're welcome.