Jump to content
Search Community

VX0

Members

  • Posts

    4

  • Joined

  • Last visited

 Content Type 

Posts posted by VX0

    Export masked transormed movie as image

    in TransformManager (Flash)

    Posted

    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

    Export masked transormed movie as image

    in TransformManager (Flash)

    Posted

    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

×
×
  • Create New...