Flex Paint 2.0 with Source Code

UPDATE: I’ve created a new version of Flex Paint with Flex 4.

It’s surprising and somewhat humbling to find out which of my blog posts are the most popular. There are some posts that I spend days on and they end up only being read by a few people. Then there are others that are simple, short, and to be honest kinda boring that end up being read by tons of people. My original Flex Paint blog is one of those simple, short but highly viewed blogs. I would never have thought that out of all my blog posts that one would be read by so many. Since it’s almost two years old and presumably being used as a reference by many people, I thought it would be useful to update it to use the new Flash Player 10 FileReference API to eliminate the need to send the image to the server.

Here is the new version:

(source code)

Saving the drawn image with Flash Player 10 is as simple as:

        var bd:BitmapData = new BitmapData(canvas.width,canvas.height);
        bd.draw(canvas);
 
        var ba:ByteArray = (new PNGEncoder()).encode(bd);
 
        (new FileReference()).save(ba, "doodle.png");

This reads the image client-side, encodes it, and then initiates a save dialog. Pretty simple stuff. The only downside is that using this new code I’ll no longer get to see the amazing things that people are drawing. Here are some of the most interesting drawings people made with the old version:

Let me know what you think about the new version!

  • Pingback: Flex Paint - Flex Display Object to PNG()

  • Dev

    Excellent Work, Thanks for sharing….

  • Pekuja

    Hah, my blue faced scribbly man is one of the “most interesting” drawings? :-D
    Also, thanks for the original app. I needed something like that for a project and I’m new to Flash and Flex, so it really came in handy. I have to say though, the original saving method with the remote objects was pretty complex. Wouldn’t it be simpler to POST the image to a CGI script?

  • Chinmay

    good example…
    new Filereference API of fP10 is really awsomm…i was lookin for similar example of saving data on client side from flex n this would certainly help me lot :)

  • Pingback: Flex Paint 2.0 with Source Code | Flash Player roundup()

  • Matelot

    Excellent job ! How do I save transparent .png with Flex Paint 2.0 ? Is it possible ?

    • for transparency .png

      var bd:BitmapData = new BitmapData(width, height,true,0);

  • Hi Matelot,

    I’m not sure if that works. My guess is that the PNGEncoder would need to support that. And I’m not sure if it does.

    -James

  • Pingback: Interesting ideas using Adobe Flex « Pat IT Dude Blog()

  • k

    thank you. it’s excellent!

    I wonder if it is possible to save remote server.

    I want that

    when user have drawn a image, and then click submit button, user’s drawn image save remote server.

    how do I get this action?

  • Hi k,

    That’s exactly what the old version did:
    http://www.jamesward.com/blog/2006/08/16/flex-paint-flex-display-object-to-png/

    -James

  • Julien

    Hi,

    How can i share what i am painting with another user.Something like a simple drawing board.

    Cheers,
    Julien

  • Hi Julien,

    You can do this. Check out:
    http://www.adobe.com/devnet/flex/articles/yahoomaps_collaboration.html

    -James

  • Martin

    Hi all,

    If you are running Mac OS and use the file reference you might struggle with the same problems as I did:

    http://www.opencoder.co.uk/2009/09/bug-in-flash-player-filereference-browse-affecting-macs/

    It seems that there is a bug that messes up the eventing after the “download” dialog. Thanks opencoder for finding this out.

    Cheers,
    Martin

  • Richa

    Please send me a code for paint along with text box…
    How do i run the code?

  • @Richa

    The code is here:
    http://www.jamesward.com/demos/FlexPaint2/srcview/index.html

    You will need Flex to compile it.

  • So what about a Flex 4 example :-)

  • Pingback: Flex Paint Updated To Flex 4()

  • I’ve created a new version of Flex Paint with Flex 4.

  • shilan

    first of all thanks for sharing the code.
    i was wondering if it is possible to save the ByteArray to a form element for using as a 64-bit stream in my app. instead of saving that on a hard drive?

    • I’m not sure what you are trying to accomplish.

      • shilan

        sorry, it means that i don’t want to save the image at client side, i wanna save it as a 64-base stream, server side

        • I see. You can do that by using URLLoader, HTTPService, or RemoteObject to send the Base64 Encoded data to the server. To do the encoding use the Base64Encoder class.

  • harinath

    first of all thanks for sharing the code.
    I want an erase the line by pixel by pixel can you tell me how to do that

    • Like have an erase tool that the user can click and drag over pixels to remove them? Just paint the background color over the pixels that are already there.

  • kavita sharma

    hello
    sir wen i m drawing anything on my canvas it goes beyond dat canvas . so tell me dat how can i limit the area of drawing on canvas…………..!!1

    thanx in advance …!!!

    reply soon

    • Hmm… That’s strange. I haven’t been able to reproduce that problem.

  • fred

    does not work with linux – ubuntu!!!
    why???

    • It works fine for me on Linux / Ubuntu. Are you getting any errors? Do you have Flash Player installed?

  • zaru

    It’s quite helpful . Thanx a lot!

  • abhishek

    This code not working in flex 4 sdk for air
    :)