Share Posted February 21, 2012 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 Link to comment Share on other sites More sharing options...
Share Posted February 21, 2012 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. Link to comment Share on other sites More sharing options...
Author Share Posted February 21, 2012 Thanks for the reply, I'll have a try. Looks like heavy stuff tho Link to comment Share on other sites More sharing options...
Share Posted February 22, 2012 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") } Link to comment Share on other sites More sharing options...
Author Share Posted February 22, 2012 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 Link to comment Share on other sites More sharing options...
Author Share Posted February 22, 2012 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); Link to comment Share on other sites More sharing options...
Share Posted March 17, 2012 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now