views:

1175

answers:

6

Let's say I want a web page that contains a Flash applet and I'd like to drag and drop some objects from or to the rest of the web page, is this at all possible?

Bonus if you know a website somewhere that does that!

A: 

If the whole site is one big embedded flash file then yes it's possible.

I don't think that you can acheive it any other way

Cetra
+1  A: 

I would say it is possible to drop to Flash if you detect that the item is dragged on to the that contains the flash stuff, and you set your dragged objects to have a z-index higher than the flash. Then when it is dropped you can talk to Flash using javascript to tell it where and what was dropped.

However the other way around is probably much harder, because you'd have to detect when the object hits the border of the flash movie and "pass" it to the javascript handler (create it in the html, hide it in flash).

The question is probably to know whether it's worth the trouble, or if you can maybe achieve everything in JS or in Flash ?

Seldaek
So I guess the answer is: it may be possible but there is no known API or other facility to do it in a standard way
BoD
A: 

Not possible in flash - unless you want to drag to a target inside the same flash application.

Could probably be done with a signed Java applet (but who wants to go down that road?)

Kristian J.
+1  A: 

Hang on, the encapsulation point is a valid one but flash can execute JS functions, and Seldaek is right that an HTML element with a higher z-index should float on the flash movie. So if you did all the drag handling in JS and had the flash read its own dimensions and the position of the pointer in the app it could signal JS methods that slave element(s) to the pointer even (especially) when the pointer leaves the boundaries of the flash app. It would be pretty hairy though.

+2  A: 

DISCLAIMER I haven't tested this code at all, but the idea should work. Also, this only handles the dragging to a flash movie.

Here's some Actionscript 3.0 code which makes use of the ExternalInterface class.

import flash.display.Sprite;
import flash.external.ExternalInterface;
import flash.net.URLLoader;
import flash.net.URLRequest;

if (ExternalInterface.available) {
  ExternalInterface.addCallback("handleDroppedImage", myDroppedImageHandler);
}

private function myDroppedImageHandler(url:String, x:Number, y:Number):void {

  var container:Sprite = new Sprite();
  container.x = x;
  container.y = y;
  addChild(container);

  var loader:Loader = new Loader();
  var request:URLRequest = new URLRequest(url);
  loader.load(request);

  container.addChild(loader);
}

Here's the HTML/jQuery code

<html>
<head>
  <title>XHTML 1.0 Transitional Template</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"&gt;&lt;/script&gt;
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js"&gt;&lt;/script&gt;
  <script type="text/javascript">
    $(function() {
      $("#dragIcon").draggable();

      $("#flash").droppable({ 
        tolerance : "intersect",
        drop: function(e,ui) {

          // Get the X,Y coords relative to to the flash movie
          var x = $(this).offset().left - ui.draggable.offset().left;
          var y = $(this).offset().top - ui.draggable.offset().top;

          // Get the url of the dragged image
          var url = ui.draggable.attr("src");

          // Get access to the swf
          var swf = ($.browser.msie) ? document["MyFlashMovie"] : window["MyFlashMovie"];

          // Call the ExternalInterface function
          swf.handleDroppedImage(url, x, y);

           // remove the swf from the javascript DOM
          ui.draggable.remove();
        }
      });
    });
  </script>
</head>
<body>

  <img id="dragIcon" width="16" height="16" alt="drag me" />

  <div id="flash">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
      id="MyFlashMovie" width="500" height="375"
      codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab"&gt;
      <param name="movie" value="MyFlashMovie.swf" />
      <param name="quality" value="high" />
      <param name="bgcolor" value="#869ca7" />
      <param name="allowScriptAccess" value="sameDomain" />
      <embed src="MyFlashMovie.swf" quality="high" bgcolor="#869ca7"
        width="500" height="375" name="MyFlashMovie" align="middle"
        play="true" loop="false" quality="high" allowScriptAccess="sameDomain"
        type="application/x-shockwave-flash"
        pluginspage="http://www.macromedia.com/go/getflashplayer"&gt;
      </embed>
    </object>
  </div>

</body>
</html>
jessegavin
+8  A: 

This one intrigued me. I know jessegavin posted some code while I went to figure this out, but this one is tested. I have a super-simple working example that lets you drag to and from flash. It's pretty messy as I threw it together during my lunch break.

Here's the demo

And the source

The base class is taken directly from the External Interface LiveDocs. I added MyButton so the button could have some text. The majority of the javascript comes from the same LiveDocs example.

I compiled this using mxmlc.

enobrev
Thanks a lot, I guess that proves wrong the other answers saying it's not possible!
BoD
Way to go enobrev! That is really slick.
jessegavin
Thank you sir. It's a bit buggy, but a proof of concept no less.
enobrev
That is really, really, really smart! Thanks.
defmeta