Flash creating a JPG or PNG dynamically?

how would I make Flash create a jpg or png file of what was currently on screen dynamically? I would like to know how to go about doing this and I'm sure it probably involves some other scripting language (PHP?) also. thanks!

You can use the PNGEncoder or JPGEncoder classes included in the as3corelib available on google code to encode any drawable to a bytearray representing the file. To actually save to a file, you'd then have to pass that out to php or other server-side language. I've got example code for the first part, but not the second.

http://suckatmath.com/personal/drawing/drawing.html

the JPGEncoder class that I downloaded based on your recommendation says that I first need to convert my "drawable" to a "BitmapData" object, so how do I do that?

I want to convert a movie clip or the whole screen if need be, to a BitmapData object and then use this class to convert it to a JPG....thanks for the help!

Same way I did in the code linked above. You create a new BitmapData of the appropriate size, then use the BitmapData.draw method to draw your drawable into the BitmapData.

Quote:

---

Originally Posted by 5TonsOfFlax

Same way I did in the code linked above. You create a new BitmapData of the appropriate size, then use the BitmapData.draw method to draw your drawable into the BitmapData.

---

OK, I got that to work, so now I would need to take the ByteArray that the JPGEncoder class "encode" function returned to me and send that to a PHP script and write out that ByteArray as a JPG file?

Pretty much, yes. I never got that far before moving on to other projects. I anticipated that it may be problematic to upload the ByteArray directly, so I was going to use the Base64 package to turn it into a proper string which could be submitted with a form post through javascript. The php could then use its own Base64 package to decode that string back into the binary and write it to a file. If you're comfortable with remoting and talking to a server directly from flash, you may be able to skip that process.

any idea on how to BEGIN that endeavor? Would you use the Socket class?

As I said, I was going to pass the base64 version out to javascript which would do a form post to the php script.

You can do the same thing without the javascript. Look at URLVariables, URLRequest, and URLLoader. In theory, you'd just set the data in a URLVariables, set that as the data for a URLRequest, and send it off with a URLLoader.

Code:

---

var urlvs:URLVariables = new URLVariables();
urlvs.filedata = base64data; //assuming you already have it

var urlr:URLRequest = new URLRequest("yourdomain.com/upload.php");
urlr.data = urlvs;
urlr.method = "POST"; //important for large data.

var loader:URLLoader = new URLLoader();
loader.load(urlr);

---

I see in the documentation that you can set mime-types and dataformat to upload actual binary data, which would be more efficient than base64 encoding.

I have found this code in a couple of places online, I have downloaded the as3corelib from the google location and placed the unziped file in my class folder, i am using windows 7 64 bit not sure if that could be the problem.

But when I run the example I have found i get the error that the
import flash.PNGEncoder
or the
1172: Definition com.adobe.images:JPGEncoder could not be found.

I am not sure why it can not find it, I also can not find anything to place in the liberary (witch usually fixes errors by placing stuff associated with a class in the library)

It just doesnt seem to work

any ideas?

1172: Definition com.adobe.images:JPGEncoder could not be found.

I have downloaed the aas3 corelib files and placed them in the flash cs4 classes folder

yet I keep getting this error

Any idea

Using windows 7 64 bit

When you say the "classes folder" do you mean for Flash itself? You shouldn't do that. Instead, unzip it anywhere, and add the location you unzipped it to to the classpath for your project.

By default, your project's classpath includes the directory where your fla is, so you can unzip to that directory and it should "just work". So, after unzipping, you should have in your directory:
yourproject.fla
com

Where yourproject.fla is of course, your fla.

yea I did that now I am no longer getting the error for the PNGEncoder or the JPGEncoder

Thanks for the help!

Not compleatly fixed yet though now I am seeing this error
1172: Definition flash.filesystem:File could not be found.
1172: Definition flash.filesystem:FileStream could not be found.

Are the filesystem classes something different I need to download and add separately?

Here is the code im using (I just have a practice moviclip of a rectangle on the stage.

import com.adobe.images.PNGEncoder;
import flash.filesystem.File;
import flash.filesystem.FileStream;
import flash.filesystem.FileMode;

stage.addEventListener(MouseEvent.CLICK,saveStill) ;

function saveStill (e:MouseEvent):void{
var bmd:BitmapData = new BitmapData (400, 500);
bmd.draw(img);
var ba:ByteArray = PNGEncoder.encode(bmd);
var file:File = File.desktopDirectory.resolvePath("image");
var fileStream:FileStream = new FileStream();
fileStream.open(file, FileMode.WRITE);
FileStream.writeBytes(ba);
FileStream.close();
}

File and FileStream are available in AIR only. Are you trying to make an AIR app or a swf to go on a website?

A little bit of both, I have made a .swf using flash cs4, the application lets the user creat a custom made sticker: here is a link to where I have it posted for testing

http://athomecr.tripod.com/mySwf.htm

When its done I am wanting to be able to have a ,png or jpeg of the completed image, I am wanted that .png or jpeg to be able to be held in a variable that can tied in with a php script that can be sent to paypal, then when its paid for have the .png or jpeg sent to me in the email from Paypal

If that doesn't work then I would like to just be able to put a save button in the .swf and save the finished sticker as a .png or jpg to my desktop so I can see what the customer ordered.

Its a pain, i spent hours building this app thinking flash had an easy way to do this.

I have downloaded and installed AIR and AIR sdk still doesn't work.

AIR is for local applications. They live on, and run from, the hard drive. What you are trying to do is a standard swf on a website.

You can do what I was talking about in the first part of this thread, which is send the graphic data to php and have php save the file. You can do that through a form submission or amfphp.

If you just want the user to be able to save, you can use the save method of FileReference. This requires a flash 10 player, and I think CS4 if you want to compile in Flash.

That I am not sure can be done so easy, the finished image is a compilation of 3 to 12 different images on top of each other, how can that be done?

Create a new BitmapData of the appropriate size, then draw the containing DisplayObject into it. That will flatten it. You can then use JPEGEncoder or PNGEncoder to get a bytearray representing that image as jpg or png. You can send those bytes to php, or allow the user to save them with filereference.

I think what your saying to do is to make a "placeholder" out of a movie clip like a rectangle of the same size as the image but I do not remeber how to transfer everything in that image into the placeholder, I seen this in a video somewhere but cant find it again. But I remember the need for using what your talking about

It does make sense i just cant remember the correct way to write that code.

I can make a function activated by a mouse click event and pull the data out of each image but how to get all that into the placeholder has got me lost.

No, that is not what I mean. I meant what I said.

Assuming you have a container (MovieClip or Sprite) which contains all of the layers and only the layers, you need to do something like this:

Code:

---

var bmp:BitmapData = new BitmapData(container.width, container.height, true, 0x00000000);
bmp.draw(container);
var bytes:ByteArray = PNGEncoder.encode(bmp);
var fr:FileReference = new FileReference();
fr.save(bytes, "sticker.png");

---

That's for letting the user save it directly. To send to the server, take those same bytes and put them in a URLVariables and use a URLLoader to submit to a form. Or use AMFPHP to send them directly. Or Base64 encode them and send them that way. Any will work, provided you can receive them on the other side.

Ok great its working but I am not sure i am doing the placeholder right

For test purposes:
Should I make an array like for example make 2 other movie clips (CONTAINER 2 AND CONTAINER 3) and then assign them to container, and then will container make a single image from the other 2

I don't even know what you're asking.

You already said you have a bunch of layers that you want to save as a single image. Assuming that those layers have a common DisplayObjectContainer ancestor which contains nothing you don't want drawn into the final image, just draw that ancestor. If you don't have such a common display ancestor, then how ARE the layers set up?

Alright thanks it took me a minute DUH LOL

Put the multiple changeable images into a single movie clip and then use the that single movie clip as the jpeg or png set the height and width values to match and there is my image!

It works thank you so much sry for being so dense LOL!

Now if I can get this to transfer to paypal that is oging to be a whole new issue! Any suggestions?

No its just I already have the program done with all the layers done separately they are not placed into a common DisplayObjectContainer


so to make it work I will have to select all of the images used and then convert them into a movieclip and give that a instance name I was wanting to avoid that because I will have to go through the script and change my code to reflect the new one:

image1
image2
image3

ect....

will all have to be changed to

newmovieclip.image1
newmovieclip.image2
newmovieclip.image3


unless there is a better way
But I figure I will do that to make it work.

You could just declare local variables to take their place.

Code:

---

var image1:MovieClip = newmovieclip.image1;
var image2:MovieClip = newmovieclip.image2;
var image3:MovieClip = newmovieclip.image3;

---

Then subsequent code can remain unchanged.

Also, it is possible to just draw the root into the bitmapdata, but you'll have to construct an appropriate matrix and clipRect to pass to the draw method. I don't recall the exact meanings of those right now, but you can use them to draw only a portion of the drawable.
See the livedocs for more details:
http://help.adobe.com/en_US/AS3LCR/F...tml#draw%28%29

LOL NO even better

I am going to add a form at the end for the customer to fill out contact info wile having there custom image finished at the left hand side
Then I will just have the code to this:

import com.adobe.images.PNGEncoder;

//saveit is a save button added to the document.//
saveit.addEventListener(MouseEvent.CLICK,saveStill );

function saveStill (e:MouseEvent):void{
var bmp:BitmapData = new BitmapData(stage.width, stage.height, true, 0x00000000);
bmp.draw(stage);
var bytes:ByteArray = PNGEncoder.encode(bmp);
var fr:FileReference = new FileReference();
fr.save(bytes, "sticker.png");
}


LOL I tested it and it works

Even better I don't have create a ton variables to pass along to pay pal, just the price and product name, the image can be passed though a php script (I HOPE) then ff to my email after payment, in the email I will the completed image and the customers contact info all saved as single screen shot of the finished app!

paypal can not transfer the completed image, I figured I would have it sent separately via a email link, or tie it in with a php script, but everything I found will only allow text.

I am assuming:
var bmp:BitmapData = new BitmapData(stage.width, stage.height, true, 0x00000000);
bmp.draw(stage);
var bytes:ByteArray = PNGEncoder.encode(bmp);
var fr:FileReference = new FileReference();
fr.save(bytes, "sticker.png");
}


That "bytes" is the variable holding the image data could this alone be sent
and if it can how everything I have found is just sending text from froms nothing about sending images.

Thanks