2

I am creating an openlaszlo application where an html tag will be present and i have some components that are draggable in the swf. I want to drag these components over the html. This is not possible.

So what i am thinking of is to take a screenshot of the html content and replace it with the actual html content when i need to drag over it.

Theoretically this should be possible and it's possible in flex I verified my self. I am trying to do the same thing in Openlaszlo. But i am not getting any leads

So far i have tried like this And i am getting an error that the html tag is not object of IBitmapDrawable

<canvas width="800" height="600" bgcolor="white" debug="true">
<script when="immediate"><![CDATA[
class MagUtils {
#passthrough (toplevel: true) {
import flash.display.DisplayObject;
import flash.geom.Rectangle;
import flash.geom.Matrix;
import flash.geom.ColorTransform;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.filters.*;
import flash.events.MouseEvent;
import mx.graphics.ImageSnapshot;
import flash.utils.ByteArray;
import flash.display.IBitmapDrawable;
}#

var temp:lz.view;
var colorTransform:ColorTransform;
var rect:Rectangle;


public function snap (m:IBitmapDrawable, t:lz.view):void {

temp = t;
var temp_mc = temp.sprite; // getMCRef();
var mainView_mc = main.sprite; // getMCRef();
var scale = 1;
var x;
var y;
var w;
var h;
  var imageSnap:ImageSnapshot = ImageSnapshot.captureImage(m);
  var imageByteArray:ByteArray = imageSnap.data;
colorTransform = new flash.geom.ColorTransform();
rect = new flash.geom.Rectangle(0, 0, temp.width, temp.height);

var bitmap:BitmapData = new flash.display.BitmapData(w, h, false);
 bitmap.setPixels(rect, imageByteArray);
var bm:Bitmap = new Bitmap(bitmap);
temp.sprite.addChild (bm);
bitmap = null;
}
}
lz.MagUtils = new MagUtils();
]]>

</script>


<button name="magnifier" text="magnifyingtool" >
<handler name="onclick">
lz.MagUtils.snap(canvas.main.ht,canvas.temp);
</handler>
</button>

<view name="main" x="5" y="15" width="200" height="200" bgcolor="yellow">
    <html name="ht" width="200" height="200" src="http:hello.html"/>
</view>
<view id="temp" name="temp" x="5" y="300" visible="true" width="200" height="200" bgcolor="gray">
</view>


</canvas>

And the HTML Content is 

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML>
   <HEAD>
      <TITLE>
         A Small Hello
      </TITLE>
   </HEAD>
<BODY>
   <H1>Hi</H1>
   <P>Test Page</P>
</BODY>
</HTML>
raju-bitter
  • 8,906
  • 4
  • 42
  • 53
karthick
  • 11,998
  • 6
  • 56
  • 88
  • Please attach the content of hello.html to your question. Without knowing what the 'ht' object is, it's not possible to tell what you try to do. – raju-bitter Oct 19 '12 at 16:19

1 Answers1

1

It's no possible to take a screenshot in Flash of elements which are not managed by the Flash display list, which includes iFrame content placed below the SWF movie in the browser. And that seems to be what you are trying to do.

If you want to drag a visual object from the iFrame into the SWF movie area, one approach might be to render the content in HTML into an HTML5 canvas element, extract the bitmap data and push that into the SWF movie to be displayed in an OpenLaszlo view. But that would mean that all visual elements you want to drag need to be drawn into an HTML5 canvas.

Here is an example where uses Flash Player's filter functionality to apply the filter to an image in an HTML5 canvas element: http://www.quasimondo.com/archives/000695.php

Here are the links to the relevant files for this example:

  1. The HTML page embedding an invisible SWF for processing the image.
  2. JavaScript file with functions for sending the data to the SWF movie clip.
  3. ActionScript class processing the image data sent from JavaScript, and passing the processed data back to the HTML page.

But I'm not sure that all the content you have in your iFrame can be rendered into a canvas element.

raju-bitter
  • 8,906
  • 4
  • 42
  • 53
  • I have added the sample html. I am thinking of using Flex's ImageSnapshot class. I've seen that it 's taking the screenshot of the whole page. I have an adobe which acts like a browser and it loads my openlaszlo application.So is it possible to call the function present in AIR from openlaszlo? – karthick Oct 20 '12 at 10:41
  • You are aware of the fact that you cannot create a snapshot of an iFrame or OpenLaszlo tag? The Flex ImageSnaphot class won't help you with that. – raju-bitter Oct 20 '12 at 18:05
  • The Flex ImageSnapShot didn't work from laszlo. But my whole Laszlo Application is embedded inside an AIR web browser. And from that AIR web browser i was able to successfully take the screenshot including the HTML tag. What i do want to know is that it is possible to call an native air function from openlaszlo? – karthick Oct 21 '12 at 02:48
  • But you cannot use the default build process. Generate the ActionScript 3 code for your application as described here: http://stackoverflow.com/questions/13008487 You can then use the generated ActionScript source code with the Adobe Air SDK to generate your Air application. – raju-bitter Oct 22 '12 at 09:56