Flex Paint Updated To Flex 4

By James Ward | Published: March 22, 2010

One of my most viewed blogs is one of the most simple demo apps I’ve built. It’s a simple Flex app that lets the user draw with their mouse and then lets them save their drawing. I’ve updated the Flex Paint demo to Flex 4. Check it out:

(View the source code)

This entry was posted in Flex. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

  • Pingback: Flex Paint 2.0 with Source Code

  • Daniel Frank

    The source view continue appearing to download Flex 3 SDK.

  • http://www.jamesward.com James Ward

    Good point Daniel. I think that might due to me using Flex Builder on Linux with Flex 4. You can download Flex 4 from:
    http://opensource.adobe.com/flex

  • Alex

    James,

    Do you know if it is possible to extract the children from a canvas, and save them to a text file so that the “state” can be loaded again?

    For example I want to be able to let people draw straight lines, draw freehand, add images and change background image and I know that these can be exported as an image, as your example shows – but is it possible to store the state of the canvas e.g. where the lines are, how the lines are drawn, their width etc and then add them to a blank canvas?

  • http://www.jamesward.com James Ward

    @Alex

    With each operation you could easily record it in an Array and then save that Array of operations somewhere for later use.

  • Alex

    That’s what I was thinking, but how would i record freehand activity?

  • http://www.jamesward.com James Ward

    You would just have to record each time that a draw operation happens. It will be a lot of data.

  • Alex

    That’s pretty much the answer I was hoping you wouldn’t give. Oh well – if I get it up and running I’ll let you know!

    • Brian

      Alex, did you ever get freehand activity recording up and running?

      In my Flex Paint-inspired app, I ended up using a spark.primitives.Path object for freehand data. The mouseDown handler creates the object and sets the initial data string, then the mouseMove handler appends the current x-y coordinate to the data string. Voila, you have all the coordinates in a single string for each freehand item!

  • Pingback: Building a Multitouch Paint Canvas (Video Tutorial) « MultiTouchup.com

  • http://fivedigital.net Thomas

    This one has a nice bug if you release the button outside of the canvas and then return to the canvas :-)

  • http://www.jamesward.com James Ward

    @Thomas
    Thanks for reporting that! It’s been fixed. You might have to clear your browser cache.

  • Tam

    Thanks for this James.

    What is the best way to save the drawing in the database so that it can be editable later? it wouldn’t help to save it as PNG

    • http://www.jamesward.com James Ward

      There isn’t an easy way to do that. Essentially you’d have to proxy the graphics requests through something that tracks them and then sends them to a server. But sending them raw would probably be pretty chatty so you’d need some way to optimize the storage / transmission.

  • Eman

    James,

    I am wondering if this possible:

    <mx:Canvas> id=”imageCanavas” >
    <mx:Image id=”layer1″ src=”….” />
    <mx:Image id=”layer2″ src=”….” />
    <mx:Image id=”layer3″ src=”….” />
    </mx:Canvas> >

    …when i save the canvas as bitmapdata, it will also save those images (“flattened” like when flatten the layer in photoshop) inside the canvas?

    thanks.
    cheers.

    • http://www.jamesward.com James Ward

      Yes. You can read the BitmapData for anything running in Flash Player. It creates a bitmap just like it’s seen on screen.

  • Nuwan

    Thank you,
    this is the exactly what i wanted!

    • Scott

      Thank you very much. I’m new to flex and I’ve been looking for something like this. Now I just need to figure out how to load an image back into this so it can be changed if needed. I’ve been able to load it but then I can’t make changes. Thanks.

      Scott

      • http://www.jamesward.com James Ward

        If you want to edit the pieces then you will have to save the drawing commands to a server then pull the commands down instead of the image.

        • Scott

          I was able to get it to work with this…

          this.graphics.beginBitmapFill(myBitmap,null,true,false);
          this.graphics.drawRect(0,0,width,height);
          this.graphics.endFill();

          I don’t really understand why the drawRect needs to be there though. Thanks again.

          Scott

          • http://www.jamesward.com James Ward

            Sorry. I misunderstood what you were trying to do. But yes, that is the way to draw a bitmap. You have to tell it what bitmap to use and then you have to actually draw the bitmap (drawRect) using the bitmap as the fill.

  • Mirco

    Hello, thank you very much by example. I want to add a code to your example and I can not: (a function to simulate the Ctrl + Z. I could give some help to add this functionality.

    Thank you.

    • http://www.jamesward.com James Ward

      You will have to maintain a command stack. It’s not a trivial thing to implement.

  • Brian

    James,

    Have you had any luck adding a line tool to Flex Paint? My attempts have been fruitless so far. I tried adding a second graphics object (via a Sprite) as a child of the DrawingArea, putting the graphics on that during mouseMove, and copying the line to the main graphic area on MouseUp, but when I do that, the DrawingArea’s listeners for the MouseEvents stop firing.

    		private var preview:Sprite;
		private var isLine:Boolean = false;
 
 
		//updates to DrawingArea's constructor
			this.preview = new Sprite();
			this.addChildAt(this.preview, 0);
 
			addEventListener(MouseEvent.MOUSE_MOVE, function(event:MouseEvent):void {
				if (!event.buttonDown)
				{
					isDrawing = false;
				}
 
				x2 = mouseX;
				y2 = mouseY;
				if (isDrawing)
				{
					if (!isLine) {
						preview.graphics.lineStyle(2, drawColor);
						preview.graphics.moveTo(x1, y1);
						preview.graphics.lineTo(x2, y2);
						x1 = x2;
						y1 = y2;
					} else {
						preview.graphics.clear();
						preview.graphics.lineStyle(2, drawColor);
						preview.graphics.moveTo(x1, y1);
						preview.graphics.lineTo(x2, y2);
					}
				}
			});
 
			addEventListener(MouseEvent.MOUSE_UP, function(event:MouseEvent):void {
				graphics.copyFrom(preview.graphics);
				preview.graphics.clear();
 
				preview.graphics.beginFill(0xffffff, 0.00001);
				preview.graphics.drawRect(0, 0, width, height);
				preview.graphics.endFill();
 
				isDrawing = false;
			});

    Any thoughts? This issue is driving me to distraction!

    • http://www.jamesward.com James Ward

      Hmm… If you use copyFrom and then clear, then you will lose what you just copied. Maybe that is the problem.

      • Brian

        Well…I’m not losing what I drew — my initial line shows up on the “main” graphics object just fine. The problem is, once I copy the line and clear the “preview” object, the listeners for the MouseEvents quit getting called.

        I did find one really strange thing: I do still get the mouse events when the pointer is over the first line I draw! It seems like something is masking the DrawingArea behind the scenes somehow.

        I’ll post again once I fully figure this out, but in the meantime, any thoughts or suggestions are welcome.

        • http://www.jamesward.com James Ward

          In order for mouse events to get caught something must not be totally transparent. To overcome this something people employ a mouse shield which is basically a Sprite filled with a solid color and an alpha of like 0.00001. Could that be the issue?

          • Brian

            Hi James,

            That makes sense. I changed the code a bit and got it working — now instead of using copyFrom, I draw the line segment on the preview object and clear that before redrawing on the next mouse event. When I get to the mouse up handler, I still have the x-y coordinates for both ends of the line, so I can draw it using that.

            			addEventListener(MouseEvent.MOUSE_MOVE, function(event:MouseEvent):void {
				if (!event.buttonDown)
				{
					isDrawing = false;
				}
 
				x2 = mouseX;
				y2 = mouseY;
				if (isDrawing)
				{
					if (isLine) {
						preview.graphics.clear();
						preview.graphics.lineStyle(2, drawColor);
						preview.graphics.moveTo(x1, y1);
						preview.graphics.lineTo(x2, y2);
					} else {
						preview.graphics.lineStyle(2, drawColor);
						preview.graphics.moveTo(x1, y1);
						preview.graphics.lineTo(x2, y2);
						x1 = x2;
						y1 = y2;
					}
				}
			});
 
			addEventListener(MouseEvent.MOUSE_UP, function(event:MouseEvent):void {
 
				preview.graphics.clear();
 
				graphics.lineStyle(2, drawColor);
				graphics.moveTo(x1, y1);
				graphics.lineTo(x2, y2);
 
				this.isDrawing = false;
			});
          • http://www.jamesward.com James Ward

            Awesome! Thanks for posting the code!

  • http://www.arancione-consulting.com Agustin Lopez

    For some reason that I cannot determine sometimes I can continue painting the line outside the right side of the box: http://screenshotuploader.com/s/4erqccIu1V

    I am really not sure why..

    Anyways, it’s a great example.. very small and tidy code.

    Thanks for sharing.

    • http://www.jamesward.com James Ward

      Wow. That’s weird. I haven’t seen that. What OS? What version of Flash Player?

  • Rohit

    Hi James,

    This example really proves flex is easy!

    Is there any way I can put an event listener on top of the line drawn? Maybe so that I can specifically erase that line/change the color or something…just a thought..

    • http://www.jamesward.com James Ward

      Yes. Just create a new Sprite and then draw on the Sprite.

  • Livin Miranda

    Hello!

    Is there any technique to increase the writing speed in the board and to make the lines more smooth while drawing curves.

    • http://www.jamesward.com James Ward

      You can increase the framerate of the application. That’s about it.

  • Jovan Marcetic

    And what about smooth? or glow or shade.

    I tried with lineShaderStyle but I couldn’t.

    • http://www.jamesward.com James Ward

      You can create a new Sprite for each drawing interaction and then set filters on the Sprite.

  • http://www.solutionanalysts.com Jay Mehta

    How can i stream this panel??
    Is it possible to stream this panel?? I want to create white board application for a teacher.
    Please guide me.
    Thanks in advance.

  • http://www.jamesward.com sai

    hello sir,

    your example is helpful to me,but how i have to save when image is placed on paint?ll you help me ragarding the saving of painted image.

    Thanks in advance

    • http://www.jamesward.com James Ward

      I’m not really sure what you mean. Do you need to code for how to do that?

      • http://www.jamesward.com sai

        yes sir!i want the code for when we are placing the image on your example flexpaint4,then how to save that image?

        Thanks sir for your great support!

  • Siddharth Saha

    I have an issue which is eating me alive…

    I want to make a flash client, on which the user can draw freehand, line etc. and it also captures the webcam and audio input from microphone. Now I want that these data be sent to the server and it is recorded as an flv file.

    I can attach the camera and microphone objects to a NetStream object and record them but how do I record the drawing activity.

    Please suggest me how to do this.

    • http://www.jamesward.com James Ward

      I don’t know very much about FMS but my guess is that you will have to write a custom FMS script for this. But I really don’t know. Sorry.

  • Jerry Obi

    Hello,

    This app is great!

    But i’ve got a question:
    Is it possible to draw on an image that is loaded in the panel instead of the whiteboard itself? If so, what’s the code for that. I’ve been trying to do that, but it draws behind the image instead of on the image. The image is loaded in the panel, but the drawing is behind it.

    Thanks in advance.

    Jerry

    • http://www.jamesward.com James Ward

      Sure! Just put an Image inside of the Panel but above / before the DrawingArea. The order in which you define them is the z-order inside the container.

  • ramesh

    Is it possible to draw on an image that is loaded in the panel instead of the whiteboard itself? If so, what’s the code for that. I’ve been trying to do that, but it draws behind the image instead of on the image. The image is loaded in the panel, but the drawing is behind it, can you help in this

    • Brian

      ramesh,

      I solved that problem by having two layers inside a container. The first layer is just an Image object to hold your background image, and the second layer is is DrawingArea from the Flex Paint source.

      Good luck!

      Brian

  • ramesh

    and i need image cropping with redo and accept functionality in the flex. now i am working on that so please provide some example

    Thanks & regards
    ramesh v

  • ramesh

    Can anyone please tell me how to crop and scale image in flex

  • Eddy

    Hi James, great work.

    Did any one figure out how to save the painting so you edit it later? If you could get the data about the objects that are painted, then you could post this data to a webservice, but how?

    Thanks

    • Brian

      Hi Eddy,

      Using my code above, you’d add a call to your service object after every lineTo() call.

      Something like

      drawingServiceObject.saveLine(x1, y1, x2, y2, drawColor);

      Note that freehand lines would get saved as a LONG series of really short line segments. You’d probably want to write some code to collect those up and save them as a Path instead.

      Hope this helps!

      Brian

  • Alessandro Reale

    Anyone know how to include this example of Flex Paint the option to drag and drop images, which could be saved in PNG, and then again this could open png image and moving pictures.
    Do you have any idea Mr. James, how?

    • http://www.jamesward.com James Ward

      Drag and drop from the desktop?

      • Alessandro Relae

        NO!

        BE KIND whiteboard!
        In the same application that draws you provided, have some icons at the top with some drawings in order to be dragged into the paint and can record these drawings in PNG format, and then can be loaded after saving and can be moved, dragged to another location inside the paint, to be restored.

        It would be almost the same function as a component whiterboard does, but just that simple.

        In an application that I am helping in the development, must create a sketch where the police drag a few images for the white screen, positioning so that suits you and then save that image in PNG format, but it can be when necessary, can open the image and reposition the drawings and write them again.

        This feature would have to be done in flex to the Internet.

        Excuse my writing, for or Brazilian.

        Thanks for the help.

  • CQ71

    Dear James,

    may I add also a jpg image as background in the Paint application?
    That’s in order to be apble to draw something on an imported image.

    Regards
    c.

    • Brian

      That part is easy :)

      Just add an Image tag (or loader if you prefer) right before the DrawingArea in the MXML and make sure they both have the same dimensions specified. Something like…

      Good luck!

      Brian

  • LvnM

    Hi James,
    I want to type text on whiteboard and suppose if i am bringing Text area component and typing the text,what I want to know is how ican then remove that component and bring the text directly on the whiteboard or is there any other solution?

    Thanks In Advance!

  • usman aziz

    hey james ,
    I also try to make simple paint application.. I am having problem in calling functions in uicomponents events like mouseup etc …
    can you tell where i am going wrong.

    			public var count:int = new int();
			public var drawColor:uint = new uint();
			//var s:UIComponent = new UIComponent();
			public var isDrawing:Boolean = new Boolean();
			public var x1:int = new int();
			public var y1:int = new int();
			public var x2:int = new int();
			public var y2:int = new int();
 
			//--------------&gt; Functions
			public function onMouseDown():void{
				x1 = s.mouseX;
				y1 = s.mouseY;
				isDrawing = true;
			}//mouse down
			public function onMouseUp():void{
				isDrawing = false;
			}//mouse up
			public function onMouseMove():void 
			{
				count++;
				//var s:Canvas = new Canvas();
				x2 = s.mouseX;
				y2 = s.mouseY;
				if (isDrawing)
				{
					s.graphics.lineStyle(2, drawColor);
					s.graphics.moveTo(x1, y1);
					s.graphics.lineTo(x2, y2);
					x1 = x2;
					y1 = y2;
				}	
 
				this.addElement(s);
			}
 
			public function save():void
			{
				var bd:BitmapData = new BitmapData(width, height);
				bd.draw(this);
 
				var ba:ByteArray = (new PNGEncoder()).encode(bd);
				(new FileReference()).save(ba, "doodle.png");
			}
 
		s.graphics.clear();
    • usman aziz

      I have panel. inside panel i have UIComponent which is calling onMouseMove() etc
      mx:UIComponent id=”s” maxHeight=”250″ maxWidth=”300″ mouseUp=”onMouseUp()” mouseMove=”onMouseMove()” mouseDown=”onMouseDown()”
      no method is calling when i run program .
      and if i put these event in panel tag they work y?

      • Brian

        What are the dimensions of the UIComponent at runtime?

      • http://www.jamesward.com James Ward

        As Brian asked, size could be the problem. Also a component must not be transparent to catch mouse events. Flex used to draw a nearly invisible mouse shield (fill the component with white and an alpha of 0.00001). But I’m not sure if UIComponent still does that automatically or not.

      • Umair Aamir

        uicomponent is a displayObject but it is not like canvas. you can say that unless you don’t put some other control in uicomponent or unless it is not filled by some other visual control like image etc any event on it wouldn’t work.

  • Abhishek Saxena

    Hello James,
    Nice tutorial..welll i have one question..
    what if i draw three or four lines..and then i want to see from start what i have drawn (much like a video of my drawing) , is there any way to do this.?
    what i think is just store all the points at mouse move and store in the array and then draw them by fetching points from array..but does it show the lines drawing at the same speed as if i was watching line drawing video.?

    • http://www.jamesward.com James Ward

      Yeah, you could just store all of the draw commands. It would be a bit verbose but would allow you to pull them out and replay them.

  • Abhishek Saxena

    Thanks James,
    By the way i want to ask you one more thing, have you worked on the dae or collada files in papervision.
    i have developed an application using papervision objects like sphere and cylinder etc , but i found quite tough to develop application using dae files.
    sometimes it works ,sometimes it not.?
    Do you have any idea how to make it easier to work?

    • http://www.jamesward.com James Ward

      Unfortunately I’m not familiar with those tools. Sorry.

  • Umair Aamir

    I want to save my freehand drawing and then send it to someone through strautus. Can anyone help me out that how can I save freehand drawing.

  • Eman

    Hi,

    I am thinking adding some shape, polygon and even some tools like in photoshop. It is possible? Is there any free drawing tools available for this project.

    Thanks a lot.
    Cheers.

    • Brian

      Eman, I’ve done exactly that. At work, we’re using concepts from Flex Paint in two different projects, with tools for drawing straight lines, ellipses, and rectangles in addition to the freehand drawing. We also support text areas, background images, and foreground images.

      One library that helped us was ObjectHandles . It really streamlines selection and resizing of existing drawn elements on your canvas.

      For layering, we drew things as s:Line, s:Rect, etc, giving us each distinct shape as a separate element on the canvas. That let us do things like Move to Back, etc.

      Good luck!

      • Eman

        Hi Brian,

        That was great. But I was looking a drawing tool like the drawing tools in scribble maps.

        http://pro.scribblemaps.com/

        Thanks

  • Gosia

    Thanks, your example helped me a lot!

  • Luca

    I need to put a image in the background of the drawning area… I manage it with a loader…
    now i need to drag and drop image inside this drawning area … any idea ?

  • lee

    thanks so much,this is the only one running correctly by flash builder 4.

  • thomas

    James, may I know the tag is a package that is created by our own or it is included in flex ? Maybe I am still not clear about these thing, because I copied your source code from the top of this webpage and paste it into flash builder 4.5 to see the result, but there is a compilation error for

    the error is “1046: type was not found or was not a compile-time constant:drawingArea”

    • http://www.jamesward.com James Ward

      You also need the DrawingArea.as file.

  • thomas

    thanks James, cause I am currently using adobe flash builder 4.5 , when I created a flex project , I can run your program, but when I open a flex mobile project and run the same code there is an error in the line ” “. Is it because of the component is not supported in flex mobile project?

    • thomas

      The error is at “mx: ColorPicker”

  • Jose Francinaldo

    Hi, I’m new to Flex and am trying to make a shared whiteboard, utizando Flash Media Server, I have FMS and design but could not yet make the quador be shared with all people who are seeing could help me any way?