dcsimg
A Flash Developer Resource Site

Page 1 of 2 12 LastLast
Results 1 to 20 of 26

Thread: Flash creating a JPG or PNG dynamically?

  1. #1
    absolutezero3424
    Join Date
    Nov 2006
    Posts
    508

    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!

  2. #2
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    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

  3. #3
    absolutezero3424
    Join Date
    Nov 2006
    Posts
    508
    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!

  4. #4
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    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.

  5. #5
    absolutezero3424
    Join Date
    Nov 2006
    Posts
    508
    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?

  6. #6
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    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.

  7. #7
    absolutezero3424
    Join Date
    Nov 2006
    Posts
    508
    any idea on how to BEGIN that endeavor? Would you use the Socket class?

  8. #8
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    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.
    Last edited by 5TonsOfFlax; 01-23-2008 at 09:28 PM.

  9. #9
    Junior Member
    Join Date
    Mar 2010
    Posts
    13

    jpeg. png encoder problem

    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?

  10. #10
    Junior Member
    Join Date
    Mar 2010
    Posts
    13
    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

  11. #11
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    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.

  12. #12
    Junior Member
    Join Date
    Mar 2010
    Posts
    13

    ok now new problem LOL

    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();
    }

  13. #13
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    File and FileStream are available in AIR only. Are you trying to make an AIR app or a swf to go on a website?

  14. #14
    Junior Member
    Join Date
    Mar 2010
    Posts
    13
    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.

  15. #15
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    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.

  16. #16
    Junior Member
    Join Date
    Mar 2010
    Posts
    13
    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?

  17. #17
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    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.

  18. #18
    Junior Member
    Join Date
    Mar 2010
    Posts
    13
    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.

  19. #19
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    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.

  20. #20
    Junior Member
    Join Date
    Mar 2010
    Posts
    13
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center