How to Draw in Flex

pencil Eye candy is an important, if often over looked, part of any Flex application.  Unfortunately for me, I am much more of a developer than a designer and this has often left me with the short end of the eye candy stick.

The strength of being a developer however is in the custom functionality we can add.  Recently I have put together a DrawableOverlay Flex component which can be used to allow the user to annotate/draw on any part of the application.

The example application below shows how this component works in practice.  The DrawableOverlay component can be placed over any other components in the application (in this case a Image and a Container) and the user is then able to annotate anywhere within the DrawableOverlay area.

Try it Out:

The full source code is available here.  Feel free to take it and use it in any way which us useful to you.  Come back soon to see me extend this simple example to show off some of the things which are possible.

6 thoughts on “How to Draw in Flex”

  1. Hey there,
    this component is great and i actually saw it on your OLD flex blog. Over there i asked a question and i guess it wasn’t answered since you had moved to this one. My question would be, how can I save what I’ve drawn on the component?
    I’m quite new at flex and haven’t been able to find anything about saving a canvas as an image.
    I would really appreciate if you could clear this up for me. Thnx.

    Gaston

    1. Hi Gaston – Sorry for not getting back to you sooner.

      In the past I have always used this technique to save images from my flex applications. This works fine, but it does require you to be able to run PHP on your server.

      I found another technique which works entirely within javascript (ie. without a server), but it doesn’t work in all browsers.

      Hope that helps :)

  2. Hey Tony,

    I saw the component on your old blog.
    I use it to draw lines on , like this:

    myImage.addChild(new DrawableCanvas());

    I didn’t believe my eyes when I saved my image with some lines to server.

    Great component.
    Thanks,
    Arnon

  4. Hello Tony,

    I have checked out your PostACard application, it looks really great. I would like to know how did you customize the flex preloader?

  5. Hi Tony :)

    did stumble on ur old blog, about the postAcard project?great job on this one.
    and u mention about sharing the code, is it possible for u to share it with us? just empty the flicker api, so we wont get ur api code :)

    thanks in advance.

Comments are closed.