Export masked transormed movie as image

[VX0 0 Likes (Newbie)]

Hello,

 

I'm not experienced in AS3 and cannot make this work, can somebody see what I'm doing wrong ?

 

The idea :

- User uploads an image

- Image is loaded into a container which is assigned to TransformManager

- A triangular mask is applied to the image container

- The result is the transformed image in triangular form which is exported

 

The problems :

- The transformation is not taken into account when exported

- There's a difference in positioning between the preview version and the final image : crop function ?

 

The code :

stop();
import com.greensock.transform.TransformManager;
import com.greensock.events.TransformEvent;
import com.adobe.images.JPGEncoder;
import com.adobe.images.PNGEncoder;
import com.adobe.serialization.json.JSON;
import flash.display.*;
import flash.events.*;
import flash.net.*;
import flash.text.*;
import flash.ui.*;
import flash.utils.*;
import mx.utils.Base64Encoder;

// place holder
var h:MovieClip = new MovieClip();
addChild(h);
h.x = 0;
h.y = 0;

// place image container
var ic:MovieClip = new MovieClip();
h.addChild(ic);

// triangle movie
var tb:triangle_base = new triangle_base();
addChild(tb);
tb.x = (stage.stageWidth - tb.width) / 2;
tb.y = (stage.stageHeight - tb.height) / 2;

// mask triangle movie
var t:triangle = new triangle();
h.addChild(t);
t.x = (stage.stageWidth - t.width) / 2;
t.y = (stage.stageHeight - t.height) / 2;
t.visible = false;

// loading_layer movie
var ll:loading_layer = new loading_layer();
addChild(ll);
ll.x = 0;
ll.y = 0;

// loading_symbol movie
var ls:loading_symbol = new loading_symbol();
addChild(ls);
ls.x = (stage.stageWidth - ls.width) / 2;
ls.y = ((stage.stageHeight - 40) - ls.height) / 2;

// create loader
var il:Loader;
function loadImage(url:String):void {
il = new Loader();
il.load(new URLRequest(url));
il.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, imageLoading);
il.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
}

// get variable
var FlashVars:Object = LoaderInfo(this.loaderInfo).parameters;
var theVariableName:String;
var theVariableValue:String;
for (theVariableName in FlashVars) {
theVariableValue = String(FlashVars[theVariableName]);
if (theVariableName == "treat") {
	loadImage("upload/2-import/"+theVariableValue);
	resptxt.text = theVariableValue;
}
}

// load process
function imageLoaded(e:Event):void {
// load and place bitmap into container
var bm:Bitmap = Bitmap(il.content);
bm.smoothing = true;
// position image container
ic.x = (stage.stageWidth - bm.width) / 2;
ic.y = (stage.stageHeight - bm.height) / 2;
ic.addChild(il);
// activate transform on image
var manager:TransformManager = new TransformManager({targetObjects:[ic], bounds:new Rectangle(0, 0, 800, 600), constrainScale:true, scaleFromCenter:true, arrowKeysMove:true, forceSelectionToFront: false});
ll.visible = false;
ls.visible = false;
}
function imageLoading(e:ProgressEvent):void {
// download progress
}


// redirect functions
function goto1(url) {
navigateToURL(new URLRequest(url),"_self");
}
function goto2(url) {
setInterval(goto1(url),5000);
}

// button actions
function bt1Click(evt:MouseEvent):void {
goto1("http://3pm.3suisses-game.com");
}
function bt2Click(evt:MouseEvent):void {
ll.alpha = .5;
ll.visible = true;
ls.visible = true;
tb.visible = false;
t.visible = true;
ic.mask = t;
var icf:Bitmap = crop(t.x,t.y,t.width,t.height,ic);
var bmpd:BitmapData = new BitmapData(t.width, t.height, true, 0x00000000);
bmpd.draw(icf);

var imageFile:ByteArray = PNGEncoder.encode(bmpd);
var base64:Base64Encoder = new Base64Encoder();
base64.encodeBytes(imageFile);
var imageFileName:String = resptxt.text;
var loader:URLLoader = new URLLoader();
var url:String = "saveimage.php";
var req:URLRequest = new URLRequest(url);
req.method = URLRequestMethod.POST;
var pngdata:URLVariables = new URLVariables();
pngdata.fileData=base64;
pngdata.fileName=imageFileName;
req.data = pngdata;
loader.addEventListener(Event.COMPLETE, bt2Complete);
loader.load(req);
}
function bt2Complete(event:Event): void {
// tb.visible = true;
// ic.mask = null;
// t.visible = false;
goto1("result.php?name="+resptxt.text);
}
function bt3Down (event:Event):void {
tb.visible = false;
t.visible = true;
ic.mask = t;
}
function bt3Up (event:Event):void {
tb.visible = true;
t.visible = false;
ic.mask = null;
}
// crop image
function crop(_x:Number, _y:Number, _width:Number, _height:Number, displayObject:DisplayObject = null):Bitmap {
var cropArea:Rectangle = new Rectangle(0, 0, _width, _height);
var croppedBitmap:Bitmap = new Bitmap(new BitmapData(_width, _height, true, 0x00000000), PixelSnapping.ALWAYS, true);
croppedBitmap.bitmapData.draw((displayObject!=null) ? displayObject : stage, new Matrix(1, 0, 0, 1, -_x, -_y) , null, null, cropArea, true);
return croppedBitmap;
}

bt1.addEventListener(MouseEvent.CLICK, bt1Click);
bt2.addEventListener(MouseEvent.CLICK, bt2Click);
bt3.addEventListener(MouseEvent.MOUSE_DOWN, bt3Down);
bt3.addEventListener(MouseEvent.MOUSE_UP, bt3Up);

 

Any ideas are very welcome !

 

Thanks in advance

[GreenSock 17,847 Likes (Superhero)]

I don't have time to troubleshoot all your code, but it looks like one problem is that you're not applying the correct matrix when you draw(). Keep in mind that by default, draw() acts like the object is at x:0, y:0, scaleX:1, scaleY:1, rotation:0. That is unrelated to TransformManager, by the way. I'd highly recommend checking out Senocular's article:

http://www.senocular.com/flash/tutorial ... ormmatrix/

 

You probably just need to use the object's transform.matrix but change the tx and ty to be the x and y of your mask and make them negative.

[VX0 0 Likes (Newbie)]

Thanks for the reply, I'll have a try.

Looks like heavy stuff tho

[petervee 0 Likes (Newbie)]

Try this function, I've actually just written it today with TransformManager

 

Firstly, download this bad boy - You will need it to export JPGS, very solid class!

http://code.google.com/p/as3corelib/sou ... Encoder.as

 

Then, reference these classes (Hope i'm not missing any)

 

import flash.net.FileReference;
import flash.net.FileFilter;
import com.adobe.images.JPGEncoder;
import com.greensock.transform.*;

 

The function below is where it all happens, you can obviously tweak the dimensions of output (mine are 550x800)

 

The most important part is that the Bitmap you are drawing in the method bd.draw(h) is

your main movie clip, this is the one that you should put all your transform MCs in there!

 

function bitmapCopy() {
var bd:BitmapData = new BitmapData(550, 800);
bd.draw(h); 
var jpgEncoder:JPGEncoder = new JPGEncoder(80);
var imgByteData:ByteArray = jpgEncoder.encode(bd);
file = new FileReference();
file.save(imgByteData, "FILE_NAME.jpg")

}

[VX0 0 Likes (Newbie)]

Hello petervee, thanks for replying!

 

The problem is not related to the export as PNG function : When I export I'm getting a transparent triangle.

There is a difference in positioning between the preview version ("bt3"-button) and the exported PNG ("bt2"-button).

 

I think greensock is right and it has to do with the matrix.

 

Any help would be much appreciated

[VX0 0 Likes (Newbie)]

Found it !

 

It was indeed the cropping function & matrix :

 

old code

var icf:Bitmap = crop(t.x,t.y,t.width,t.height,ic);

 

new code

var icf:Bitmap = crop(t.x,t.y,t.width,t.height,h);

[retropunk 131 Likes (Specialist)]

I am building a tool that uses the Transform Manager and I am using a custom shaped mask.

I need to save a PNG file with transparency.

Is this what you were able to solve?

 

I see that you were working with the transform.matrix

The code above looks great but without your assets its difficult to see your solution.

 

Would you paste your full solution please if possible? I'm stuck at the moment.

 

Thanks for the help

- Patrick